Password Resets

Password reset allows users to change their password by sending them a password reset link to their email address.
Password reset demo
Adding password reset
Adding password reset comprises of following steps:
1.​Creating forgot password page​
1.​Adding the password reset action​
2.​Add an action to navigate to a forgot password page​
3.​Testing password reset​
1. Creating forgot password page
FlutterFlow provides a collection of templates for password reset pages. You can either choose from the templates or create from scratch.
You can continue reading here to see how to create authentication pages from scratch or move to the next section.
Here's an example of how you can create a page that accepts an email for the forgotten password:
Click on the Select Page or Component from the Navigation Menu (left side of your screen).
Click on + Create New, Give it a name.
Click on the + Create New button under the Blank Page template.
Click on the Widget Tree from the Navigation Menu.
Add the Column widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
Add the TextField widget inside the Column and change its Hint Text to the Enter Registered Email.
Add the Button widget below the TextField and change its Text (Under Button Text section) to Send Reset Link.
Creating forgot password page
1.1 Adding the password reset action
To add a password reset action:
Select Button (with Send Reset Link text) from the widget tree or from the canvas area.
Click on the Actions tab (on the right side of your screen).
Click on + Add Action and select the On Tap option.
Find the Action Type dropdown and change it to Authentication.
Find another Action Type dropdown below, and change it to the Reset Password.
Click on the Unset under the Email Field dropdown and set it to Text Field 1 (this should be the field you created for Enter Registered Email).
Adding the password reset action
2. Add an action to navigate to a forgot password page
Here is an example of how you can add a Text widget with an action to navigate to forgot password page.
Open your Sign-in Page.
Add the Text widget inside the Column and change its text to Forgot Password.
Now, click on the Actions tab.
Click on + Add Action and select the On Tap option.
Find the Action Type dropdown and change it to Navigate.
Keep the Navigate to Page option selected under the Navigation Type dropdown.
Find the Navigate To dropdown. Click on the No Page Selected and choose the forgot password page.
Add an action to navigate to a forgot password page
3. Testing password reset
You can test the password reset feature on a device/emulator or in Run Mode (for email and phone sign-in).
To test password reset in Run Mode:
Click on the Run button (top right corner of your screen)
Click on the Forgot Password text on Sign-in page.
Enter your registered email. (for which you would like to reset your password)
Check your email for the password reset link and use it to change the password.
Come back to the Sign-in page in the app.
Enter the credentials with a newly created password.
Click Logout.
Testing password reset

Google Sign-In

Last modified 10mo ago