Firebase Authentication Setup In Flutterflow

in this video i want to show you the quickest and easiest way to set up authentication for your flutter flow app now in the next video we'll go into all the intricacies of creating a login and sign up page email and sms verification and social sign-ins like if you want to sign in with your google or facebook account but in this one we want to just get up user authentication quickly so let's create a new project and let's just call it bagels and let's just start with a new blank template all right so here's our project and in order to set up user authentication we need to do that through firebase so we're going to go to that now we have a whole video about how to set up firebase that we've linked below and so right now i'm going to set it up but i'm going to go quickly so if you need more details go check out that video if not let's do this in like 60 seconds all right so go over to firebase firebase.google.com go to our console add a new project we're going to call this bagels awesome continue we're not going to set up google analytics for this project continue project it's going to start it up awesome continue now we're going to go into project settings and users and permissions we're going to add a member the member is going to be firebase at flutterflow.io and the role is going to be editor done add member next would come down here to the bottom right advanced permission settings we got to add in two settings right here so we find this firebase email that we just added in edit principle we got to add in two more roles the first role is cloud functions admin right there and the second one is service account user if you just scroll down a bit there we go there we go and save and back to our firebase project we can close out of the google cloud admin now we're gonna we're gonna start up our firestore database create database run in test mode just for now central is fine we're going to enable that database is ready that's awesome now we just need to get our project id which is right over here copy that and we're going to paste it into our project connect and boom and then auto generate our config files okay so that's it we've got firebase setup and now we can set up user authentication so we want to enable authentication and we want to create a user collection that is we have a database collection of our users that's going to store the information like name and email address and password and stuff like that next you need to set up your initial pages so your login page and then if your user is logged in where are they going to go then so let's set up a login page and the nice thing is when we click here we can actually create the page so even if you haven't created anything yet we can do that so this is our login page and i'm going to use this template down here yeah this sign in one so we're going to call this in use my theme and then the logged in page if someone is logged in we're just going to do this welcome to flutterflow it's visually different so we can see that it is a logged in awesome so let's start building now because there are no users yet we should also create a sign up page so we can come over here create a new page let's grab that same theme down here sign up perfect sign box great now just to confirm let's come over here to our firestore and we can see our collection right here so this was auto generated for us and you can see all the schema here all the fields so email name a photo and of course you can delete these or you can add more fields if you want more information tied to your users we're not going to do that so that's good here you can also come into your settings here and under authentication you can see that we've got our authentication enabled and here are those initial pages we set of course you can set them to different pages if you like all right we're actually almost done so let's go back to our firebase console and come over here to authentication because big picture perspective right here we've set up our database of users we've connected flutter flow to firebase but we haven't enabled any specific kind of authentication so for this quick one we're just going to do email so come over here and we're going to just going to get started you've got this great interface right here which is pretty obvious what you're doing and so we're going to add a sign in method and we're just going to do email and password we're going to enable it and that's it we're now all set up with authentication so let's test this let's go back to our app right here let's go back into our ui builder and of course we see these issues right here we got project issues now let's check these out okay so this first one here is navigation action for container so when you're using templated pages a lot of times you'll come into these type of issues that there's like native navigation that's set up in the template and so you can just get rid of these things so if you just click on right here and just delete it awesome so we're down to three when using facebook login you must provide blah blah blah blah blah okay so if you notice on these templated ones that we have we can let's zoom out a little bit we've got these social sign-ins so what this is complaining about to us is say hey you've got these social sign-ins but you're kind of not doing anything and you can see that we have actions attached to them but we haven't set any of that up so let me let me give you one uh tip whenever you're dealing with these issues one thing that you can do if you're having trouble troubleshooting them is just going up to the top level of your hierarchy and just deleting the whole widget so i come in here and i delete it and you can see that one of my issues went away and so i can see that so if that's only if you're having trouble if you can if you can see the issue and you can go to it and you can figure it out awesome but if you kind of like at the end of your wits you're like i don't know what's going on just start by deleting huge chunks and you can see if it goes away okay so let's just come down over here to this row we can see all of these actions so let's just collapse this right here and collapse this and we can see that they're both in this kind of big one over here so let's just delete this whole section and yeah we got that away and we've got another nav here delete that and finally we've got one more of those social logins so let's just go over to this is actually a good example because this brings me to this auth page but if not actually what's going on here right there's nothing in i'm not facebook app name none of this idea is set up and what's it actually saying is in my ui builder i have references to these social logins and uh you're not doing anything with them so let's just delete them and boom it goes away okay cool so before we start let's change our initial page so that we come to the sign up one because we don't actually have anything yet so let's come over here an entry page it's not going to be login but it's going to be sign up for us okay cool so now let's run our app and test out our authentication all right email and password password again and boom we signed in let's go look at our database because we can see we come over here manage content so this is remember this is just showing us our schema the structure of our database but if we actually want to see the database itself we can come into here manage content and there we are our authenticated user now the last thing i just want to show you about these actions and we'll go in more depth in the next video but we're here on our sign up page and we can see this button that we've got this action attached and in here we've defined our action we're saying untapped we're going to set the action of authentication right here that we have set and we've got all of these auth actions right here and the auth provider is email remember we've got all those other social ones that we'll look in the next video and then these are pulling from our page right here because we can see here email address and so if we were to come in here and change this email address to just let's say email because i want to i want to show you how this is bound and see that changed right there that email field same thing with password that's this right here and of course like i'm doing right now you can hover it over it to see how this is specifically what this is bound to and we've got this password field guess because we got our password and confirm password we want to of course create our user document the collections is users now of course like we said before in the user database if you want to set additional fields let's say something like age you would add it here so that's a quick way how to set up user authentication in your app leave any questions below if there's anything specific you'd like to see a video on you can leave it in a comment below and we'll see in the next video

Channel: FlutterFlow

Views: 63,214

Keywords:

Id: O-qPEkKW1rM

Length: 9min 49sec (589 seconds)

Published: Mon Jun 20 2022