https://github.com/andoniat/auth_login_react

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:
https://github.com/andoniat/auth_login_react

admin-dashboard api-client asynchronous front-end-development jwt-authentication react ui-components

Last synced: 2 months ago
JSON representation

Host: GitHub
URL: https://github.com/andoniat/auth_login_react
Owner: AndoniAT
License: gpl-3.0
Created: 2024-12-15T14:31:39.000Z (over 1 year ago)
Default Branch: master
Last Pushed: 2025-01-31T14:24:05.000Z (over 1 year ago)
Last Synced: 2025-02-12T12:46:13.997Z (over 1 year ago)
Topics: admin-dashboard, api-client, asynchronous, front-end-development, jwt-authentication, react, ui-components
Language: TypeScript
Homepage:
Size: 454 KB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

Authentication JWT Login in React

Author : Andoni ALONSO TORT

### React + TypeScript + Vite

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](https://github.com/AndoniAT/Auth_JWT_NodeJs). 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

### Dependencies

Other dependencies installed :
- [axios](https://www.npmjs.com/package/axios): For API requests
- [@fvilers/disable-react-devtools](https://www.npmjs.com/package/@fvilers/disable-react-devtools) : To disable react devtools in browser
- [jwt-decode](https://www.npmjs.com/package/jwt-decode) : To decode accesToken received from Backend
- [clsx](https://www.npmjs.com/package/clsx) : Fot conditional clasnames
- [react-error-boundary](https://legacy.reactjs.org/docs/error-boundaries.html) : 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](https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary)

For styles see :
- [Flowbite](https://www.heroui.com/
docs/components)
- [Tailwind](https://tailwindcss.com/docs)
- [Heroui](https://www.heroui.com/docs/components)

To init tailwind in project :
> npm install -D tailwindcss postcss autoprefixer

> npx tailwindcss init -p

See [tailwind documentation](https://tailwindcss.com/docs/guides/vite) to see how to install tailwind with vite.

# Other project details

== USER ROLES ==

Role
Code

Admin
1000

User
2000

## == 🏠 Home Page ==

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 ==

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 Account ==

Create an account while following the rules defined in the [Back-end project](https://github.com/AndoniAT/Auth_JWT_NodeJs). Once the account is created, the user will be redirected to the login page.

## == 👨‍💼 Admin Page Users Manage ==

The admin page displays a list of users with action buttons: Edit and Delete.

‼️WARNING: An administrator cannot be deleted if they are the only administrator of the application.

## == 👨‍💻 User Profile ==

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.)

‼️WARNING: Some modifications to sensitive information ( email, username and roles ) may require reauthentication.

# == ✅➕ MORE ==

## == ↪️ REDIRECTIONS (Navigation) ==

- 🙅 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 LOADING (ErrorBoundary) ==

- Error messages on the page if a resource fails to load properly.