Implementing authentication in React with JWT received from server.
A front-end application built with React, designed to provide an intuitive and modern interface for user and role management. It includes:
- ✅ An intuitive user interface for login and user profile management.
- ✅ Role management with specific views and permissions based on user authorizations.
- ✅ Integration with a secure REST API, developed in Node.js, for all authentication and user management operations. Communications use JWTs (JSON Web Tokens) to ensure secure exchanges.
- ✅ Support for conditional navigation with protected routes based on user login status and roles.
- ✅ An optimized user experience thanks to modern libraries like React Router and Axios.
This front-end is designed to interact with the authentication JWT Node.js back-end proejct. Offering a solid and secure foundation for applications requiring advanced user management.
Project created with :
npm create vite@latest
To run project :
-
Install dependencies :
npm install
-
Run :
npm run dev
Other dependencies installed :
- axios: For API requests
- @fvilers/disable-react-devtools : To disable react devtools in browser
- jwt-decode : To decode accesToken received from Backend
- clsx : Fot conditional clasnames
- react-error-boundary : To manage errorrs thrown with suspense. An error boundary is a special component that lets you display some fallback UI instead of the part that crashed—for example, an error message. See more
For styles see :
- [Flowbite](https://www.heroui.com/ docs/components)
- Tailwind
- Heroui
To init tailwind in project :
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
See tailwind documentation to see how to install tailwind with vite.
| Role | Code |
|---|---|
| Admin | 1000 |
| User | 2000 |
On the homepage, there will be a page similar to when starting a new project with React + Vite, except that there will be an additional navbar with navigation buttons.
Login page to connect to the application. This form calls the login API of the back-end project, which provides an accessToken with a duration of 1 minute and also stores a refreshToken in the cookies.
Each time an API call fails because the token has expired, the application will automatically request a new accessToken. The backend will use the refreshToken stored in the cookies to verify if the user is authorized to make this request
Added a 'Trust this device' checkbox to stay logged into the application.
Create an account while following the rules defined in the Back-end project. Once the account is created, the user will be redirected to the login page.
The admin page displays a list of users with action buttons: Edit and Delete.
The user profile page is divided into 3 sections:
-
👁️ Form for viewing, editing, and deleting the user : Actions only displayed in your own profile or if you are an admin.
-
🤝 Interactions : Are only displayed in other user, not your own profile.
-
💻 Posts
(Points 2 and 3 are not features of this application. They are just examples of what could be added. This application is designed solely to provide a complete authentication and user management project based on roles.)
- 🙅 If a user does not have permission to access a page, they will be redirected to the homepage. For example, a regular user attempting to access the admin page.
- ❓ If an unauthenticated user tries to access a page, they will be redirected to the login page. Once logged in, they will be redirected to the page they were trying to reach.
- Error messages on the page if a resource fails to load properly.
Use of Suspense to display a loading skeleton while the data is being loaded. This feature enhances the user experience
Display clear error messages in forms so that the user can correct the submitted information.
