# React Js Authentication using Redux Token Auth

Photo by [ZSun Fu](https://unsplash.com/@zisun_word?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)

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](https://github.com/kylecorbelli/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**

src  
\---components  
\---RegisterScreen.js  
\---SignInPage.js  
\---redux  
\---actions  
\-redux-token-auth-config.js  
\---reducers  
\-index.js  
\---store  
\-index.js  
\---intial-state.js

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

![react-auth-config.js](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056886140/70fc5227-807c-4bc9-a8fa-d9ebec0a27db.png align="left")

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

![reducer.js](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056888213/65e36b91-2300-43ec-85c8-32d1ed780755.png align="left")

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

![store.js](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056889877/84fa35bd-f4d2-4177-bb5b-71dfe1f3e422.png align="left")

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

![initial-state.js](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056891614/31fb400f-2b57-4d59-a52d-59c247a0d471.png align="left")

5\. In index.js we will add the provider

![index.js](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056893217/9cbe267a-b6b3-40f9-beca-8fe43840d8f2.png align="left")

Now we will create the register screen and sign in screen

**Register Screen**

![register-screen.js](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056895366/85c6e4a1-934d-4dc0-aade-1e8ff9c701e7.png align="left")

**SignIn screen**

![sign in screen](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056899142/119e40cf-9e26-48a0-92f4-b4b89832437d.png align="left")

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

![auth](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056901080/3bcc2496-83e6-4ffd-8da1-1bd2544875ef.png align="left")

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056903285/9fa0a168-141c-4e16-8b12-260125696266.png align="left")

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

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056905314/8e3839d7-40a8-4e0f-b86f-c8f3520c61d2.png align="left")

**setAuthHeaders**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056907516/b7c5a357-0cb0-4511-a3a8-ce2f6e5264e1.png align="left")

**persistAuthHeadersInLocalStorage**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056909279/39bcd6a0-b1cf-4fb8-8166-4bbb016dcfa7.png align="left")

Though this plugin looks good there are some drawbacks

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056910949/a612c423-654b-4e46-837b-da9e05836a0b.png align="left")

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](https://github.com/kylecorbelli/redux-token-auth/issues/56).

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

![http-interceptor.js](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056913077/a99adbc9-0dad-436e-a1ca-c345275080ec.png align="left")

![getAuthHeaders.js](https://cdn.hashnode.com/res/hashnode/image/upload/v1698056915457/d967fd22-8544-4db7-94db-8ec448bd6433.png align="left")

Feel free to grab the gist

**Http Interceptor**

1\. [http-interceptor.js](https://gist.github.com/nidhinkumar06/6b65a2a9a75d402a34a225369855fd0a)

2\. [getAuthHeader.js](https://gist.github.com/nidhinkumar06/86645f6ccdbece38d8fd3a9dee27021a)

**Redux Token Auth**

1. [redux-token-auth-config.js](https://gist.github.com/nidhinkumar06/7ba6b6b65602891346b98ac11fdfc5e4)
    
2. [reducers.js](https://gist.github.com/nidhinkumar06/579962f4cefc82c371a4e4c3ea90ae77)
    
3. [store.js](https://gist.github.com/nidhinkumar06/77463fa7e443159bf18b48dc07aad6b0)
    
4. [initialState.js](https://gist.github.com/nidhinkumar06/cc8a54ecbff2b4b213991728d86f60ca)
    
5. [RegisterScreen.js](https://gist.github.com/nidhinkumar06/f9c4462272f6fa42e8fa119e6f936545)
    
6. [SignInScreen.js](https://gist.github.com/nidhinkumar06/279130b1c5d8011b11e2969d839faf49)