Learn react on railsSort Order
00:00
08:43

React Intermediate: Wiring up the Authentication Logic - [007]

In this episode we wire up the sign in form using the new auth logic from the previous episode.

The first thing we're going to do is implement the submitForm callback function

// app/assets/src/pages/auth/sign_in.js// ...import { inject, observer } from 'mobx-react'@inject('auth') @observerclass SignIn extends React.Component {  // ...  submitForm = (e) => {    e.preventDefault()    const { auth } = this.props    auth.createSession(this.email.value, this.password.value, null)  }  // ...}

The next thing we'll need to do is setup the proxy config for webpack dev server correctly.

// app/assets/config/development.js// ...  devServer: {    // ...    proxy: {      "/v1": "http://localhost:3000"    }  }

We also need to modify the auth class

// app/assets/src/stores/auth/index.js// ...class Auth extends Connect {  namespace = 'v1'  resource = 'sessions'    // ...}

Once we make these modifications our application should be correctly making the sign in request to our api.