How to Set Up OTP Login in FlutterFlow and Supabase (NEW 2024 Method)

Welcome Friends to another flutter flow tutorial in this tutorial we'll be implementing a onetime pin login where the user will be able to request for a onetime pin which will be sent to their email and they will be able to sign in without the need for a password at all thank you to Rocky zero for this video idea of an OTP login using flat flow and super base I think it's a really cool function that has a lot of use cases in the real world seeing how we can implement this function now over here I have the base project which consists of a hom page a onetime pin login page as well as a register page and it also consist of the onetime pin component over here I have put a link to clone this base project in the description below so just click on that link you can set up the project clone that project and you can follow along with this tutorial with together with me as well all right so let's get into it right now first thing that you'll note when you after you clone this project is that we have two errors over here and these two errors are due to super base not being set up yet in our project so let's just quickly link our flatl project to our super base project over here I have just recently set up a simple super base project once you set up your superbase project on the left hand side over here we'll go to Project settings and under configuration we'll click on API and we'll copy this project URL and we'll go to settings and Integrations and scroll down under super base we'll copy and paste the API URL and we'll also copy and paste this andon key into the key over here and lastly we'll get schema to link our flut flow project to our super base project so you should see that the errors are now gone now let's go back to our super base dashboard and we have to go to authentication and under configuration we'll go to Providers and you want to make some changes to this email provider over here so just click that and you want to toggle this confirm email and secure email change off and we'll just save this over here next we'll go to email templates and we'll go to this magic link option over here let's change the subject heading for our email to your OTP sign in scroll down and for this header instead of magic link we will change it to OTP sign in and instead of follow this link to login we'll just switch it to enter this OTP to log in and instead of this we'll replace this this with this bracket token over here which represents the six-digit numeric email OTP so copy and paste that token over here once we're done we can scroll down and click on Save and we also can have a preview of our email of how it looks so the email will have a heading of this and then you'll have text of this as well as this which will be replaced by the actual token itself so that's all we have to do for the super base portion now let's go back to our flut flow project and now let's work on the OTP login functionality all right so in order to implement the OTP functionality we would have to write some custom code so on the left hand side column over here we'll go to the custom code menu and we want to add some custom actions over here but those don't worry I've already taken the Liberty to write the custom code and figure out all the custom code so that you don't have to write any line of code you just have to copy and paste so I've already put a link to my GitHub Down Below in the description you can just click on the GitHub link and you should be sent to this repository over here and it would contain all the code for our custom actions back in our flut flow dashboard we want to add three custom actions the first first custom action the first custom action will be the check off custom action so in the GitHub repository you can just copy and paste the whole thing into your flut flow custom action so just replace everything and we can name this action check off and we'll save the action and just click on yes we can add the other two actions as well so the next action is the confirm OTP action once again just copy and paste the whole thing into the flutter flow action and we'll name this action confirm OTP then just save the action and do the exact same thing for the last action which is the get OTP action and the name we'll just replace it with get OTP then we'll click on save you can see that over here we have some warnings if you just click the warnings it says that custom code widgets have not been checked yet so to get rid of the warnings you just click on the warning and now flut flow will check check our functions and we should see that the warnings are gone now so now that we have implemented our custom code actions we can go back to our widget tree and we can Implement them right now so just click on the Gap OTP button and open the action flow editor and we want to add a few actions now firstly you can search for custom and you want to add our custom actions the get OTP action so that this action sends the OTP to the users email and under the email argument over here it will be widget State and the text field where the user enters their email and after we get the email we want to add another action and now we want to show an alert dialogue we want to show our custom dialogue and this dialogue will be the OT component now let's quickly move over to our OTP component over here let's work on the cancel button first so whenever the user presses this cancel button you want to add the action we want to add the action to close the dialogue so just click on close dialogue or Draw Etc so whenever the user presses this cancel button it just close this enter PIN below and now for the verify code button you'll act open the action flow editor once again and we'll add an action and for this we'll add our custom action to confirm our OTP for the token will give it the value of the PIN code that the user enters under widget State and for the email we will have to pass this through a component parameter so we have to create a new component parameter and the the name will be email as well so we'll just click on confirm and this confirm OTP action also gives us a booing value it returns a booing value of either true or false which represents whether we have successfully signed in or not so we'll just give it an action output variable name of is successful so now we want to add a condition and this condition will be a single condition and you want to check if our action output of is successful is equal to true so if the user has entered the correct pin then we want to close the dialogue but if if the user has not entered the right pin then you want to give them an alert message an alert dialogue which will be a confirmational dialogue for the title let's just give it incorrect OTP and for the message let's type you have entered an incorrect OTP please try [Music] again for the dismiss text we just leave it as okay and one last thing that we want to add is we want to add another action which is to clear the PIN code so that the user will be able to enter the PIN code again and we'll select our pin code which is over here and that's it for our verify code button so now we'll go back to our OTP login page and we'll go back to our get OTV button and for under the second action we have to pass a parameter into our OTP component since we just created one a component parameter and this email parameter will give it the value of the widget State and it'll be the email text view we also have to add one more action which is our custom action our last custom action is the check off action and this check off action checks for whether the user is signning or not if if the user is successfully signed in it'll return a Boolean of true if not it'll return false so for this action output variable name that give it is signed in and now we will add a condition for the condition it will be a single condition and we will check if our action output is signed in boin is equal to true so if the user has Su so if the user has successfully signed in then we want to navigate to our homepage if not we won't navigate anywhere and we'll just allow the user to remain over here and for this navigate homepage we don't want to allow back navigation so we just click that toggle to be false all right and that's all we have to do and our OTP functionality has been set up is that easy with flat flow and Tu base so let's try testing it out right now all right so tesma has just loaded up first let's just create an account first and for this email you have to use an existing email that you have access to so it has to be a real email so that you will be able to get your one time pin email message for the password it can be any password it doesn't matter and once we have successfully signed in with our email account we just sign out first and now under the login page we'll enter that same email that we have and when we press get OTP it should take a while to load and once it's done loading you should have this popup to enter your PIN over here now what we want to do is you want to go to the email address that you just entered and you should receive an email by superbase containing the information of your OTP in order to sign into your app so we'll just copy and paste this OTP into our app or you can manually enter it as well and now when you press verify code you should see that you are successfully signed in to the homepage now so that's it for today's video I hope that you found it useful and are now able to implement an OTP login functionality seamlessly into your flut flow apps using a super based database thank you for watching and I hope to see you in the next video stay tuned for [Music] that I

Channel: just xolotl

Views: 840

Keywords: otp login flutterflow supabase, flutterflow, flutterflow tutorial, supabase tutorial, supabase, supabase auth, supabase flutterflow, flutterflow tutorial for beginners, mobile app development, one time pin login, otp sign in flutterflow supabase, flutterflow supabase otp, no code development, low code no code, no code app development, low code, nocode, authentication, just_xolotl, How to Set Up OTP Login in FlutterFlow and Supabase (NEW 2024 Method)

Id: iaNwdWPKR-E

Length: 13min 32sec (812 seconds)

Published: Tue Mar 26 2024