Flutter Login with OTP Made Easy | Step-by-Step Guide : Flutter Flow Tutorial

today I am going to show you how to create a login screen and get OTP verified in flutter flow so first of all we go to flutterflow.if if you are new you can sign up and log into your account so here are some of my projects let's create a new one login demo okay I agree I am creating a blank project okay so here we are now we will go we are going to create a new page login and in this we're going to search like I am going to use login with phone number so this is the template I am going to use login page create the page and we will require one more page that is for OTP verification this one so this one is OTP verify create the page okay and OTP would be of six now we have to uh give the authentication enable Authentication Firebase and entry Pages the login page logged in Pages the home page now it's saying that Firebase is not set up so let's go to firebase.com I miss.google.com here you have to login with your Gmail account if you are already logged in just go to the console create a new project so our is login demo I am creating that project in Analytics you can say login them [Music] select your country in this Analytics so our project is ready now just click on continue in this project project settings you will get a project ID copy this project ID to here but it will not work because we have to give a flutter flow the permissions to access our Firebase so we just go look down there and yeah this is the one collector flow dot ir in this you go in users and permissions add member email address and role to be the editor and then add member now go to our flutter flow and now we will click connect and it will here the Firebase setup is complete now Authentication for this we are going to enable the authentication and get started in the Firebase we need to enable the phone number login yes save it now we are going back to the login page here it will show the error phone number or property not sites so and this we just select the immediate state our level options and the other one is okay so we select the RDP verify page that when we click on the confirm PIN code and action on completed we are searching for authentication thing and verify the SMS code now in this we select the widget State and available option as pin code so here you will see that green okay now we are going to run the project it will open a new tab with the project running foreign [Music] okay so here we are Authentication sign in method here we have the option to add testing numbers nine one foreign logged in place since we are logged in see SIM card

Channel: Code with Abhi

Views: 2,383

Keywords:

Id: 3l6_OBdx9TI

Length: 8min 7sec (487 seconds)

Published: Wed Jul 26 2023