Firebase Setup | To Do App | FlutterFlow for Beginners

in this video we're going to set up our database and authentication and to do this we're going to use a service called Firebase now Firebase is a service from Google that provides you a bunch of different services for your backend it's fast it's scalable and there's a huge free tier so that you can get up and running easily but before we set this up this is not the only backend you can use in flutter flow we also have native Integrations with super base SQL light or any backend service that has a rest API but we're using Firebase so to set this up let's go into here into our settings into our Firebase tab right here and you can either create the project right here but I'm going to go into this little wizard hat right here because this was the original window that popped up when we created our project and this will walk us through setting these things up so we've got set up Firebase selected and we go to next and here if you've already got a Firebase project you can just put it in here and connect it or you can have flutter flow create a project for you so you just click on this button that's great select a region and sign in with Google this has to be tied to a Google account because this will set up a Firebase project for you that you can access after a flutter flow sets it up and you will access that by signing in with one of your Google accounts so select whichever Google account you want and flutter flow will set this up this will take a few minutes but you can close this window and work on other things in your app in the meantime but let's talk about why we're doing this at all Firebase is the umbrella service and we're really using three services inside of Firebase first fire store which is just a database and that's what we'll use to store our data so we're going to have to-dos that we need to keep track of and that's where we'll store it next we're going to use authentication so users can have user accounts they sign in using their email and those tasks will be saved to their account and finally storage one of the things we'll be storing is user photos for their profile page and Firebase will provide storage for us okay great it's done so our Firebase project is set up and we need to enable these two other services in Firebase so when we click on this it'll bring us to the Firebase project that flutter flow just set up so let's go over there so here's the project and I'm in the authentication section now to navigate through Firebase you can just open up this build tab right here and you can see all of services we're going to use our authentication is right here there is our database that we're going to use and our storage so let's start with authentication we just need to get started here's all the different methods for signin that you have available in Firebase we're just going to use email and password for now and enable that and save that's it for authentication now let's go over to storage and do the same thing get started you have two options here to start in production mode or test mode we're going to start in test mode because this will open up the rules for who can access storage for 30 days now before you launch your app you're going to want to come back in here and set the proper storage permissions but this is fine for now accept the location of your cloud storage that's fine and it's creating our bucket awesome this is all set up we can jump back into flutter flow now that those are enabled let's come down here and autogenerate some configuration files these are files that flutter flow will use to communicate with Firebase next we want to enable authentication this is enabling authentication in flutter flow and we want to create a user collection and what is this well in fir store remember that's the database in Firebase it is structured by collections collections of documents that's how the data is organized and a document isn't a Word document it's like a record in a sequel database or a row in a Google sheet and one of the collections we're going to have is our us users collection because we need to store the data about our users so every time a user signs up a user document will be created and added to our user collection and it'll store important information like their name and photo finally we need to set the initial pages and because we have authentication selected we have this additional logged in page if we turn this off we wouldn't have this because there is no logging in because there's no users so let's click these on and set the entry page so we can just create a blank new page that we'll fill in later here and we'll just call this login create page and then we need a logged in page this is the page you want the user to go to if they are logged in now you have control over the navigation in your app and we'll set that up but this will be helpful when we're testing our app because we don't want to have to keep logging in every time we make a change so let's make another page and we're we're going to call this tasks because that's the page we want our logged in users to go to the one that lists all of the tasks okay great this is ready to go so let's start building so you can see this is set up here and this is the project ID that flutter flow created for us and down here we've got the permissions for our Firebase storage and to make sure we can store our photos let's deploy these rules beautiful we also set up our authentication which is down here and you can see those two pages that we created are set right here so if you want to change those you can change them here next let's go over to that database the fire store so here it is and you can see this is the list of our collections right here because we clicked on that create users collection we have a users collection created right here the last thing we're going to do is we're going to deploy our fir store rules and I'll tell you what those are in a second so to get there go into this option right here and scroll down and you can see these fir store rules now these are similar to the storage rules these are just permissions for who can access Which documents in your database so here it'll say the collection name we only have one collection and which permissions they have so who has permissions to create a document read a document write a document that means change or update one and delete and when you set these they'll be written down here and these will be deployed to firestore now we're just going to leave all the defaults right now we just want to be able to access our collections when we're testing our app so let's just deploy them the green is what will show you what we're adding to our rules and so we can deploy now beautiful and that's how to set up your Firebase fir store database authentication and storage in the next video we'll look at understanding collections these field and data types and how to set them up and we'll see in that video

Channel: FlutterFlow

Views: 16,638

Keywords: Flutter, FlutterFlow, No Code, No Code Tools, How To use FlutterFlow, Google Flutter, Dart, No Code App, FlutterFlow App Builder, No Code App Builder, theme widgets

Id: uri_Mwp_eAY

Length: 6min 54sec (414 seconds)

Published: Tue Mar 12 2024