How to set up forgot password custom actions with Flutterflow and Supabase

This is a a crucial element in the user experience of any application, but not natively built into Flutterflow with Supabase. Therefore, you will need to learn how to set up forgot password custom actions with Flutterflow and Supabase to allow your users to recover their password. Don’t worry though, it only requires some simple actions and any code you need is available below.

The workflow for forgot password actions

In the video we will look at what we need to achieve the desired result of a non logged in user being able to recover their password. The reset password action built into Flutterflow within the Supabase authentication options only sends a forgot password email, it does not reset the user password. So our user will be diverted to a page to input their email address. If it exists in the database then they will receive an email with a magic link, which includes a one time log in authentication token, to allow then to log in to our reset password page and reset their password. This requires a custom action that contains a simple function.

Here is the video tutorial. All of the custom code used in the video is available below.

Custom code

There is only one simple function required for the reset password action. This first option is a simple one without any error handling. As always, remember to change the names of functions and parameters to the ones you are using.

Future changePassword(String? newPassword) async {
  final response = await SupaFlow.client.auth
      .updateUser(UserAttributes(password: newPassword));

  if (response.user != null) {
    return true;
  } else {
    return false;
  }
}

The second option writes any exception errors into an app state variable, which we can use to provide the user feedback in an alert box if they have used the same password again or it is too short.

Future<bool> changePasswordError(String? newPassword) async {
  try {
    final response = await SupaFlow.client.auth
        .updateUser(UserAttributes(password: newPassword));

    // Return true if the response contains a user
    return response.user != null;
  } catch (error) {
    // Handle errors if needed
    print('Error: $error');
    FFAppState().update(() {
      FFAppState().customError = 'Error: $error';
    });
    // Indicate that the password change failed
    return false;
  }
}

Conclusion – Forgot password custom actions

There are a few elements within setting up the user authentication to your Flutterflow application that are essential. There are the forgot password actions we have here, social authentication for user convenience and trust and update user email details. On top of those you would want to look at two factor authentication for additional security.

Fortunately for us, these can all be added to our apps relatively with the combination of Flutterflow and Supabase with just some simple custom functions. This means we can spend more time building features, rather than worrying about user authentication.