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:
- User requests that their password be reset by typing in their email.
- Back4App sends an email to their address with a special password reset link.
- User clicks on the reset link and is directed to a special Back4App page to type in a new password.
- 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:
- Flutter version 2.2.x or later
- Android Studio or VS Code installed (with Plugins Dart and Flutter)
- The Flutter app created in previous guide.
- Note: Follow the Get current User on session.
- Complete the previous guide so you can have a better understanding of the
ParseUser
class.- A device (or virtual device) running Android or iOS.
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:
- Create a new
ParseUser
class instance with the commandParseUser(null, null, controllerEmail.text.trim());
. The email field is required for the other fields you can use null. - 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.
Click on Reset Password
button.
On the next screen enter the user’s email and click Reset Password
again.
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!