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

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.

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').

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'.

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.

1import 'package:firebase_auth/firebase_auth.dart';
2
3Future<bool> verifyCurrentPassword(String currentPassword) async {
4  try {
5    final user = FirebaseAuth.instance.currentUser!;
6    final credential = EmailAuthProvider.credential(
7      email: user.email!,
8      password: currentPassword,
9    );
10    await user.reauthenticateWithCredential(credential);
11    return true;
12  } catch (e) {
13    return false;
14  }
15}

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.