# How to Create a Custom Reset Password Screen for Your FlutterFlow App

- Tool: FlutterFlow
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: FlutterFlow Free+
- Last updated: March 2026

## TL;DR

Build an in-app password change screen for authenticated users with three fields: current password, new password, and confirm new password. Verify the current password by re-authenticating with Firebase Auth. Validate the new password for minimum 8 characters, one uppercase letter, and one number using a Custom Function that returns a strength score for the progress meter. On successful update, sign out the user and redirect to login so they re-authenticate with the new password.

## Building an In-App Password Change Screen

This screen lets logged-in users change their password from within the app. It differs from the forgot password flow (#28) because the user is already authenticated and must verify their current password first. This is a security feature found in every production app.

## Before you start

- A FlutterFlow project with Firebase or Supabase authentication configured
- Email/password authentication enabled
- The user must be logged in to access this page

## Step-by-step guide

### 1. Create the password form with three fields and visibility toggles

Create a ResetPasswordPage. Add a Column with three TextField widgets: Current Password (obscureText: true, prefixIcon: lock), New Password (obscureText: true, prefixIcon: lock_outline), Confirm New Password (obscureText: true, prefixIcon: lock_outline). For each field, add a suffixIcon IconButton that toggles between visibility and visibility_off — on tap, toggle a Page State boolean (showCurrentPw, showNewPw, showConfirmPw) and bind obscureText to its inverse. Add Page State variables for each field value.

**Expected result:** Three password fields with show/hide toggles for each.

### 2. Add a password strength meter below the new password field

Below the New Password field, add a LinearPercentIndicator (height 6, borderRadius 3). Bind the percent value to a Custom Function that calculates password strength: returns 0.0 for empty, 0.25 for length >= 8, 0.5 if also has uppercase, 0.75 if also has number, 1.0 if also has special character. Set progressColor conditionally: red below 0.5, amber below 0.75, green at 0.75+. Add a Text label below showing the strength level ('Weak', 'Fair', 'Good', 'Strong').

**Expected result:** A color-coded progress bar shows password strength updating in real-time as the user types.

### 3. Validate all fields before attempting the password update

On the Update Password button tap, run validation checks: (1) current password is not empty, (2) new password meets minimum requirements (>= 8 chars, 1 uppercase, 1 number), (3) new password matches confirm password, (4) new password is different from current password. Show specific error messages for each failure: 'Current password is required', 'Password must be at least 8 characters with one uppercase letter and number', 'Passwords do not match', 'New password must be different from current'.

**Expected result:** Validation checks all conditions and shows specific error messages before any auth actions.

### 4. Verify current password using re-authentication

Before updating, verify the current password by attempting to re-authenticate. In a Custom Action, use Firebase Auth: EmailAuthProvider.credential(email: currentUser.email, password: currentPassword), then currentUser.reauthenticateWithCredential(credential). If this succeeds, the current password is correct. If it throws, show 'Current password is incorrect.' This prevents anyone with a temporarily unlocked device from changing the password.

```
import 'package:firebase_auth/firebase_auth.dart';

Future<bool> verifyCurrentPassword(String currentPassword) async {
  try {
    final user = FirebaseAuth.instance.currentUser!;
    final credential = EmailAuthProvider.credential(
      email: user.email!,
      password: currentPassword,
    );
    await user.reauthenticateWithCredential(credential);
    return true;
  } catch (e) {
    return false;
  }
}
```

**Expected result:** Re-authentication confirms the current password is correct before allowing the change.

### 5. Update the password and sign out for re-authentication

After successful verification, use the Auth Action: Update Password with the new password value. On success: show a Snackbar 'Password updated successfully', then Auth Action: Sign Out, then Navigate (Replace Route) to the Login page. Signing out forces the user to log in again with their new password, ensuring the credential is fresh. On failure: show the specific error message from the auth provider.

**Expected result:** Password updates and the user is signed out and redirected to login with the new password.

## Complete code example

File: `verify_current_password.dart`

```dart
import 'package:firebase_auth/firebase_auth.dart';

/// Verify the current password by re-authenticating.
Future<bool> verifyCurrentPassword(String currentPassword) async {
  try {
    final user = FirebaseAuth.instance.currentUser!;
    final credential = EmailAuthProvider.credential(
      email: user.email!,
      password: currentPassword,
    );
    await user.reauthenticateWithCredential(credential);
    return true;
  } on FirebaseAuthException catch (e) {
    debugPrint('Re-auth failed: ${e.code}');
    return false;
  }
}

/// Calculate password strength score (0.0 - 1.0)
double calculatePasswordStrength(String password) {
  if (password.isEmpty) return 0.0;
  double score = 0.0;
  if (password.length >= 8) score += 0.25;
  if (password.contains(RegExp(r'[A-Z]'))) score += 0.25;
  if (password.contains(RegExp(r'[0-9]'))) score += 0.25;
  if (password.contains(RegExp(r'[!@#\$%^&*(),.?":{}|<>]'))) score += 0.25;
  return score;
}

/// Strength label from score
String strengthLabel(double score) {
  if (score <= 0.0) return '';
  if (score <= 0.25) return 'Weak';
  if (score <= 0.5) return 'Fair';
  if (score <= 0.75) return 'Good';
  return 'Strong';
}
```

## Common mistakes

- **Not requiring current password verification before allowing the change** — Anyone with temporary access to an unlocked device can change the password and lock out the real owner. Fix: Always re-authenticate with the current password before allowing password updates. Use Firebase's reauthenticateWithCredential.
- **Not signing out the user after a successful password change** — The current session token may become invalid after a password change. The user experiences intermittent auth errors until they manually re-login. Fix: Sign out the user immediately after successful password update and redirect to the login page.
- **Not checking that new and confirm passwords match** — Users mistype the new password. Without confirmation, they set a password they cannot reproduce, effectively locking themselves out. Fix: Add a confirm password field and validate that both values match before submitting the change.

## Best practices

- Require current password verification via re-authentication before any change
- Show a real-time password strength meter with color coding
- Validate minimum requirements: 8+ characters, uppercase, number
- Check that new password matches confirm password before submitting
- Sign out and redirect to login after successful password update
- Add show/hide toggles on all password fields for usability
- Show specific error messages for each validation failure

## Frequently asked questions

### Is this the same as the forgot password flow?

No. Forgot password (#28) sends a reset email to users who cannot log in. This page (#34) is for authenticated users who know their current password and want to change it from within the app.

### Can I skip current password verification for social login users?

Social login users (Google, Apple) typically do not have a password. Hide the current password field and the change password option for users who signed up via social providers.

### How do I enforce password change every 90 days?

Store a passwordChangedAt timestamp in the user document. On app load, check if more than 90 days have passed. If so, redirect to this page with a message explaining the requirement.

### What if re-authentication fails?

Show 'Current password is incorrect. Please try again.' Do not reveal whether the account exists or other details. After 5 failed attempts, consider adding a cooldown.

### Can I add biometric authentication instead of current password?

Yes. Use the local_auth package in a Custom Action to verify fingerprint/face ID before allowing the password change. This is a premium UX enhancement.

### Can RapidDev help with secure authentication flows?

Yes. RapidDev can implement password management, biometric auth, session management, and security best practices for your FlutterFlow app.

---

Source: https://www.rapidevelopers.com/flutterflow-tutorials/how-to-create-a-custom-reset-password-screen-for-your-flutterflow-app
© RapidDev — https://www.rapidevelopers.com/flutterflow-tutorials/how-to-create-a-custom-reset-password-screen-for-your-flutterflow-app