Forgot Password Functionality Implementation

[BrayanMQ]

Overview

This issue covers the technical implementation of the password recovery flow using Supabase Auth.

Technical Scope

1. Authentication Service (lib/auth.ts)

• Add a new function resetPasswordForEmail(email: string) that calls supabase.auth.resetPasswordForEmail.
• Ensure the redirectTo option is configured to point back to the app (e.g., /auth/reset-password).

2. Auth Hook (hooks/useAuth.ts)

• Expose the resetPassword mutation using React Query.
• Handle loading and error states for the reset request.

3. Forgot Password Page Logic (app/auth/forgot-password/page.tsx)

• Implement the form submission logic.
• Connect the form to the useAuth hook.
• Handle redirections or success message visibility.

4. Reset Password Page (Step 2)

• Create a new route /auth/reset-password for the user to enter their new password after clicking the email link.
• Form Fields:
  • New Password
  • Confirm Password
• Logic: Use supabase.auth.updateUser({ password: newPassword }) which is already partially implemented as updatePassword in lib/auth.ts.

5. Internationalization (locales/*.json)

• Add missing translation keys for:
  • auth.forgotPassword.title
  • auth.forgotPassword.description
  • auth.forgotPassword.sendButton
  • auth.forgotPassword.successMessage
  • auth.errors.emailNotFound

Security Considerations

• Ensure the redirectTo URL is whitelisted in Supabase settings.
• Implement Zod validation for the email and new password.

Acceptance Criteria

• Clicking "Forgot Password" on the Login page redirects to the recovery page.
• Users receive a recovery email when they submit their valid email.
• Clicking the link in the email opens the password reset form.
• Users can successfully update their password and log in with the new credentials.
• Error messages are displayed correctly for invalid inputs or failed requests.