Forgot and Reset Password

Overview

In a Next.js Supabase saas application, users who sign in using the email-password method may sometimes forget their password. The template provides a password reset feature to handle such scenarios.

Password Reset Process

1. Triggering Password Reset:

   • Users who forget their password can initiate a reset by entering their registered email address.
   • The system sends an email with a link to reset the password.
   • Note: This feature is only available for users who have signed in using the email-password method.

2. Supabase Password Reset Method:

   • The password reset function is powered by the supabase.auth.resetPasswordForEmail method in the Next.js Supabase saas template.
   • Ensure that all relevant Supabase environment variables are correctly set for local and production enviroments.

3. Reset Password Link Structure:

   The reset password email contains a link with three key parameters:

   • Token: A random string containing user identity information.
   • Type: Set to recovery, indicating a password recovery event.
   • redirect_to: Defines the landing URL after successful password recovery.

Setting Up Redirect URLs

Local Development

For local development, the redirect_to URL is referenced from the SITE_URL in the .env file.

Production Environment

In production, the Redirect URL should be additionally configured in the Supabase dashboard console. The URL must be included in the list of allowed redirect URLs in the Supabase project settings.

Customizing Email Template

Supabase provides options to customize the content of the password reset email:

Supabase Dashboard

• You can edit the email template by navigating to the following path in the Supabase dashboard:
  https://supabase.com/dashboard/project/{projectID}/auth/templates
• Modify the subject and body of the reset password email directly from the dashboard.

Local Template

• To configure email templates locally, open the config.toml file located in the /supabase/templates folder.
• Here’s an example configuration for the reset password email:

  [auth.email.template.recovery]
  subject = "Reset Password"
  content_path = "local html file path"

• This setup allows you to specify the subject and point to the HTML file that contains the email content.

Resetting the Password

1. Reset Flow

   • Upon successful submission of the password reset form, an email with the reset link is sent to the user.
   • The reset link includes a token, recovery type, and redirect URL as explained above.

2. Password Update

   • When the user opens the reset link, they are redirected to a password update page.
   • After successfully updating the password, the user is redirected to the dashboard page.