Added Supabase Reset Password

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

@@ -22,17 +22,37 @@ Follow the steps below to add this action:
 
 ![logout](../imgs/logout-action.png)
 
-## Reset Password [Action]
+## Reset Password 
 
-Resetting password allows users to change their password by sending them a password reset link to their email address.
+With Firebase Authentication, there are two ways you can allow users to reset their password in your FlutterFlow app:
+
+### In-App Password Change
+
+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.
+
+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.
+
+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.
+
+![firebase-update-password.avif](../imgs/firebase-update-password.avif)
+
+:::info
+
+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.
+
+:::
+
+### Reset Password Link
+
+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.
 
 <div style={{
     position: 'relative',
     paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
     height: 0,
     width: '100%'}}>
     <iframe 
-        src="https://www.loom.com/embed/ecbcbe948925431da777b6393f8b5b10?sid=07e6bcbe-610a-4b7c-8572-271527cd956c"
+        src="https://demo.arcade.software/5hyA37XqJy6mrl7Onc8e?embed&show_copy_link=true"
         title=""
         style={{
             position: 'absolute',
@@ -53,15 +73,11 @@ Resetting password allows users to change their password by sending them a passw
 <p></p>
 
 
-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:
-
-1. Select the widget (e.g., Button) on which you want to add the action.
+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.
 
-2. Select **Actions** from the properties panel (the right menu) and select **Add Action**.
-3. Search and select the **Reset Password** (under *Backend/Database > Firebase Authentication*) action.
-4. Set the **Email** **Field** dropdown to the widget name that accepts email (e.g., *TextFieldEmail*).
+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.
 
-![password reset action](../imgs/password-reset-action.png)
+![firebase-send-reset-link.avif](../imgs/firebase-send-reset-link.avif)
 
 ## Update Email [Action]
 

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

@@ -1,6 +1,6 @@
 ---
 slug: /integrations/authentication/supabase/auth-actions
-title: Auth Actions
+title: Common Auth Actions
 description: Learn how to add Supabase Authentication actions in your FlutterFlow app.
 tags: [Auth Actions, Authentication, Supabase]
 sidebar_position: 1
@@ -62,6 +62,85 @@ Follow the steps below to add this action:
 
 ![img_6.png](img_6.png)
 
+## Reset Password [Action]
+
+This action allows users to reset their password by sending a reset link to their registered email address.
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/PkAwpUU2WsXbG1DpzNCX?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
+:::info[Prerequisites]
+
+To build the reset password functionality, you need to create the following two pages in your app:
+
+1. **ForgotPassword Page**: This page allows users to enter their email address and request a password reset link.
+2. **UpdatePassword Page**: This page allows users to set a new password after clicking on the reset link.
+:::
+
+Here’s how you can add the Supabase reset password feature to your app:
+
+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.
+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.
+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.
+4. [Deploy your app to the web](../../../testing-deployment-publishing/publishing/web-publishing.md).
+5. Copy the URL of your deployed project and paste it into the **Supabase Dashboard > Authentication > URL Configuration > Site URL**.
+
+:::tip
+**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.
+
+![mobile-deeplink.avif](imgs/mobile-deeplink.avif)
+:::
+
+<div style={{
+    position: 'relative',
+    paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
+    height: 0,
+    width: '100%'}}>
+    <iframe 
+        src="https://demo.arcade.software/GqayWApqWV2xInXc1SUO?embed&show_copy_link=true"
+        title=""
+        style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width: '100%',
+            height: '100%',
+            colorScheme: 'light'
+        }}
+        frameborder="0"
+        loading="lazy"
+        webkitAllowFullScreen
+        mozAllowFullScreen
+        allowFullScreen
+        allow="clipboard-write">
+    </iframe>
+</div>
+<p></p>
+
+
 
 ## Delete User