React Js Authentication using Redux Token Auth

React Js Authentication using Redux Token Auth

Photo by ZSun Fu on Unsplash

Redux Token Auth is a client-side solution for user authentication using React and Redux with Rails Backend that devises Token Auth.

We will create a simple authentication page using redux token auth

Create a react js project using the following command

create-react-app tokenauth

once the project is created navigate to the folder and install the redux token auth dependency

npm install --save redux-token-auth

Install the below redux dependencies

npm i redux --save npm i react-redux --save npm i redux-thunk --save

Once the plugins are installed go to src directory and create two folders namely redux and components .

Folder / File Structure


  1. In redux -> actions -> redux-token-auth-config.js add the below code


2. In redux -> reducers -> index.js add the below code


3. In redux -> store -> index.js add the below code


4. In redux -> initial-state.js add the below code


5. In index.js we will add the provider


Now we will create the register screen and sign in screen

Register Screen


SignIn screen

sign in screen

You don’t have any idea of what’s been happening so far. I too had the same while reading the documentation of redux token auth and creating the above.

No worries we will dig it deeper now.

Typically what’s happening with redux-token-auth is when you log in/ register with the server.

The server will respond you back with some credentials like below


These credentials are stored in local storage whenever you make a new request to the server it will validate these tokens at first and then it will respond you with the data you need along with the new credentials.

These new credentials will be again gets updated in the local storage.

So What does redux-token-auth do

If you want to do the above process without redux token auth then for each server call you need to attach the credentials as headers and while receiving the response you have to store the credentials to the local storage.

You can bypass this process using redux-token-auth because the plugin will do the job for you.

Inside redux-token-auth

Sign in User

Here you can see there are using axios for http call and adding the sign_in with your base url.

once the response is received it is stored in



Though this plugin looks good there are some drawbacks

Though this portion will reduce the use of HOC to check whether the user is authenticated or not. But the problem is it will not work with the latest version and there is no support for the plugin.

If you don’t feel to use this plugin you can create your own http interceptor with redux persist.



Feel free to grab the gist

Http Interceptor

1. http-interceptor.js

2. getAuthHeader.js

Redux Token Auth

  1. redux-token-auth-config.js

  2. reducers.js

  3. store.js

  4. initialState.js

  5. RegisterScreen.js

  6. SignInScreen.js