Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Chinwike1/redux-user-auth
User Authentication workflow made with the MERN stack
https://github.com/Chinwike1/redux-user-auth
authentication nodejs react redux-toolkit
Last synced: 3 days ago
JSON representation
User Authentication workflow made with the MERN stack
- Host: GitHub
- URL: https://github.com/Chinwike1/redux-user-auth
- Owner: Chinwike1
- License: gpl-3.0
- Created: 2022-05-31T20:52:50.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-27T17:00:56.000Z (over 1 year ago)
- Last Synced: 2023-07-10T09:45:30.706Z (over 1 year ago)
- Topics: authentication, nodejs, react, redux-toolkit
- Language: JavaScript
- Homepage: https://redux-user-auth.netlify.app/
- Size: 433 KB
- Stars: 54
- Watchers: 5
- Forks: 34
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome_ai_agents - Redux-User-Auth - User Authentication workflow made with the MERN stack (Building / Workflows)
- awesome_ai_agents - Redux-User-Auth - User Authentication workflow made with the MERN stack (Building / Workflows)
README
# User Authentication with Redux Toolkit
Authentication workflow built with the MERN stack & Redux Toolkit. [Project demo here](https://redux-user-auth.netlify.app/)
## Features
- User Authentication — Login & Register
- Protected routes with React Router v6
- JWT storage with localStorage
- Automatically fetches user details on page load — Header.js
- Redux Toolkit's & RTK Query
## Usage
### Starter files
If you're following along with the [blog post](https://blog.logrocket.com/handling-user-authentication-redux-toolkit), clone the `starter-files` branch with the following command:
```bash
git clone --branch starter-files --single-branch https://github.com/Chinwike1/redux-user-auth.git
```
### ES Modules in Node
ECMAScript is used on the backend instead of CommonJS. This requires you to add the `.js` extension when importing a file — not package.
## MongoDB Setup
Follow this guide on "[Getting started with MongoDB Atlas](https://www.mongodb.com/docs/atlas/getting-started/)" to setup your database.
## Environment Variables
Environment variables are shown in `.env.example` files.
## Install Dependencies
Run this command to install dependencies in both the backend & frontend folders:
```
npm install && cd frontend && npm install
```
## Start development server
```bash
# Run frontend (:5173) & backend (:5000)
npm run dev
# Run backend only
npm run server
# Run frontend only
npm run client
```
## Roadmap
- Update the authentication mechanism to use Cookies instead of WebStorage(Local or Session)
## License
GPL-3.0 — Open source license. Software can be used, copied, modified, e.t.c, free of charge.