Login Component

Introduction

In the original Expertiza RoR application, user login is done by storing unique user ids in session store. All the authentication information is stored on the server side, in the session hash. Here, our server is stateful, keeping track of whether or not a user has logged in, and who that user is. When using Rails API, we'll need to tell the client, i.e. our React app, to store some kind of unique identifier and send that unique identifier to Rails API on every request. Rails can then use the unique identifier to identify the user making the request. We have used JWT authentication for authenticating the user. JWT encrypts user's unique ID into a compact and secure JSON web token. This token is generated by Rails and sent to the client. The client sends it to the back-end in HTTP Authentication header in all subsequent requests.

When a user logs in using the React application, a redux action is dispatched, which posts the user's email id and password to the Rails back-end. Upon successful authentication, the Rails API sends back a JWT token, which is then stored in the Redux store, and can be used to make subsequent requests.

React

The component that renders the login can be found in client/src/components/login/Login.js. Here, different React life-cycle methods are used to take care of various cases.

state = {
       username: ,
       password: 
   } 

The first thing to do is to initialize the state of the component. As for login, we are only concerned with two parameters, viz. username and password.