Flutter

How to add user reset password to a Flutter App

Introduction

It’s a fact that as soon as you introduce passwords into a system, users will forget them. Parse Server provides a way to let them securely reset their password.
The password reset flow starts getting the user’s email address and calling the requestPasswordReset method from Parse.User class.
This will attempt to match the given email with the user’s email or username field and send them a password reset email. By doing this, you can opt to have users use their email as their username, or you can collect it separately and store it in the email field.

The flow for password reset is as follows:

  1. User requests that their password be reset by typing in their email.
  2. Back4App sends an email to their address with a special password reset link.
  3. User clicks on the reset link and is directed to a special Back4App page to type in a new password.
  4. User types in a new password. Their password has now been reset to a value they specify.

In this guide, you will learn how to use the Flutter plugin for Parse Server to implement user reset password feature using the ParseUser class for your Flutter App.

Goal

Build a reset password feature using Parse for a Flutter App.

Prerequisites

To complete this tutorial, you will need:

Understanding Reset Password process

To better understand Reset Password process, we will continue the development of the application started in the previous guide and implement the function.

We won’t explain the Flutter application code once this guide’s primary focus is using the Flutter with Parse. Following the next steps, you will build a Login e Logout App at Back4App Database.

Let’s get started!

In the following steps, you will be able to build a reset password function in our application.

Step 1 - Open the Login/Logout/Reset Password App Project

Open Flutter project from the previous guide Get current User on session.

Go to the main.dart file.

Step 2 - Code for Reset Password

To start the password reset flow, we need the user’s email. Search for the function doUserResetPassword in the file main.dart. Replace the code inside doUserResetPassword with:

1
2
3
4
5
6
7
8
9
10
11
12
    final ParseUser user = ParseUser(null, null, controllerEmail.text.trim());
    final ParseResponse parseResponse = await user.requestPasswordReset();
    if (parseResponse.success) {
      Message.showSuccess(
          context: context,
          message: 'Password reset instructions have been sent to email!',
          onPressed: () {
            Navigator.of(context).pop();
          });
    } else {
      Message.showError(context: context, message: parseResponse.error.message);
    }

To build this function, follow these steps:

  1. Create a new ParseUser class instance with the command ParseUser(null, null, controllerEmail.text.trim());. The email field is required for the other fields you can use null.
  2. Call the user.requestPasswordReset function to send the recovery email.

The complete function should look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  void doUserResetPassword() async {
    final ParseUser user = ParseUser(null, null, controllerEmail.text.trim());
    final ParseResponse parseResponse = await user.requestPasswordReset();
    if (parseResponse.success) {
      Message.showSuccess(
          context: context,
          message: 'Password reset instructions have been sent to email!',
          onPressed: () {
            Navigator.of(context).pop();
          });
    } else {
      Message.showError(context: context, message: parseResponse.error.message);
    }
  }

To test it, click on the Run button in Android Studio/VSCode.

flutter-login-back4app

Click on Reset Password button.

On the next screen enter the user’s email and click Reset Password again.

flutter-reset-password-back4app

It’s done!

At the end of this guide, you can implement password reset function of your app using Parse Server core features through Back4App!