How to set up forgot password custom actions with Flutterflow and Supabase

You will need to learn how to set up forgot password custom actions with Flutterflow and Supabase to allow your users to recover their password.
This beginner level tutorial shows you the basic functions required for this to work and then offers a few extra tips to improve on the process.
You can download the code used in this tutorial from here:
rapidmvp.co/ho...
#lowcode #nocode #flutterflow

[@axell9075]

Thanks for you help, worked for me !

[@alexjunio_prof]

Thank you! Worked for me.

[@MEdel2204]

Thank you so much!!

[@gifproductions2]

Thank you! I was wondering about a little bit of extra security. Do you have idea how to implement 2 password boxes that check if they're the same before changing the password?

[@ChristophGeiser]

You just add a conditional action before you start the password change process. There you check if the content of both texte widgets are equal. Then add all the actions for changing the password to the "true" part and add an alert with an error message to the false part.

[@rogeriosca]

Thank you!!!

[@aplicativoagricola]

I liked the video, it's a shame that I couldn't understand it properly so far it didn't work, I could have re-recorded it and shown it step by step. Maybe it would be interesting

[@rapidmvp]

I will be doing a step by step setting up an app including the auth in a couple of weeks. I’ll film as I build so may be easier to follow.

[@yorgohoebeke]

Thank you!

[@daleoshea4204]

Where do I find my site URL for the Supabase email If i haven't published my app yet?

[@JuanPerez-vv5lk]

Excellent video. but why didn't you do a demonstration to see how it works?

[@wesseldieben7490]

Thanks for the video, this only works for web application right, how could this work with an mobile application?

[@jaguarconsultoriadigital8147]

Grateful !!!

[@anderock02]

this work in a mobile app?

[@geopopos]

for some reason the redirectTo url is going to localhost:3000. did you run into this issue at any point? i did update my supabase url configurations

[@rapidmvp]

Did you also add the site url, it’s in the section above on that page. I think localhost:3000 is the default. It needs that and then the individual page url for redirection.

[@geopopos]

@@rapidmvp if you're talking about in the supabase URL config yeah I changed the site_url and updated the allowed URL. if there is an area to do this in flutterflow no I did not 👀

[@rapidmvp]

@@geopopos there shouldn’t be anything to do in Flutterflow on the url side. As long as you publish the app and there is a page that Supabase points to, it should be good.

[@monlak01]

I am getting this error from FF: "The function 'UserAttributes' isn't defined. Try importing the library that defines 'UserAttributes', correcting the name to the name of an existing function, or defining a function named 'UserAttributes'." The package is being called at the beginning. I have no idea where that function should be.

[@rapidmvp]

I’ll take a look and get back to you

[@monlak01]

@@rapidmvp It works though. I checked the "Exclude from compilation", the error becomes a warning. I deployed and it worked well... :)

[@emeriktremblay3881]

I have the same error

[@eemersonalmeida]

hello, can you help with this error: The setter 'customError' isn't defined for the type 'FFAppState'. Try importing the library that defines 'customError', correcting the name to the name of an existing setter, or defining a setter or field named 'customError'.dartundefined_setter. tks

[@rapidmvp]

You need to create an app state called customError

[@eemersonalmeida]

@@rapidmvp tks man! it works.

[@anaphylaxis6599]

Is it the same with the update email?

[@rapidmvp]

You can just use the Auth update email action within FF for this

[@anaphylaxis6599]

@@rapidmvpi’m not sure how to set-up the update email part of it after trying to do it in the first part, also is there a way to possibly redirect the user to the app instead of the web when they clicked the forgot password link in the confirmation email as i’m using it for an app?

[@rapidmvp]

@@anaphylaxis6599 I can do a quick video on update email next week. I think with Supabase it has to go via url for the password update. Doing it with one time password via sms may work though.

[@Wasi_sirshaar]

Can we create a custom action for signup also? need guidelines.

[@rapidmvp]

Thinking about this already as I want to add a Captcha, which seems only natively possible with Firebase.

[@louisgautier7622]

@@rapidmvp Hello. Do you think about doing the same tutorial for email verification when user sign up ? It would be awesome and I think lot of people search for this. Thanks !

[@rapidmvp]

@@louisgautier7622 it’s on the list. I may do this next week.

[@louisgautier7622]

@@rapidmvp Thank you very much. May I ask a question about this password tutorial. I setted up everything. I received the email, click on the link and go to the new password page. But when I want to update it, nothing happen when I click on the button. One thing is I didn’t understand how the function know which user needs to be updated, because no one is really authenticated when updating his password. Thank you very much for your help !

[@rapidmvp]

@@louisgautier7622 The url of the magic link in the password reset email contains the access token that logs the user in, therefore allowing then to reset password

[@anaphylaxis6599]

hello there seems to be an error with this now? can you check again please? thank you so much

[@rapidmvp]

I’ll have a look into it.

[@monlak01]

@@rapidmvp seems like it's not working because FF is not identifying the 'UserAttributes' function that is used.

[@rapidmvp]

@@monlak01 Before the “Future changePassword” line, you need: Import ‘package:supabase/supabase.dart’;

[@monlak01]

@@rapidmvp wow... I thought it was already being called (and when I added it, FF said it was redundant...but seems like it is not! :) You are right, it worked.