Implement FlutterFlow's POWERFUL Authentication In Your Apps! (FlutterFlow Tutorial 2022)

so let's say you have an app that looks something like this you've been building it it's nice you run it it works everything is fine one of the problems with these apps is that it's not personalized and typically if you're going to be building apps they will be personalized meaning that they're going to show some kind of information that's tailored customized to a particular user and so with all the examples that we've done thus far a lot of these apps or pretty much all of these apps they're kind of for everybody they're they're open for any user but that's not how it's going to work in real life and so in this video i'm going to show how you can use the powerful features of flutter flow to personalize your apps to create a customizable personalizable experience and this is going to be a requirement if you are looking to build any kind of an app if you are looking to build and sell an app or pretty much if you're looking to build an app that people are going to use you will need to create some kind of personalization using authentication and authorization so that is what we're going to be talking about today now before we begin if you like no code if you're interested in building software without writing a single line of code you don't want to get technical you don't want to get a computer science degree then you've come to the right place make sure you smash the like button leave a comment below and subscribe to the channel so you do not miss any future videos having said that let's get started so if you look at this diagram this is the flutter flow authentication flow okay we have a user when they come to the app the app does not know who this user is they haven't logged in yet okay so what the app is gonna do flutter flow app is gonna redirect to something called the login authenticator and depending on which method you're going to use and flutter flow supports a ton of different ways to do authentication maybe it's going to be using google maybe it's going to be using apple maybe it's going to be facebook twitter maybe it's just gonna be email and password whatever whatever the method you choose whatever the screen they see they're gonna authenticate after that they're gonna get redirected back to the app and they're gonna see personalized content and so now that you understand the basic architecture let's go into flutter flow and let's create this app together we're gonna hit this blank project screen and we're gonna call this personalized app okay we're gonna do create new just gonna do next step here and here is important you gotta enable this authentication and i recommend enabling this create user collection okay it automatically adds a user collection to firestore for logged in users this is good because you can store various information that you can show to the user so let's turn that on as well next it's asking us for initial pages so we have the entry page which is the login page and we have the logged in page and so when the user initially goes to the to the app the app doesn't know who the user is so essentially you know we need to have them logged in one way or another and this is where you show them the login page or you have a button depending on how you want them to log in or not once they're logged in the flutter flow is automatically going to redirect to this logged in page so let's create a couple of these pages here you can just click on it and create a new one so let's call this uh home page and so let's call this log login page we're gonna create new and this logged in page let's call it logged in page okay we're gonna create new okay so now we have it we also need the firebase project id and so right now is a good time to go ahead and create a firebase project so i'm gonna go into firebase i'm gonna go to the console here and i'm gonna create a new project okay for this app we're gonna call it personalized app brj for project we're gonna hit continue we're gonna say create project all right your new project is ready we're gonna hit continue and now we are inside the dashboard for this new project what you wanna do is you wanna go into this build tab here and you wanna click on authentication okay now you're gonna say get started and now you have an array of options that you can authenticate the user against okay so it says here get started with firebase auth by adding your first sign in method so we have all of these providers and what this essentially means is that we do not need to code this authentication method ourself we can have them use the google account right everybody has a google account at least the majority of people have a google account you probably have a google account and so we can just check with google if they're logged in and then have google passing the account information to us we can do that but today i want to show you a very very simple method we're going to be using email and password so i'm going to select that i'm going to enable it and i'm going to hit save and now we have this authentication method set up okay next what i want to do is i want to click on this gear icon here i want to go to project settings and i want to copy this project id because we need to tell flutter flow uh which firebase uh project with which firebase app to kind of work again so we're gonna go back to flutterflow we're gonna paste this project id we're going to say connect we're going to get an error because it wants us to give it permissions it wants us to add firebase flutterflow.io as an editor to this project so we're going to go back in here users and permissions add member and we're going to say firebase at flutterflow.io and this is going to be an editor done add member we're going to go back and we're going to say connect now it should connect okay we're connected you wanna click on auto generate config files here you wanna do that you're gonna wait a couple of minutes all right it says here firebase setup is complete we're gonna do start building the next thing you guys want to do is you want to go into settings and integrations and you want to go to authentication okay you want to make sure all the settings are here it's enabled we have the initial pages we have everything set up you can also go into firebase and make sure everything here is set up so it looks like our authentication is correctly set up okay now there's another thing you guys want to do is if you go into firestore here you're going to have this collection a user's collection okay and you can go into settings and what this does is that it select which collection users will be added to when a user creates an account and so when they create an account it's also going to create a document inside this collection with various pieces of information this is awesome so and so what you guys want to do is you want to go back to your firebase console you want to go into build you want to go into firestore database and you want to create a database to store these users once they create accounts we're going to say create a database just going to do it in test mode hit enable and now we have a database created and so if we go back to our app we go to the fire store uh tab here go into settings firestore settings you want to deploy these um these rules here these firestore rules you want to hit deploy and now it's showing you the rules and we're gonna say deploy now okay now it's deployed and so now if you go back to firebase you will see you have no users collections just yet but when you create the user account it's gonna automatically create a record here and i'm going to show you that in a second and now what you want to do is you want to go back inside your app and you want to create the proper logic okay so we need something to create an a user account and we also need something to show the user once they're logged in something personalized okay so i'm going to show you how to do that alright so if we go back here and we click on this page selector we have the login page which is the page that the user sees when they're not yet logged in this is the initial page and we have the logged in page which is the page that the user sees once they have been successfully authenticated this is the second page so what we're going to do here is we're going to say login page we're going to do something like login and what we're going to do is we are going to create a sample form that will allow the user to register okay so if we go back here we are in the column uh we may want to uh start adding different fields so what i want to do is enter a text field here and i'm going to duplicate it okay so this is a column and that's why the stuff inside the column is arranged vertically if i wanted it horizontally i would create a row and so let's create a sample form let's create another button and this is going to be their email and this is going to be their password and that way we can register their their account it's a some kind of a sign up or registration page for instance so let's have some kind of a hint email and this is going to be password now for the password field you want to make sure you select this password field thing here this password field toggle here okay very very important and now we have a basic registration form okay so if you click on this button okay and you go to the actions here and you add an action and what you want to do is you want to scroll down and you want to pick firebase authentication we're going to say create an account okay next we're going to pick the auth provider we're going to say email and now it wants the email field and the password field the two required fields in order to create this account so the email actually let's go ahead and name these fields real quick so i'm just gonna do email email field email input actually let's do input email and this is gonna be input password okay so i'm gonna go back to the button i'm gonna rename the button something like i'm gonna say sign in or sign up one thing you wanna do is you wanna add a confirm password field as well so i'm gonna duplicate this real quick this is going to say confirm password okay and i'm gonna say input password to here and then if i click on this we have our input password too so we have a and i'm gonna click on the action tab here and i'm going to say we have email and i'm going to say input email input password and now we have a setting here do we want to create a user document and it says here whether to create the user document when the user is authenticated if a user document already exists it will not overwrite it and the user will be logged in so this is a good good option it's very very helpful okay and we have the collection here we have other fields as well but we really do not need that all we need to do is create this user account we have this button using a authentication group create account and these are all the fields that we're passing okay email our password password tool once the user fills all the information it's gonna go ahead and create that account and we don't really care how it does it but it's gonna do it it's gonna be really really nice so now let's try to run this app and create this account because this is gonna be our sign up page okay so i'm going to run the app all right so if you run the app we see this initial screen it acts as a sign up form so what we're going to do is we're going to create a sample account we're going to do sign up and as you can see once i sign up it redirected me to the second page now this page is empty but this is gonna be the page that's gonna show personalized information okay and now if we go back to firestore project we see that we have a collection called users and we have one document which is the account i just created here and so now we have an account created and now we can change the way the initial page works and change it to a login page now obviously when you're going to be building this app you're going to have multiple pages but in the interest of this tutorial in the interest of making it very simple what i'm going to do is i'm going to go back to the app and i'm going to change the way this app works so i'm going to delete this confirm password field and this is going to be a login um page here and what i'm going to do is i'm going to go to the button and instead of creating an account i'm going to do oauth i'm gonna pick what and i'm gonna say login and now we need two fields input email input password which i'm gonna leave the same and the next thing i wanna do is i wanna while we're here i'm gonna go to the second page and what i'm gonna do is i'm gonna do a couple of things here okay i'm gonna add a um a text here just to display something about the user so that you can see it's perfectly personalized and we have a column here and maybe we can what we want to do is maybe we want to create a row and we want to put this here inside then we want to do a text and this text we want it to be maybe bigger and we want this row to be centered and then i'm going to copy i'm going to duplicate it and instead of a text i'm going to delete the text i'm going to add a button and what this button is going to do is going to allow me to log out okay because we want to test the logic so this button is gonna say log out because at this stage the user is logged in so i'm gonna go in here and i'm gonna say logged in user or maybe this can say welcome back and then the username so here we're gonna show some personalized information about the user so that you understand uh that you know once the user sees this page they're logged in so we're going to say we're going to click on this field we're going to say set from variable we're going to pick authenticated user and now we have all of these things that we can use okay we can use display name we have email user id but if we go back to our project we do not have those fields okay so what i'm gonna do is we can do email okay so we can do email that's gonna work but if you wanna do display name you wanna do something extra what you want to do is you want to go back to firestore you want to go to your collections to users you want to do manage content and you want to pick this user here and you want to enter display name okay obviously that is something that you can do when you're creating the user account but we don't do that so we need to do it manually so i'm going to say james no code here i can also upload the photo url nom phone number etc said i'm going to say update document and if i go back to my um firebase firestore i see this display name updated in real time and so if i go back to the app here instead of an email i can do display name okay so i can click on this text click on set from variable click on edit here and i can pick display name and say confirm always do confirm because it doesn't do it automatically we can also do log out so provided that we log in correctly we're gonna say we're gonna see uh the display name that we have for that record and now for the log out we're gonna click on log out i'm gonna do action i'm gonna do add an action i'm just gonna type auth firebase authentication and we're gonna do log out okay so this is the logout action so what's nice about it why it's so powerful is that if you click here and you go to auth look at all the things that you can do okay we have the the email right the email method we have login create account phone sign and log out reset password verify a sms code send email verification link delete users so many cool things that you can do and back in the day when i was doing all kinds of uh development and stuff like that years ago i had to do it all myself so this is gonna save you tons and tons of time so we're gonna log out here okay so when we log out we're gonna see that initial page okay but when we log in we're gonna see this page with the display name okay so let's go back this is actually a login action which is kind of what we want not create account action and so we have all of this here and now let's run it and see if that works alright so once we run the app we are logged in remember we created an account previous time so the app remembers it and it's automatically displaying my display name right if i go back here is james snow call so what's cool about it if you want to modify it let's say i just do james display name i do update i go back it automatically refreshes and shows just to show you how real time it is so if i hit log out i go back to the login screen so let me try to log in again i hit login this should be login and i'm logged in okay i can go back and i'm back in the login screen now one thing you guys got to understand here is if i don't know the correct name or password and i have problems logging in so if i enter a random password and i click this button nothing is going to happen okay so you need to incorporate some kind of logic to the user so that they know that the information they entered is incorrect you need to display something okay so you see nothing happens if i enter the correct password it redirects me okay so there's a couple of ways that you can do it let me show you one quick way uh that you can do so if you come in here and we do we do a duplicate and what we're gonna do is we're gonna display some text actually we might want to display it above this so what i'm going to do is i'm going to duplicate it this and above this i'm going to say this is not input email this is going to be i'm going to add text and that's just going to display a message okay so i'm gonna delete this this thing and this thing is going to be our message like incorrect login or whatever you want to do it so this is gonna display the message so it's gonna say something like incorrect log something like this maybe we can make it even in red i don't know something like this okay we can also kind of pad it a little bit maybe 10 10 from the top 10 from the bottom now you do not want to display this all the time you only want to display it after they hit the button it doesn't matter if they enter the correct login or the incorrect login because if they press the button and they entered the correct login it's going to get redirected to the other page so it doesn't matter if it's displayed or not if they entered incorrect information then it's going to be it's going to be still on this page and they're going to see this message now a quick and easy way of doing it is you want to create a local state okay we're going to add local state and i'm just gonna call it tried logging in this is just a quick and easy way we're gonna do a boolean okay we're gonna create and the value is false okay so it's false because they haven't tried logging in we're gonna go back here and we're going to open we're going to click on this button we're going to open the action flow editor and you want to create a new action add an action and you want to go above it so if they click on the button we want that user state variable set so we're going to pick this action we're going to say local update local state we're going to pick that variable and we're going to set value and we're going to say true okay we're going to say true that way when they click this variable is going to be true and this thing is only going to show up once the variable is true so we're going to what we're going to do is we're going to go to conditional visibility and what we're going to say is local state tried logging in so we only wanted to to be displayed if this variable is true okay so let's run that all right so we launched the app we see it's not being displayed because that variable by default is false now if i enter something here something random i'm gonna hit login we have incorrect login and now let's say i enter the correct password we're redirected okay so that is how you implement that logic in a very quick way there are lots of other ways of implementing it maybe in some of the future videos i'll talk about it if you're interested let me know in the comments below but now we have been redirected to the customizable to the personalized page here and obviously you're gonna have a lot more information you're gonna have a lot more things maybe you're gonna pull in data maybe you're gonna have more collections and now we know the user now the state is known it's known flutter flutter flow knows that the user is logged in and so you can have a million other collections here tied to this user tied to this user id here and you can pull information about them and you can display it on these pages okay so that is what i wanted to talk about today i really really hope you found this valuable if you did i want you to smash that like button to let others know to let youtube know to let the world know that you found this video valuable and you want the youtube gods to show this video to more people that would be highly appreciated also do not forget to leave a comment let me know if you have any questions or concerns let me know if you want me to cover something on one of the future videos and also do not forget to subscribe to the channel on this channel you will learn how to build awesome amazing software without needing to be technical so thank you so much for watching and i will see you in the future video

Channel: James NoCode

Views: 26,011

Keywords: flutterflow tutorial 2022, flutterflow tutorial, flutterflow, flutterflow authentication tutorial, flutterflow for beginners 2022, flutterflow email authentication, flutterflow google authentication, flutterflow apple authentication

Id: V0dZOFJVVYs

Length: 22min 33sec (1353 seconds)

Published: Wed Jul 13 2022