<\/figure>\n\n\n\nIt’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\nOnce 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\n1. 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\n4. 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