🔐 Password Reset Flow (Frontend)

The Password Reset Flow project is a full-stack authentication module designed to provide users with a secure and reliable way to manage their accounts. It includes user registration, login, forgot password, and password reset functionality with real-time email notifications powered by Nodemailer. This solution is built with Node.js + Express.js for backend and React.js with Bootstrap for frontend. This frontend provides pages and UI for:

• Register (signup form)
• Login (signin form)
• Forgot Password (request reset link)
• Reset Password (set new password)

It connects to the backend APIs via Axios and manages navigation with React Router.

---

🚀 Key Features:-

🔹 Authentication

• Register: Users can sign up with name, email, and password. Passwords are stored securely using bcrypt hashing.

• Login: Users can authenticate with email and password, receiving a JWT(Jason Web Token) for secure session management.

🔹 Password Recovery

• Forgot Password: Users can request a password reset by providing their email.

• Email Notification: A secure reset link is sent to the user’s email with a time-limited token.

• Reset Password: Users can click the link, enter a new password, and update their credentials securely.

🔹 Security

• Passwords are hashed with bcrypt.

• Reset tokens are generated with crypto and stored as hashed values in the database.

• Tokens have expiration times to prevent misuse.

• Reset flow prevents token reuse and provides idempotent responses to prevent data leakage.

---

📂 Functional Workflow:-

1. User Registration

• User enters username, email, and password.

• Backend validates input and stores hashed password in MongoDB.

2. User Login

• User submits email and password.

• Backend verifies credentials, issues a JWT token, and sets a secure cookie/session.

3. Forgot Password

• User enters registered email.

• Backend generates a reset token, stores its hashed version in DB, and emails a reset link.

4. Password Reset

• User clicks the link (e.g., /reset-password/:id/:token).

• Frontend extracts token and prompts for a new password.

• Backend validates token, updates the user’s password, and invalidates the token.

5. Email Notifications

• Emails are sent via SMTP (Gmail) with links to reset password using nodemailer.

• Emails include instructions and password reset link to reset the password.

---

✅ Simple Usage Flow:-

• Register → create account

• Login → access app

• Forgot Password → enter email → email sent

• Click email link → lands on ResetPassword page

• Reset password → submit → success → redirect to login

---

Packages Installed:-

• axios

• react

• react-dom

• react-router-dom

• react-toastify

---

🙋‍♂️ Author & Contact:-

• Developed by: Vignesh R

• GitHub: @VigneshRav

• Email: [email protected]

---