Users Must Verify Their Old Password Before Resetting It Using Supabase Authentication

This guide demonstrates how users can reset their password within a FlutterFlow app using Supabase authentication, without requiring an email reset link. It is particularly useful for users who are already logged in and want to change their password for security reasons.

Prerequisites

Supabase: A scalable, open-source backend solution similar to Firebase but based on PostgreSQL.
FlutterFlow: A low-code platform for building Flutter applications.

Setting Up Supabase

1. Create a Supabase Project

Sign up at Supabase.
Create a new project, set a secure password, and wait for initialization.

2. Enable Authentication Provider

Navigate to Authentication > Settings in Supabase.
Enable Email/Password authentication.

3. Get API Keys

Go to Project Settings > API in Supabase.
Copy the Project URL and Anon Key for integration with FlutterFlow.

Integrating Supabase Authentication in FlutterFlow

1. Create a FlutterFlow Project

2. Enable Supabase Authentication

In App Settings, enable authentication and select Supabase.
Paste the Supabase API URL and Anon Key from your Supabase project.

3. Create UI for Password Reset

Design a Sign In and Sign Up page in FlutterFlow.
Add a Password Reset screen where users enter a new password and confirm it.
Implement validation to ensure both fields match before proceeding.

Implementing Password Reset Using Supabase

Custom Action: `resetPassword`

A custom FlutterFlow function handles password reset:

Authenticate User: The user signs in with their current password.
Update Password: If authentication is successful, update the password using supabase.auth.updateUser().
Show Alerts: Display success or error messages accordingly.

Code Implementation

Future<bool> resetUserPassword(
  BuildContext context,
  String email,
  String apiUrl,
  String serviceRoleKey,
  String newPassword,
  String oldPassword,
) async {
  // Add your function code here!
  final supabase = SupabaseClient(apiUrl, serviceRoleKey);

  try {
    // Step 1: Authenticate user with old password
    final response = await supabase.auth.signInWithPassword(
      email: email,
      password: oldPassword,
    );

    // Step 2: Update password if authentication is successful
    await supabase.auth.updateUser(
      UserAttributes(password: newPassword),
    );
    _showAlert(context, 'Success', 'Password updated successfully');
    return true;
  } on AuthException catch (e) {
    _showAlert(context, 'Error',
        e.statusCode == '400' ? 'Invalid old password' : e.message);
    return false;
  }
}

void _showAlert(BuildContext context, String title, String message) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text(title),
        content: Text(message),
        actions: <Widget>[
          TextButton(
            child: Text('OK'),
            onPressed: () {
              Navigator.of(context).pop(); // Close the dialog
            },
          ),
        ],
      );
    },
  );
}

Advantages of This Approach

✅ No Email Dependency: Users can reset their password in-app without waiting for email verification.
✅ Enhanced Security: Ensures authentication before allowing a password update.
✅ Seamless UX: The reset process is smooth and user-friendly.

Conclusion

By integrating Supabase authentication with FlutterFlow, you can create a seamless and secure password reset experience within your app. Users can authenticate with their old password and set a new one, eliminating the need for external email links.

For more details, check out the full article.
https://www.flutterflowdevs.com/blog/users-must-verify-their-old-password-before-resetting-it-using-supabase-authentication