Login App – Implement Authentication in React App using Node.js – Part 1
Many of the developers are confused about the implementation of Login/Authentication in React Application. So we thought that to share the whole concept of the login functionality where you can get an idea about the login flow.
Basically the idea is to manage authentication functionality using JSON Web Tokens. For that we need to create the REST API for authentication in Node.js (Backend) and implement authentication in ReactJS application (Frontend) with the use of REST API created in Node.js.
We planned to divide this article into three parts.
- Part 1 – Implementation flow (You are here…)
- Part 2 – Create REST API for authentication in Node.js using JWT
- Part 3 – Create login form in ReactJS using secure REST API
In this article, we will discuss about the implementation flow or basic needs only.
So to implement login/authentication in React app using Node.js, we need to use JWT package in both applications (ReactJS and Node.js). By the use of JWT, we will create JSON web tokens from Node.js application with the use of secret or private key and pass it to the ReactJS application.
Divide the whole application in two parts
1. Node.js Application (Backend)
At backend side we have to work on below points.
- Install “jsonwebtoken” package: We will use this package to create token with the help of User primary data and secret or private key. So when we need it then we can decode it and use the user data to manage application logs.
- Create user signin API: We need API where user can get authenticate by passing the login credentials. If user get authenticated successfully then we will create token as mentioned above and return it.
- Verify token API: We need one more API where we can verify the user token. If it’s invalid then we will send “401 Unauthorized” response to the user.
- Implement middleware: We need to implement the middleware so we can verify the token for private routes.
2. ReactJS Application (Frontend)
Follow below points to implement authentication at frontend side in ReactJS Application.
- Implement routing: We need to create react application and implement the routes to manage the redirection.
- Create login form: We have to create login form where we can authenticate the user credentials and redirect them on the private routes if it’s valid. Also we need to store the token (returning from the API response) in localStorage or sessionStorage so we can pass it in the headers of the private API.
- Verify token on page refresh: In single page application, if token is exist in storage then we have to verify access token on browser refresh.
- Append token in private API: After successful login, we need to pass the token in the header of the all private API so at backend side we can validate it. If user token is not exist or invalid the we can redirect them on the login page.
In next article, we’ll create REST API for authentication in Node.js using JWT
In this article, we have covered the general straight forward flow of the authentication. Check out the below article where you will find the more secure way to implement authentication including refresh token and CSRF protection.
That’s it for today.
Thanks for reading. Happy Coding!
