Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/definitelynotchirag/auth-nextjs
NextJs Authentication using JWT token and Verification with forgot password functionality.
https://github.com/definitelynotchirag/auth-nextjs
authentication forgot-password jwt-authentication login-page nextjs14 signup-page verification
Last synced: about 1 month ago
JSON representation
NextJs Authentication using JWT token and Verification with forgot password functionality.
- Host: GitHub
- URL: https://github.com/definitelynotchirag/auth-nextjs
- Owner: definitelynotchirag
- License: mit
- Created: 2024-04-21T12:28:44.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2024-04-21T12:42:06.000Z (8 months ago)
- Last Synced: 2024-04-21T15:05:21.330Z (8 months ago)
- Topics: authentication, forgot-password, jwt-authentication, login-page, nextjs14, signup-page, verification
- Language: TypeScript
- Homepage:
- Size: 73.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Auth-Nextjs
Implementing authentication with JWT tokens in Next.js involves several steps, including user registration, login, token generation, and verification. Additionally, implementing forgot password functionality typically involves sending a reset password email to the user. Here's a high-level overview of how you can implement these features:
### User Registration:
Create a registration form with fields like email and password.
When the form is submitted, send a POST request to your server with the user's credentials.
On the server, hash the password and save the user's details (including the hashed password) to your database.
### User Login:
Create a login form with fields for email and password.
When the form is submitted, send a POST request to your server with the user's credentials.
On the server, verify the user's credentials, and if they are correct, generate a JWT token.
Send the JWT token back to the client and store it securely (e.g., in local storage or a cookie).
### JWT Token Generation:
Use a library like jsonwebtoken to generate JWT tokens on the server.
Include the user's ID or other identifying information in the token payload.
### JWT Token Verification:
Create a middleware function to verify JWT tokens on protected routes.
Extract the token from the request headers or cookies and verify it using the jsonwebtoken library.
If the token is valid, allow access to the protected route; otherwise, return a 401 unauthorized error.
### Forgot Password Functionality:
Create a forgot password form where users can enter their email address.
When the form is submitted, generate a unique reset token and store it in your database along with the user's ID and an expiration time.
Send a reset password email to the user's email address with a link containing the reset token.
When the user clicks the link, verify the reset token and allow them to reset their password.
### Reset Password:
Create a reset password form where users can enter a new password.
When the form is submitted, verify the reset token and the user's ID.
If the verification is successful, hash the new password and update the user's password in the database.
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!