React Js Authentication using Redux Token Auth
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
src
---components
---RegisterScreen.js
---SignInPage.js
---redux
---actions
-redux-token-auth-config.js
---reducers
-index.js
---store
-index.js
---intial-state.js
- 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
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
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
setAuthHeaders
persistAuthHeadersInLocalStorage
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
Redux Token Auth
