diff --git a/docs/ff-integrations/authentication/firebase-auth/auth-actions.md b/docs/ff-integrations/authentication/firebase-auth/auth-actions.md index 7f56b62e..1dc7bc27 100644 --- a/docs/ff-integrations/authentication/firebase-auth/auth-actions.md +++ b/docs/ff-integrations/authentication/firebase-auth/auth-actions.md @@ -22,9 +22,29 @@ 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.
+
+

+ +:::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) +::: + +
+ +
+

+ + ## Delete User diff --git a/docs/ff-integrations/authentication/supabase-auth/imgs/mobile-deeplink.avif b/docs/ff-integrations/authentication/supabase-auth/imgs/mobile-deeplink.avif new file mode 100644 index 00000000..fa82b19f Binary files /dev/null and b/docs/ff-integrations/authentication/supabase-auth/imgs/mobile-deeplink.avif differ