{"id":631,"date":"2024-02-10T21:44:10","date_gmt":"2024-02-10T21:44:10","guid":{"rendered":"https:\/\/zerocodeskills.com\/?p=631"},"modified":"2024-02-10T21:44:16","modified_gmt":"2024-02-10T21:44:16","slug":"reset-password-in-flutterflow-with-supabase","status":"publish","type":"post","link":"https:\/\/zerocodeskills.com\/reset-password-in-flutterflow-with-supabase\/","title":{"rendered":"Step by Step Guide to Reset Password in FlutterFlow with Supabase"},"content":{"rendered":"\n

Note <\/strong>: This article operates under the assumption that you possess a foundational understanding of FlutterFlow and Supabase<\/a>. This includes familiarity with setting up accounts on both platforms, establishing the necessary connections between Supabase and FlutterFlow<\/a>, and configuring your FlutterFlow project with all requisite pages.<\/p>\n\n\n\n

Hello and welcome to zerocodeskills. Today, our focus is on enabling users to reset their account password on supabase using the supabase backend in Flutterflow. <\/p>\n\n\n\n

As of the time of writing this article, FlutterFlow is still in the process of enhancing its support for supabase integration. One notable feature that is currently absent is the Reset Account Password functionality.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

It’s important to clarify that the absence of this feature is not a fault of Flutterflow per se, but rather a characteristic of how supabase operates. Presently, when you trigger the Reset Account Password action in Flutterflow, it merely sends an email to the user. <\/p>\n\n\n\n

Upon clicking the link provided in the email, if the link hasn’t been configured on your supabase dashboard, users will encounter an empty screen. <\/p>\n\n\n\n

This behaviour can be tested accordingly. However, once you configure the redirect link on your supabase dashboard by heading to the Authentication tab of your configured supabase project then URl configuration > then add the url of your flutterflow project. <\/p>\n\n\n\n

This marks the initial phase of configuring the reset password feature. From this point forward, when users click the “Forgot Password” button on your app, the email they receive will contain a link that redirects them to the specified URL. This URL, once configured, should seamlessly redirect users back to your Flutterflow app.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Once users are redirected back to your app you then need custom code to trigger an action to update the supabase account password update. Currently, this is the sole method to ensure the functionality operates smoothly.<\/p>\n\n\n\n

Now, before we go into the initial steps, here are a few things to note:<\/p>\n\n\n\n

The redirect url you will set can only work for websites and if you are building a flutterflow web app then there is no problem when you are testing you can use the default \u201cflutterflow.app\u201d link provided by flutterflow when you publish your web app on flutterflow until you publish using your custom domain, but if your app is a mobile application, you have to set up a webpage for this to work. <\/p>\n\n\n\n

The webpage you setup can be used only for the password reset and you can build it in flutterflow and he major reason for this is also the way supabase operates.<\/p>\n\n\n\n

when users click that they have forgotten their password they are typically not signed into the app and to secure this process supabase adds an authentication process embedded in the email link that you added in your supabase dashboard and is sent to their email and what it does is automatically authenticates the user once they click the link because they have proved that they have access to the email that controls the account and to the best of my knowledge and research this only works on web.\u00a0<\/p>\n\n\n\n

How to Reset Password in FlutterFlow with Supabase<\/h2>\n\n\n\n

Let’s delve into the main steps. By now, you should have supabase authentication set up, and your website or custom domain link should be posted in your supabase dashboard. Here’s a recap of the steps:<\/p>\n\n\n\n

Setup 1: redirect link on your dashboard\u00a0<\/strong><\/h3>\n\n\n\n

1. Navigate to your supabase dashboard and access the authentication tab.<\/p>\n\n\n\n

2. Paste your website URL in the designated “Site URL” field. This URL serves as the general link for your site.<\/p>\n\n\n\n

3. Additionally, you can specify a redirect URL in the section provided just below the Site URL field. This redirect URL allows for more detailed links that emails from supabase can redirect to.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

4. In our own web app, for instance, we have our main link along with a “forgot password” extension. The redirect URL plays a crucial role as it enables the inclusion of query parameters. <\/p>\n\n\n\n

(Query parameters are a means to add extra information to your link, providing your website with additional context about your application) <\/p>\n\n\n\n

Understanding the distinction between the Site URL and redirect URL is pivotal. While the Site URL serves as the primary link for your site, the redirect URL allows for more specific redirections within your website, such as those associated with password reset functionalities.<\/p>\n\n\n\n

Step 2: Set up your supabase password reset email template<\/strong><\/h3>\n\n\n\n

Once you’ve configured your redirect URL in supabase , the next step is to navigate to the email template section within the authentication tab of your supabase dashboard. Specifically, access the “Password Reset Email” template.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Here, you’ll find the confirmation URL tagged like this “{{ .ConfirmationURL }}”, which is set by default to connect to your Site URL and all you need to do is add the name of the target page after the confirmation url “{{ .ConfirmationURL }}changePassword”<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

After adding the link, remember to save your changes.<\/p>\n\n\n\n

With the email template configured, let’s return to Flutterflow to continue the setup process.\u00a0<\/p>\n\n\n\n

Step <\/strong>3: Configure your flutterflow application<\/strong><\/h3>\n\n\n\n

In Flutter Flow, you should have already set up all the necessary pages, including the forgot password page, login page, and basic authentication flow.<\/p>\n\n\n\n

\"Reset<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

Once supabase authentication is integrated into your FlutterFlow <\/a>project, you gain access to various Flutter Flow actions that facilitate authentication tasks such as signing in a user and resetting passwords.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Next, navigate to your forgot password page in Flutterflow. Attach a supabase action to the button responsible for sending the reset link. This action will trigger the email to be sent to the user, initiating the password reset process.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Step 4: Set up the custom code on flutterflow<\/strong><\/h3>\n\n\n\n

Finally, the last step involves adding custom code to facilitate the password change process. This step allows you to handle the password reset functionality within your application, ensuring a seamless user experience.<\/p>\n\n\n\n

The code snippet below demonstrates the essential imports and functionalities required for this process:<\/p>\n\n\n\n