You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/ff-integrations/authentication/firebase-auth/auth-actions.md
+26-10Lines changed: 26 additions & 10 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -22,17 +22,37 @@ Follow the steps below to add this action:
22
22
23
23
24
24
25
-
## Reset Password [Action]
25
+
## Reset Password
26
26
27
-
Resetting password allows users to change their password by sending them a password reset link to their email address.
27
+
With Firebase Authentication, there are two ways you can allow users to reset their password in your FlutterFlow app:
28
+
29
+
### In-App Password Change
30
+
31
+
This option allows users to change their password while they are logged into the app. This is useful when a user is authenticated but wants to update their password for security reasons.
32
+
33
+
To implement this, create a new page in your app, such as a **ChangePassword** page. This page should include two **TextFields** for the user to enter a new password and confirm it, along with a button (e.g., **Update Password**) to submit.
34
+
35
+
On the button's click, add the **Update Password** action (under *Backend/Database > Firebase Authentication*) and bind the **Password Field** and **Confirm Password Field** to their respective input widgets.
By default, the **Navigate Automatically** option is enabled. This means that after the password is successfully updated, the user will be redirected to the **Logged In Page** specified in your [**Initial Page**](../../../resources/projects/settings/general-settings.md#initial-page) settings.
42
+
43
+
:::
44
+
45
+
### Reset Password Link
46
+
47
+
This allows users who are logged out to reset their password. It sends a password reset link to the user's email address. When clicked, the user is directed to a Firebase-hosted webpage where they can set a new password.
28
48
29
49
<div style={{
30
50
position: 'relative',
31
51
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
@@ -53,15 +73,11 @@ Resetting password allows users to change their password by sending them a passw
53
73
<p></p>
54
74
55
75
56
-
On click of the 'Send Link' button, add the 'Reset Password' action, which sends the password reset link to the given email address. Here are the steps:
57
-
58
-
1. Select the widget (e.g., Button) on which you want to add the action.
76
+
To set this up, create a page in your app, such as a **ForgotPassword** page. This page should include a **TextField** for the user to enter their email address and a button (e.g., **Send Reset Link**) to submit the request.
59
77
60
-
2. Select **Actions** from the properties panel (the right menu) and select **Add Action**.
61
-
3. Search and select the **Reset Password** (under *Backend/Database > Firebase Authentication*) action.
62
-
4. Set the **Email****Field** dropdown to the widget name that accepts email (e.g., *TextFieldEmail*).
78
+
On the button's click, add the **Send Reset Password Email** action (under *Backend/Database > Firebase Authentication*) and set the **Email Field** dropdown to the widget that takes user’s email. This action will send a password reset link to the provided email address.
To build the reset password functionality, you need to create the following two pages in your app:
98
+
99
+
1.**ForgotPassword Page**: This page allows users to enter their email address and request a password reset link.
100
+
2.**UpdatePassword Page**: This page allows users to set a new password after clicking on the reset link.
101
+
:::
102
+
103
+
Here’s how you can add the Supabase reset password feature to your app:
104
+
105
+
1. On the **ForgotPassword Page**, add the **Send Reset Password Email** action and set the **Email Field** dropdown to the widget that accepts the user's email address. This action will send the reset password link to the provided email.
106
+
2. The reset link sent to the user will open the **UpdatePassword Page**. On that page, add the **Update Password** action and set the **Password Field** and **Confirm Password Field** to the respective input widgets.
107
+
3. Copy the route name of the **UpdatePassword Page** and paste it into the **Supabase Dashboard > Authentication > Email Templates > Reset Password > Source**. Just after **`"{{ .ConfirmationURL}}[here]"`**. This ensures that when users click the reset link, they are directed to the **UpdatePassword** page to set their new password.
108
+
4.[Deploy your app to the web](../../../testing-deployment-publishing/publishing/web-publishing.md).
109
+
5. Copy the URL of your deployed project and paste it into the **Supabase Dashboard > Authentication > URL Configuration > Site URL**.
110
+
111
+
:::tip
112
+
**For mobile**, you must set the **deep link URL** as the Site URL. To find this, navigate to **FlutterFlow > Settings & Integrations > App Details > Routing & Deep Linking**, open the **URL Scheme** tooltip, and copy the URL.
To transfer ownership to another user, navigate to **Settings & Integrations > Project Setup > Collaboration > Project-Level Access**, click on the current role and select **Owner**.
0 commit comments