Skip to content

Commit 5d33eeb

Browse files
leighajarettleighajarett
authored
Merge pull request #207 from FlutterFlow/pinkesh/supabase-reset-password
Added Supabase Reset Password
2 parents d9e4264 + 69c7737 commit 5d33eeb

File tree

5 files changed

+106
-11
lines changed

5 files changed

+106
-11
lines changed

‎docs/ff-integrations/authentication/firebase-auth/auth-actions.md

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,37 @@ Follow the steps below to add this action:
2222

2323
![logout](../imgs/logout-action.png)
2424

25-
## Reset Password [Action]
25+
## Reset Password
2626

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.
36+
37+
![firebase-update-password.avif](../imgs/firebase-update-password.avif)
38+
39+
:::info
40+
41+
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.
2848

2949
<div style={{
3050
position: 'relative',
3151
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
3252
height: 0,
3353
width: '100%'}}>
3454
<iframe
35-
src="https://www.loom.com/embed/ecbcbe948925431da777b6393f8b5b10?sid=07e6bcbe-610a-4b7c-8572-271527cd956c"
55+
src="https://demo.arcade.software/5hyA37XqJy6mrl7Onc8e?embed&show_copy_link=true"
3656
title=""
3757
style={{
3858
position: 'absolute',
@@ -53,15 +73,11 @@ Resetting password allows users to change their password by sending them a passw
5373
<p></p>
5474

5575

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.
5977

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.
6379

64-
![password reset action](../imgs/password-reset-action.png)
80+
![firebase-send-reset-link.avif](../imgs/firebase-send-reset-link.avif)
6581

6682
## Update Email [Action]
6783

‎docs/ff-integrations/authentication/imgs/firebase-send-reset-link.avif

39.3 KB
Binary file not shown.

‎docs/ff-integrations/authentication/imgs/firebase-update-password.avif

62.7 KB
Binary file not shown.

‎docs/ff-integrations/authentication/supabase-auth/auth-actions.md

Lines changed: 80 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
slug: /integrations/authentication/supabase/auth-actions
3-
title: Auth Actions
3+
title: Common Auth Actions
44
description: Learn how to add Supabase Authentication actions in your FlutterFlow app.
55
tags: [Auth Actions, Authentication, Supabase]
66
sidebar_position: 1
@@ -62,6 +62,85 @@ Follow the steps below to add this action:
6262

6363
![img_6.png](img_6.png)
6464

65+
## Reset Password [Action]
66+
67+
This action allows users to reset their password by sending a reset link to their registered email address.
68+
69+
<div style={{
70+
position: 'relative',
71+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
72+
height: 0,
73+
width: '100%'}}>
74+
<iframe
75+
src="https://demo.arcade.software/PkAwpUU2WsXbG1DpzNCX?embed&show_copy_link=true"
76+
title=""
77+
style={{
78+
position: 'absolute',
79+
top: 0,
80+
left: 0,
81+
width: '100%',
82+
height: '100%',
83+
colorScheme: 'light'
84+
}}
85+
frameborder="0"
86+
loading="lazy"
87+
webkitAllowFullScreen
88+
mozAllowFullScreen
89+
allowFullScreen
90+
allow="clipboard-write">
91+
</iframe>
92+
</div>
93+
<p></p>
94+
95+
:::info[Prerequisites]
96+
97+
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.
113+
114+
![mobile-deeplink.avif](imgs/mobile-deeplink.avif)
115+
:::
116+
117+
<div style={{
118+
position: 'relative',
119+
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
120+
height: 0,
121+
width: '100%'}}>
122+
<iframe
123+
src="https://demo.arcade.software/GqayWApqWV2xInXc1SUO?embed&show_copy_link=true"
124+
title=""
125+
style={{
126+
position: 'absolute',
127+
top: 0,
128+
left: 0,
129+
width: '100%',
130+
height: '100%',
131+
colorScheme: 'light'
132+
}}
133+
frameborder="0"
134+
loading="lazy"
135+
webkitAllowFullScreen
136+
mozAllowFullScreen
137+
allowFullScreen
138+
allow="clipboard-write">
139+
</iframe>
140+
</div>
141+
<p></p>
142+
143+
65144

66145
## Delete User
67146

‎docs/ff-integrations/authentication/supabase-auth/imgs/mobile-deeplink.avif

125 KB
Binary file not shown.

0 commit comments

Comments
 (0)