[FEATURE] Implement Login and Signup Functionality (Frontend & Backend)

[ajaynegi45]

Is this feature already requested?

• [x] I have checked "open" and "closed" issues, and this is not a duplicate.

Feature Description

Develop and integrate a secure Login, Signup, and OTP verification feature, ensuring smooth user experience and secure authentication. This feature will involve both frontend UI design and backend API development, along with OTP verification for account signup.

Design Resources:

• Figma Design
• PDF Design

Requirements

Frontend:

• UI Design for the Login, Signup, and OTP Verification forms.
• Required fields:
  • Signup:
  • Username
  • Name
  • Email
  • Password
  • Confirm Password
  • Checkbox: "Get Upcoming Uttarakhand Festival & Fair Alerts!"
  • OTP input field (shown after submitting signup form)
  • Login:
  • Email or Username
  • Password
• OTP Flow:
  • After successful submission of the Signup form, the user should receive an OTP via email.
  • The user should enter the OTP on the verification screen to complete the signup process.
• Input validation (real-time feedback as the user types):
  • Password must meet the following criteria:
  • Minimum 8 characters.
  • At least one uppercase letter (A-Z).
  • At least one lowercase letter (a-z).
  • At least one number (0-9).
  • At least one special character (!, @, #, $, etc.).
  • Password confirmation should match the entered password.
  • Username should be unique.
  • OTP should be a 6-digit numeric code.
• Error/success messaging:
  • Display appropriate messages for password validation, OTP verification, and form submission status.
• Responsiveness: Ensure the design adapts seamlessly across various devices and screen sizes.
• Post-Login/Signup:
  • On successful signup and OTP verification, redirect the user to the homepage.
  • Replace the "Login" button with a profile icon once the user is authenticated.

Backend:

• API Endpoints:
  • POST /api/auth/signup: Handles user registration and sends OTP via email.
  • POST /api/auth/verify-otp: Verifies the OTP and completes the signup process.
  • POST /api/auth/login: Handles user login.
• OTP Flow:
  • Upon user registration, generate a 6-digit OTP and send it via email.
  • Store OTP securely and associate it with the user for validation.
  • OTP should expire after a set time (e.g., 10 minutes).
• Security:
  • Securely store passwords using hashing (e.g., bcrypt).
  • Implement JWT-based authentication to maintain secure user sessions.
  • Ensure secure handling of OTP codes, including expiration and prevention of brute-force attacks.
  • Return appropriate status codes and messages for successful or failed operations.

Additional Considerations:

• Implement unit and integration tests for both the frontend and backend.
• Ensure robust error handling on both frontend and backend (e.g., invalid credentials, OTP mismatch, server issues).
• Use environment variables to store sensitive information (e.g., JWT secret, email service credentials).

Acceptance Criteria:

• Users can sign up with valid credentials and complete signup by entering the correct OTP.
• Users should receive dynamic error messages for invalid input, OTP mismatches, or expired OTPs.
• Successful login should create a persistent session using JWT tokens.
• Secure coding and authentication practices are followed, including OTP expiration.

[priyanshuverma-dev]

May I work on this issue @ajaynegi45 I can implement it. Will use Prisma ORM with next-auth.

[ajaynegi45]

May I work on this issue @ajaynegi45 I can implement it. Will use Prisma ORM with next-auth.

Hi @priyanshuverma-dev,

Thank you for expressing your interest in working on this issue. I'm delighted to inform you that I have assigned this issue to you. Your willingness to contribute to our project is much appreciated.

• Use Drizzle ORM rather than Prisma ORM.
• Database PostgreSQL
• Follow the Figma design
• Don't use any css framework. Write pure Css

Feel free to start working, and if you have any questions or need assistance during the process, please don't hesitate to reach out.

[priyanshuverma-dev]

@ajaynegi45 What about next-auth should I use that

[ajaynegi45]

@ajaynegi45 What about next-auth should I use that

Yes, you can use that