Implement Email Verification on Registration

[pablomadrigal]

Implement Email Verification on Registration

🌟 Objective

Add an email verification step to the user registration process by sending a one-time verification code to the user’s email and requiring them to enter it to complete the signup.

🛠️ Tasks

📩 Backend Implementation

Generate a random verification code when a user registers.
Store the code securely in the database.
Create an API endpoint to send the verification email.
Implement an API endpoint to validate the verification code entered by the user.
Ensure codes have an expiration time (5h).
Add rate-limiting to prevent abuse (e.g., avoid sending too many emails in a short period).

📧 Email Service Integration

Using the same code from Frontend/app/api/email/route.ts to send the new email
Send a well-formatted email with the verification code.

🖥️ Frontend Implementation

Update CreateUserModal.tsx in Frontend/components/CreateUserModal.tsx to:
When the admin add the new user, we should send an email to that user with the OTP

Create a new page where users can enter the verification code.
Handle API responses (successful verification, invalid/expired codes, resend option).
Provide user-friendly messages (e.g., “Code expired, please request a new one”).

🛡️ Security Considerations

Use rate limiting to prevent abuse (avoid too many emails sent).
Encrypt the verification code when storing it in the database.
Implement a resend verification code feature with cooldown time.

✅ Acceptance Criteria

Users receive a verification email upon registration.
They must enter the correct verification code to complete registration.
Invalid or expired codes trigger appropriate error messages.
Emails are sent using a reliable provider and follow security best practices.