Build a forgot password screen with an email TextField, Send Reset Link button, and a success state that shows a checkmark icon with 'Check your inbox' message. Use FlutterFlow's Auth Action Send Password Reset Email with the entered email. Add a 60-second countdown timer before allowing resend. Handle errors like user-not-found and too-many-requests with specific messages. Link to this page from your login screen's Forgot Password text.
Building a Forgot Password Flow in FlutterFlow
Every app with email/password login needs a forgot password flow. This tutorial builds the complete experience: email input, reset email action, success confirmation, resend with cooldown timer, and error handling for common failure cases.
Prerequisites
- A FlutterFlow project with Firebase or Supabase authentication configured
- Email/password authentication enabled
- Understanding of Auth Actions and Page State in FlutterFlow
Step-by-step guide
Create the forgot password page with email input form
Create the forgot password page with email input form
Create a new page called ForgotPasswordPage. Build the layout: Column (center alignment), padded 24px. Add an Icon (lock_reset, 60px, Primary color), SizedBox(24), Text 'Reset Password' (Headline Small), SizedBox(8), Text 'Enter your email and we will send you a reset link.' (Body Medium, grey, center), SizedBox(24), TextField (keyboardType: emailAddress, hint: 'Email address', prefixIcon: email), SizedBox(16), Button 'Send Reset Link' (full width, Primary). Add a Page State variable emailSent (Boolean, default false).
Expected result: A centered form with icon, heading, description, email field, and send button.
Add email validation and trigger the password reset auth action
Add email validation and trigger the password reset auth action
On the Send Reset Link button's On Tap action flow: first validate the email format using a Conditional check (email contains '@' and '.'). If invalid, show a Snackbar 'Please enter a valid email address'. If valid, add the Auth Action: Send Password Reset Email with the email from the TextField. On Success: set Page State emailSent to true. On Error: check the error code and show appropriate messages.
Expected result: Tapping the button validates the email and sends a password reset email if valid.
Build the success state with check-your-inbox message
Build the success state with check-your-inbox message
Below or replacing the form (using Conditional Visibility on emailSent), show a success state: Column centered with Icon (mark_email_read, 60px, green), SizedBox(24), Text 'Check Your Inbox' (Headline Small), SizedBox(8), Text 'We sent a reset link to [email]. Click the link in the email to reset your password.' (Body Medium, grey). Add a TextButton 'Back to Login' that navigates to the login page.
Expected result: After successful email send, the form is replaced with a confirmation message.
Add a resend button with a 60-second cooldown timer
Add a resend button with a 60-second cooldown timer
Add a Page State variable resendSeconds (int, default 60). On the success state, show a 'Resend Email' TextButton that is disabled when resendSeconds > 0. Display 'Resend in 60s' countdown text. On initial email send success, start a timer: use a Custom Action that decrements resendSeconds every second until it reaches 0. When resendSeconds hits 0, the Resend button becomes tappable. On Resend tap: re-send the reset email and restart the 60-second countdown.
Expected result: A countdown timer prevents spamming the resend button, enabling it again after 60 seconds.
Handle specific auth error codes with helpful messages
Handle specific auth error codes with helpful messages
In the Send Password Reset Email On Error branch, check the error code. For 'user-not-found': show 'No account found with this email address.' For 'too-many-requests': show 'Too many attempts. Please try again in a few minutes.' For 'invalid-email': show 'Please enter a valid email address.' Display these as red Text below the email field with Conditional Visibility bound to a Page State errorMessage variable. Clear the error when the user starts typing again.
Expected result: Specific, helpful error messages display based on the type of auth failure.
Complete working example
1PAGE: ForgotPasswordPage2PAGE STATE:3 emailSent: Boolean = false4 resendSeconds: int = 605 errorMessage: String = ""67FORM STATE (emailSent == false):8 Column (center)9 Icon (lock_reset, 60, Primary)10 Text "Reset Password" (Headline Small)11 Text "Enter your email..." (Body Medium, grey)12 TextField (email, keyboardType: email)13 Text (errorMessage, red, Conditional: errorMessage != "")14 Button "Send Reset Link" (full width)15 On Tap:16 1. Validate email format17 2. Auth: Send Password Reset Email (email)18 3. On Success: set emailSent = true, start timer19 4. On Error:20 user-not-found → errorMessage = "No account found"21 too-many-requests → errorMessage = "Too many attempts"22 invalid-email → errorMessage = "Invalid email"2324SUCCESS STATE (emailSent == true):25 Column (center)26 Icon (mark_email_read, 60, green)27 Text "Check Your Inbox" (Headline Small)28 Text "We sent a reset link to [email]." (Body Medium, grey)29 TextButton "Resend Email" (disabled: resendSeconds > 0)30 Label: "Resend in {resendSeconds}s" or "Resend Email"31 TextButton "Back to Login" → Navigate LoginPageCommon mistakes when creating a Custom Forgot Password Screen for Your FlutterFlow App
Why it's a problem: Not rate-limiting the resend button
How to avoid: Add a 60-second countdown timer that disables the Resend button. Show the remaining seconds so users know when they can retry.
Why it's a problem: Showing a generic 'Error occurred' message for all failures
How to avoid: Parse the auth error code and show specific messages: 'No account found', 'Too many attempts', or 'Invalid email format'.
Why it's a problem: Not linking to this page from the login screen
How to avoid: Add a 'Forgot Password?' TextButton on the login page below the password field that navigates to ForgotPasswordPage.
Best practices
- Add a 60-second cooldown timer on the Resend button to prevent spam
- Show specific error messages for each auth error code
- Display a clear success state with check-your-inbox confirmation
- Link to the forgot password page from the login screen
- Clear error messages when the user starts editing the email field
- Pre-fill the email field if passed as a Route Parameter from the login page
- Add a Back to Login navigation option on both form and success states
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I need to build a forgot password screen in FlutterFlow with email validation, Send Password Reset Email auth action, a success state with resend countdown timer, and specific error handling for user-not-found and too-many-requests. Show the widget tree and action flows.
Create a centered form page with a lock icon, a heading, a description text, an email text field, and a button below. I will add the auth action and error handling.
Frequently asked questions
Does the reset email work with both Firebase and Supabase?
Yes. FlutterFlow's Send Password Reset Email auth action works with whichever auth provider you configured. Firebase sends via Firebase Auth, Supabase sends via Supabase Auth.
Can I customize the reset email template?
In Firebase: go to Firebase Console → Authentication → Templates → Password Reset. In Supabase: go to Dashboard → Authentication → Email Templates. Both allow custom subject, body, and branding.
How long is the reset link valid?
Firebase reset links expire after 1 hour by default. Supabase reset links also expire after 1 hour. Users must request a new link after expiration.
Should I confirm whether the email exists in my system?
For security, some apps show the same success message regardless of whether the email exists (prevents email enumeration). For better UX, you can show 'No account found' if security is not a major concern.
Can I redirect users to a custom page after clicking the reset link?
In Firebase, the reset link opens a Firebase-hosted page or a custom actionCodeUrl. In Supabase, configure the redirect URL in Auth settings. You can redirect to an in-app page for password entry.
Can RapidDev help with authentication flows?
Yes. RapidDev can build complete auth flows including login, registration, forgot password, email verification, social login, and multi-factor authentication.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation