{"id":25271363,"url":"https://github.com/andoniat/auth_login_react","last_synced_at":"2026-05-01T14:31:43.544Z","repository":{"id":268261997,"uuid":"903774497","full_name":"AndoniAT/Auth_Login_React","owner":"AndoniAT","description":"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:","archived":false,"fork":false,"pushed_at":"2025-01-31T14:24:05.000Z","size":465,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-12T12:46:13.997Z","etag":null,"topics":["admin-dashboard","api-client","asynchronous","front-end-development","jwt-authentication","react","ui-components"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AndoniAT.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-12-15T14:31:39.000Z","updated_at":"2025-01-31T18:11:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"cea7f4cc-e46d-4430-9f26-cf8b74b8c76f","html_url":"https://github.com/AndoniAT/Auth_Login_React","commit_stats":null,"previous_names":["andoniat/auth_login_react"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndoniAT%2FAuth_Login_React","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndoniAT%2FAuth_Login_React/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndoniAT%2FAuth_Login_React/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndoniAT%2FAuth_Login_React/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndoniAT","download_url":"https://codeload.github.com/AndoniAT/Auth_Login_React/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445683,"owners_count":20939961,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["admin-dashboard","api-client","asynchronous","front-end-development","jwt-authentication","react","ui-components"],"created_at":"2025-02-12T12:32:53.917Z","updated_at":"2026-05-01T14:31:43.454Z","avatar_url":"https://github.com/AndoniAT.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 class=\"text-center\" style=\"background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));\n padding: 5px;\"\u003e Authentication JWT Login in React\n \u003cimg src=\"./src/assets/react.svg\"/\u003e\n \u003c/h1\u003e\n\u003ch4\u003eAuthor : Andoni ALONSO TORT\u003c/h4\u003e\n\n### React + TypeScript + Vite\n\nImplementing authentication in React with JWT received from server.\n\nA front-end application built with React, designed to provide an intuitive and modern interface for user and role management. It includes:\n\n- ✅ An intuitive user interface for login and user profile management.\n- ✅ Role management with specific views and permissions based on user authorizations.\n- ✅ 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.\n- ✅ Support for conditional navigation with protected routes based on user login status and roles.\n- ✅ An optimized user experience thanks to modern libraries like React Router and Axios.\n\nThis 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.\n\n\nProject created with :\n\u003e npm create vite@latest\n\nTo run project :\n- Install dependencies :\n    \u003e npm install\n\n- Run :\n    \u003e npm run dev\n\n\u003chr/\u003e\n\n### Dependencies\n\n\nOther dependencies installed :\n  - [axios](https://www.npmjs.com/package/axios): For API requests\n  - [@fvilers/disable-react-devtools](https://www.npmjs.com/package/@fvilers/disable-react-devtools) : To disable react devtools in browser\n  - [jwt-decode](https://www.npmjs.com/package/jwt-decode) : To decode accesToken received from Backend\n  - [clsx](https://www.npmjs.com/package/clsx) : Fot conditional clasnames\n  - [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)\n\nFor styles see :\n  - [Flowbite](https://www.heroui.com/\n  docs/components)\n  - [Tailwind](https://tailwindcss.com/docs)\n  - [Heroui](https://www.heroui.com/docs/components)\n\nTo init tailwind in project :\n\u003e npm install -D tailwindcss postcss autoprefixer\n\n\u003e npx tailwindcss init -p\n\nSee [tailwind documentation](https://tailwindcss.com/docs/guides/vite) to see how to install tailwind with vite.\n\n\u003chr/\u003e\n\n# Other project details\n\n\u003ch6\u003e== USER ROLES ==\u003c/h6\u003e\n\n\u003ctable style=\"margin: 0 auto; width: fit-content; border: 1px solid black;\"\u003e\n  \u003ctr style=\"background: gray;\"\u003e\n    \u003cth style=\"border: 1px solid black;\"\u003eRole\u003c/th\u003e\n    \u003cth style=\"border: 1px solid black;\"\u003eCode\u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd style=\"border: 1px solid black\"\u003eAdmin\u003c/td\u003e\n    \u003ctd style=\"border: 1px solid black\"\u003e1000\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd style=\"border: 1px solid black\"\u003eUser\u003c/td\u003e\n    \u003ctd style=\"border: 1px solid black\"\u003e2000\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## == 🏠 Home Page ==\n\nOn 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.\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n     \u003cimg src=\"https://github.com/user-attachments/assets/fe029448-ce47-44fb-81fd-6f322305aceb\" width=\"500\"/\u003e\n     \u003cimg src=\"https://github.com/user-attachments/assets/56f1d304-0ce3-4083-8e7e-4a132578efcb\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n## == 🔐 Login ==\n\nLogin 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.\n\nEach 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\n\nAdded a 'Trust this device' checkbox to stay logged into the application.\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n     \u003cimg src=\"https://github.com/user-attachments/assets/2e6326d2-8172-4eb4-846f-3235105308b5\" width=\"500\"/\u003e\n     \u003cimg src=\"https://github.com/user-attachments/assets/cd362988-b2a6-4eda-ad33-dca21a9e5f65\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n## == ✅🧔 Create Account ==\n\nCreate 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.\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n    \u003cimg src=\"https://github.com/user-attachments/assets/5205d68a-6d52-4038-8131-23374c07fda7\" width=\"500\"/\u003e\n    \u003cimg src=\"https://github.com/user-attachments/assets/4622bc3a-a107-4046-8a86-0a103dfc5db6\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n## == 👨‍💼 Admin Page Users Manage ==\n\nThe admin page displays a list of users with action buttons: Edit and Delete.\n\n‼️WARNING: An administrator cannot be deleted if they are the only administrator of the application.\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n   \u003cimg src=\"https://github.com/user-attachments/assets/161ab61b-6c30-450f-a460-77c3e10f3412\" width=\"500\"/\u003e\n   \u003cimg src=\"https://github.com/user-attachments/assets/4648d227-143c-4cfb-8e4e-546fbee5ac6a\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n## == 👨‍💻 User Profile ==\n\nThe user profile page is divided into 3 sections:\n\n - 👁️ Form for viewing, editing, and deleting the user : Actions only displayed in your own profile or if you are an admin.\n\n - 🤝 Interactions : Are only displayed in other user, not your own profile.\n\n - 💻 Posts\n\n(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.)\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n   \u003cimg src=\"https://github.com/user-attachments/assets/36988fbb-d41a-49e5-b0f4-1e1659cfddc9\" width=\"500\"/\u003e\n   \u003cimg src=\"https://github.com/user-attachments/assets/301a4715-db83-4825-aec7-115f6f59e5b4\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n‼️WARNING: Some modifications to sensitive information ( email, username and roles ) may require reauthentication.\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n   \u003cimg src=\"https://github.com/user-attachments/assets/90b6cff1-720a-4eb6-8d6f-9aa6ff120787\" width=\"500\"/\u003e\n   \u003cimg src=\"https://github.com/user-attachments/assets/98edacff-8e1b-4214-b616-480c131c6c48\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n# == ✅➕ MORE ==\n\n## == ↪️ REDIRECTIONS (Navigation)  ==\n\n- 🙅 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.\n- ❓ 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.\n\n## == ❌ ERROR LOADING (ErrorBoundary) ==\n\n- Error messages on the page if a resource fails to load properly.\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/48f01ae2-16e0-4088-ac3c-a6cead7423c3\" width=\"500\"/\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/a70273fd-c81c-4aff-949c-76fcb07f3723\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n## == 🔄️ LOAGING DATA (Suspend =\u003e SKELETONS ) ==\n\nUse of Suspense to display a loading skeleton while the data is being loaded. This feature enhances the user experience\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/c1466d4d-056f-422c-8c03-d9a648a974f6\" width=\"500\"/\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/24d1fcda-d345-4519-9c62-84b1b8bf5ad9\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n## == ❌ ERROR FORMS ==\n\nDisplay clear error messages in forms so that the user can correct the submitted information.\n\n\u003cdiv style=\"flex inline-flex\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/da6ddfa7-654f-453d-93c2-160e5fe15121\" width=\"500\"/\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/7aac1b80-6c39-4a7f-a48d-dbb64182e528\" width=\"500\"/\u003e\n\u003c/div\u003e\n\n\u003chr/\u003e\n\u003ch5\u003eAuthor: \u003ci\u003eAndoni ALONSO TORT\u003c/i\u003e\u003ch5\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandoniat%2Fauth_login_react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandoniat%2Fauth_login_react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandoniat%2Fauth_login_react/lists"}