Securing Your Node.js React.js Application with JSON Web Token (JWT) Authentication
Here Github Repo : https://github.com/idurar/idurar-erp-crm
Hello, today we're going to discuss how to secure your Node.js React.js application using JSON Web Tokens (JWT) and GWT authentication. This advanced approach utilizes cookies and includes a comprehensive example.
check the Video on youtube
To access the full example code for this project, you can find it on the MERN stack-based GitHub repository called "IDURAR ERP CRM". It offers several advanced features that you may find valuable.
Let's start by examining the backend code for creating a Node.js API for notifications. Inside the source folder of the backend directory, you will find the controller and middleware controller folders. Take a look at the "create notification" controller to understand how the login functionality is implemented.
In the first step of the validation process, we ensure that the email and password inputs are sanitized. Once validated, we proceed to query the MongoDB database to find the user associated with the provided credentials. We compare the user's password from the database with the entered password, which is stored securely using salting techniques.
By employing salt, we enhance the strength of the password and protect against rainbow attacks. Each user's salt is automatically generated when they create their initial password.
The application stores various user details such as photo, name, surname, and email. These fields are generally safe to include in notifications. However, we keep the password confidential. Additionally, each user has a unique user ID, which is used for further verification during the login process.
We use bcrypt, a hashing function, to compare the password provided by the user with the hashed password stored in our database. This ensures the authenticity of the user's credentials.
Once the user is authenticated, we generate a JSON Web Token (JWT) as part of the tokenization process. The token is then sent to the client as a cookie. If the user chooses to "remember" their login, the cookie will be set to expire after one year. Otherwise, the cookie's maximum age is limited to the user's session.
To maintain security, we include various attributes in the cookie such as "secure" (set to true), "domain" (set to the request hostname), and "path". This ensures that the cookie is only accessible on secure connections, limited to the domain of the application, and restricted to specific paths. We recommend sending only necessary user profile information in the cookie payload.
Additionally, in our model, we create two tables: one for admins and another for admin passwords. The "generateHash" method in the model generates a hashed password, which is used when creating new users.
To create a new user, we check if the provided email already exists in the database. If not, we proceed with processing the password. After generating a unique user ID, we hash the provided password and save it securely in our database.
Now, let's shift our focus to the frontend implementation. Within the project, you'll find code related to login notifications, a notification service, and login data management. To prevent caching issues, we append a timestamp to each request made to the server. Alternatively, you can utilize Axios to handle caching prevention.
In this project, we utilize Redux for state management. You can explore the integration of notifications and user-related functionality within the application using Redux.
To ensure a seamless user experience, even after closing the application, we store relevant data, such as authentication details, in local storage. This approach allows users to resume their sessions without needing to log in again. However, if the authentication token has expired, the user will be automatically logged out.
Consider a scenario where multiple windows are open in the application. When a user logs out in one window, they should also be logged out in other windows. We acknowledge that this feature may not be functioning correctly at the moment, but we assure you that it will be resolved in future updates.
In conclusion, we've covered a range of concepts related to securing your Node.js React.js application using JSON Web Tokens (JWT) and GWT authentication. By following the provided code examples and guidelines, you can learn how to implement secure authentication in your own projects. This project is based on the MERN stack, which includes MongoDB, Express, React, and Node.js. It also incorporates Ant Design for UI components and Vite for fast development.
Feel free to explore the code base, learn from it, and contribute to its improvement. Don't forget to give it a star and share it with friends who may find it helpful. Additionally, consider subscribing to our channel for more valuable content and leave your comments below. Thank you for watching, and stay tuned for future updates!
Top comments (1)
Amazing 😍