Forgot and Reset Password

Overview

In a React Native Supabase AI 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 One-Time Password (OTP).
   • 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 React Native Supabase AI template.
   • Ensure that all relevant Supabase environment variables are correctly set for local and production environments.

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.
• Below is an example configuration for the reset password email:

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

• Below is an example of an HTML email template for OTP-based password reset. You can use the same template in production.

<div>
	<h2>Confirm Your OTP for Password Change</h2>
	<p>Your OTP is:</p>
	<p>{{ .Token }}</p>
</div>