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

[ajaynegi45]

Is this feature already requested?

• 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

Requirements

Frontend:

• UI Design for the Login, Signup, and OTP Verification forms.
• Required fields:
  • Signup:
    • Username
    • Name
    • Email
    • Password
    • Confirm Password
    • 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. min 320px to max 1440px
• 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.

[unknown91tech]

@ajaynegi45 I will start working in this .
And can I use nextui (for Ui ) and NextAuth for verifications??

[ajaynegi45]

@ajaynegi45 I will start working in this . And can I use nextui (for Ui ) and NextAuth for verifications??

Hi @unknown91tech,

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 NextAuth for authentication, and NextUI is not.

Folow this design: Figma Design

Before making any contributions, please read the Readme.md file carefully to better understand the project's goals and purpose. This will give you clarity on our mission.

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

[unknown91tech]

@ajaynegi45 So use of any ui library is a no?
And can you grant access to the figma design to me.

[ajaynegi45]

@ajaynegi45 So use of any ui library is a no? And can you grant access to the figma design to me.

Granted Access. No use of any library and css Framework.

[unknown91tech]

can you allow the use of tailwind css atleast?

[ajaynegi45]

can you allow the use of tailwind css atl

Nope

[unknown91tech]

I won't be able to do this without tailwind

[ajaynegi45]

I won't be able to do this without tailwind

It's your choice. If you're not comfortable with the UI, you can still focus on the backend and ensure the core functionality, like login and logout, works smoothly. The UI doesn't have to be perfect right now. Make the UI simple

[iyush05]

hey i would love to work on this issue, I was planning to use prisma, jwt auth and resend for otp verification. Can you assign me this issue

[ajaynegi45]

hey i would love to work on this issue, I was planning to use prisma, jwt auth and resend for otp verification. Can you assign me this issue

Hi @iyush05,

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 like Tailwind Css. Write pure Css
• Minimum use any external Libraries

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

[ajaynegi45]

hey i would love to work on this issue, I was planning to use prisma, jwt auth and resend for otp verification. Can you assign me this issue

What is the progress?

[iyush05]

@ajaynegi45 I was having problem implementing drizzle can I use prisma and hono (cloudflare workers) for backend if not I'll try again

[ajaynegi45]

@ajaynegi45 I was having problem implementing drizzle can I use prisma and hono (cloudflare workers) for backend if not I'll try again

You can take ref from here https://github.com/ajaynegi45/Uttarakhand-Culture-NewUI/tree/main . This project also use drizzle

[iyush05]

@ajaynegi45 hey i have made the frontend and backend for login and signup there is just one problem i am having problem protecting the routes ( meaning the "/game" can be accessed even though the user is not logged in ) can you help me with that https://gist.github.com/iyush05/65c27a912e389c329bc982949cfb25d3

[ajaynegi45]

@ajaynegi45 hey i have made the frontend and backend for login and signup there is just one problem i am having problem protecting the routes ( meaning the "/game" can be accessed even though the user is not logged in ) can you help me with that https://gist.github.com/iyush05/65c27a912e389c329bc982949cfb25d3

Currently don't protect any url. Just protect /profile url.

User can play this game without login. Login is for future ref. Also create a profile page like this https://github.com/ajaynegi45/Uttarakhand-Culture-NewUI/tree/main/src/app/profile

[ajaynegi45]

@ajaynegi45 hey i have made the frontend and backend for login and signup there is just one problem i am having problem protecting the routes ( meaning the "/game" can be accessed even though the user is not logged in ) can you help me with that https://gist.github.com/iyush05/65c27a912e389c329bc982949cfb25d3

any issue connect me on LinkedIn

[ajaynegi45]

@ajaynegi45 hey i have made the frontend and backend for login and signup there is just one problem i am having problem protecting the routes ( meaning the "/game" can be accessed even though the user is not logged in ) can you help me with that https://gist.github.com/iyush05/65c27a912e389c329bc982949cfb25d3

Hi @iyush05,

Hope you're doing great! 😊 Just wanted to check in and see how things are coming along with the issue you're working on. Any progress or updates you’d like to share? And if you’ve run into any roadblocks or need a hand with anything, please don’t hesitate to reach out!

Looking forward to hearing from you!