How to Handle Firebase Authentication in Flutter with Riverpod

hello and welcome back to my channel today i'm going to show you how to add firebase authentication into your florida apps using riverboard so let's get started the first thing we need to do is to go over to a command palette here so i'm going to go to view command palette and create a new project in our vs code and i'm going to call this firebase authentication and then vs code is going to help to create the project as you can see here and give it a few minutes yes and we have a project and first i'm going to remove all these files and go over to the library folder here create a new folder call it the ui and i'm going to create a new file call it the login screen dot dart okay now we are going to create stateless widgets and call it login screen and the next thing is to import material and return a scaffold here and we are good to go and then next is to make sure that you import your login screen here which we have here and then we have login screen okay which is good the next thing is to add firebase to this project and one we are going to be using firebase cli for that the next thing is to go to console.firebase.google.com and we want to create a firebase project so we're going to call it firebase um let's call it firebase test something like that we can't add that name since this goes so we confirm this and we continue and then we continue and it's going to um we don't need google analytics so let's get it off our new project is ready and we can continue now we have access to this but you see when you want to add firebase to your app we have these options to get started recently florida added this which makes it easy to add firebase to your apps so clicking on this will give you this instructions so the first thing you need to do is to install firebase cli and then you're going to run firebase login and we have floater sdk installed so we don't need this but yeah let's go ahead and install the 5bc li so i'm using mac so go ahead and use mac and to use mark there is a command here that you can use or you can use a binary or you can use npm so um go ahead and do that um let's go back here and after installing the cli you need to run this sort of commands so we are going to alternate between here and our project and then we install firebase to our app open our terminal so i'm going to go to terminal new terminal and we have it here and so we go back to installing the file pcli i'm just going to copy this code sample and put over here and you should install firebase terminal for us put in my password and that's wrong okay so i already installed firebase cli but this is how you're going to do it if you want to so you see my machine already has firebase tools the next thing is to log in and we are going to run firebase login and if you do five days again you should be able to log in okay so i'm logged in into another um accounts which is not what i want i have multiple accounts so um to do that i'm going to do firebase login and there's a command read off for you to re-authenticate i'm going to do this it's going to open up your browser so you can use another account and i'm going to use um my account that i want to use [Music] okay so it's going to want assets to your google account and you can do allow so i'm logged in successfully and you can see it's here which is great so let's go back here and then install firebase sdk which we already have create a floater project which we already have next thing is to run activate floater fire cli globally so um we have this and so we're just going to paste to our terminal i already have it activated so it's going to be fast it's going to download florida fire to your computer globally and the next thing is to [Music] configure flutter file because i am in the directory of the project itself i don't need to put this project but if you have your terminal and you're not in the directory then you just something like that but now i'm just going to do configure and it's going to configure florida fire for this project and then now it's going to tell me to select which um project so we have firebase test here okay and you use space to select which project you want to enable florida file for which i i'm just going to use space to unselect my coizon web and then hit enter and it's going to install that okay apparently we don't have this project um this android app in firebase but it's going to automatically create that in our console okay i mentioned the other time that you don't need to add this apparently this is to select which project and your firebase console to configure florida file for so you could just copy all this and you're good to go okay so we have um [Music] if you want um to to update your gradient file to the um so to the um firebase configuration we're just going to say yes and it's going to generate a file for us which is firebase options as you can see and we have a new file and let's go ahead and click on next this automatically registers firebase options the dot for you next thing is we are going to call await firebase initialize up and this and we are going to go here the main i'm going to put it here i'm going to import all this but there's a problem we don't have firebase installed in our project so we are going to go over to our prospect that's yammer file to add a dependency um we need to add a file basically package so i'm going to go view command palette and use prospect as assist enter firebase course here and we watch it install as you can see it's already added firebase 1.18 when i hit ctrl save ctrl s it's going to automatically fetch the package for me and you can see it's already installing and if i go back to domain. and i can import it here and we are good to go now we need to add this snippet widgets florida binding that ensure initialize before um firebase and that will make sure that this is initialized before our app is run okay so let's go ahead and then have a design for the login screen so we want a simple login and there we go we have a simple login screen and if i pick an emulator and then we are going to run the the app on emulator and let's see what we have i have a login screen that is going to take email and password which we're going to use for firebase off to add authentication to our apps we need a couple of dependencies and the first one is riverboard and i'd like to usually add hooks river pod into my project so aux river pod goes in there and the next one will be firebase off uh it will add the fibers of package into our apps so let's go back to prospect.jamo i have a dependency issue here for hookshop riverboard so i'm going to drop this version from 1.0.4 to 1.0.3 because i don't have the letters flatter so um if you have the latest floater you are going to be abc 0.0.4 we will create a folder called repository which we hold our off repository and inside the repository we have of repository dot dart and we are going to create a class called repository yes now we are going to create a constructor this dot earth so we have an underscores here and then we are going to have a final firebase earth and it will be off okay and this way we have we are doing some dependency injection next is to implement some method in firebase off if you go into firebase you see that there's a method for you and let's get a beat as you can see there's some method confirmed password resets and of changes id token changes save password reset if you look at it properly but the one we are concerned with is to sign in sign out and the first thing is to do a sign in with email and password and then we are going to take an email and we are going to take a password and then it's going to return a feature of user which is going to be nullible because if there's no user that means we are not able to sign in successfully and the next one is we are going to have a sign up which is going to be a feature void anyways okay so we have the earth repository um set up but we need to be able to initialize our firebase off and usually there is a way you can do it you can say five is off and do something like this which will give you five is that instance but this is executing and it's very hard to test so we are not going to do that instead we are going to use dependency ejection for what we want to do to create an instance of firebase off we are going to use riverpod to create global dependencies for that so um in library file live from folder create a new folder called providers in here i'm just going to say off provider dot okay we are going to import hooks riverbot here and then our opt repository here and we have firebase.instance you can see we are passing an instance of firebase that in through the constructor of the earth repository here so once you have an instance of five is here it goes straight to our up repository here we can improve of repository bits by doing some error handling so i'm going to have a class code of exceptions that is going to implement exception okay so instead of doing this we are going to put this all code into a track cache and like this but instead of cache exception like this we are going to do on firebase exception catch because because firebase trust is on exception and we are going to do something like this if um the code is user not found we are going to draw some errors like this so that means when the user is not found it's going to throw an auth exception using a font if it has a wrong password of course the wrong password and if it doesn't takes any of this it's going to just show a generic error there are other errors in firebase that you could explore just go into here and check the error messages lastly on auth repository we need to add these it's going to give us a stream of the state change of the user so when the user changes when it logs out and do some other stuff maybe the token changes we are going to listen to a stream of the change here now we are back in the off provider dot and we need to add a another global provider that will provide the odd changes that we added in the author procedure so here is how to do it we are going to have a stream provider that is going to take the user and then we are going to read our author repository provider here and then we do a dot at stake changer and this provider we are going to use it in a new file called earth's checker which is going to check if the user is authenticated or if the user is signed out that will you is what we are going to use to show which page to go through to the user um depending on the state of the user therefore we go ahead and create a new file called us checker dot dot in our ui and here we are going to implement and the page the user should go depending on their states and here is the code for the earth checker it's going to extend the consumer widget which we can get from hooks riverbot and then we import material because we need that and then our offstage provider here so what i've done is i've i have a final variable called or stitching that's going to watch our stage provider so we can do that when there is data do this when it is loading show the screen when there is an arrow go back to our login screen so we are going to import login screen and then there's a splash screen here that is going to show when the there's a loading happening or we don't have splash screen yet so we are going to create that and we're just going to create a stateless widget simple stuff and we're going to call it splash screen and it's going to take a scaffold and inside the body we're going to have a center and inside the center we're just going to have a circular progress indicator something simple like this now we don't have a home screen yet so we create a new file and we call it home screen dot dot and it's going to take stateless widgets and we're going to call it home screen and of course we're going to import material and then we have a scaffold and let's keep it simple for now and we go back to the us checker and we have import the home screen so now look at this code a bit again what this is saying is when there is data and the data comes as a with a user so if the user is now go back to the home screen or else it's not equal to no sorry go back go to the home screen else go to the login screen and also we are saying that when it is loading you should go to the splash screen if there is some sort of error we are still in the login screen okay so that is it about the off checker the last thing we are going to do with the us checker is we go back to our main page instead of login screen we put in the earth checker okay and we are good to go now the final thing to do is to implement the login screen so that when you hit this button sign in button is going to go all over to our repository and call this method to implement the login i'm i need um a folder called vm is supposed to be a viewmodel for login but inside here i'm going to have a new file called logincontroller.dart and the next one is a new file called loginstate this will handle all the states of the login but for now i still need a package called equitable you will see how i'm going to use that in a bit go to our perspective file and see we are having equitable 2.0.3 okay so here is what i need it for i want to create several states for my login state and i need equitable for that because it's going to check um a base class to facilitate the operator equals to equals acosta here what it does is that it checks uh it compares two classes if they are the same basically okay so we go back to our login controller this is where the magic happens for a login controller we create a class that is called logincontroller and it's going to extend state notifier we are using state notifier because we have login states and it's going to be of type log instance here that we have created next is to have a constructor login controller that is going to take this dust and this just ref is ref from riverport and if you look at ref is like an object used by providers to interact with other providers we create a method called login that is going to take an email and password and we are going to put this async modifier there and next thing is we are going to start with having a login state loading this is going to show that this is loading and then we have we are going to read from our repository provider designing with email and password here and then the login state success for some reasons if this doesn't work we are going to have a login state error here and here we are going to take a string of login state the next thing we want to do is to expose this login controller in a provider we are going to call make a final login controller provider that we take state notifier provider which we are going to supply the login provider controller and the login state and then you are going to return a login controller you see that i'm passing the ref into the constructor here and so it's going to take drive now last part is to have this login controller provider in our ui so we are going to interact with the login controller provider in that ui to do the logining okay to implement the login screen this is a stateful widget so we need to turn it to a widget that will have access to our ref so i'm going to use stateful hook consumer widgets and we have a couple of errors here so let's fix them that means i'm going to turn this into a consumer state and then here i'm going to add consumers here so consumer state and so in our code on pres we are going to have access to ref and we have all these methods and i'm going to use the read which will read our login provider login controller provider which is like this but this is a state notifier so what we need to do is dot notify and using that notify i can do that login here which we take email and password and we have the email controller and the password controller here which are text editing editors text editing controllers and i can do email control under test and then password controller dot delta t and we are not done yet when we run this app we got this error now provider scope and i know where the error is coming from so what we need to do is go back to i mean. and you want to wrap your my app in a provider scope provider scope is from liverpool so you need to wrap it in provider scope for it to work so we are going to run this again and see if it works now okay so we are here and good to go but then we need to sign in to our user so but we don't have any user currently so how do we know it doesn't work so let's say i enter this email and then i enter some sort of password and hit login there's nothing that happens but there's something that's happening under the hood we just didn't see that so let's go back to our login screen and trace these all the way down go to our repository provider and then we go back to our house repository and if i put a breakpoint here let's see if it actually goes here okay we have the big points here and then if you see this exception you will see that there is a code unknown and there's an internet uh exception happening is showing configuration.not found it's pretty straightforward and what you need to do is go back to our firebase project click on authentication and then click on get started clicking on get started there are assigning methods here and what we need to do is click on email and password and we need to enable that and then save okay we are done so let's go back and try again login there's an error what we should get and a different type of error and you can see we are getting a user not found error now that means there is no record of the user in our firebase which makes sense this is what you want but there's a problem we are not getting it on the ui that's user not found so let's go back to our login and let the user see that something has happened to let the user know something has happened we need to use a method called drive.listen and you can find that in riverport so make sure that you are doing this under your butte context so we are going to do rev.listing and it's going to take a type of login states here and we are going to have if you can see there is a function that takes t and t but not first we are going to find the login controller provider we are going to call it here and then we are going to uh it's going to take previous and next uh let's do this so this previous is previous states and the next states so let me change this next to states which we really need right now and we can then do if state is login error states what we should do is to show a snack bar something like this but we don't have this method anymore so let's look for an alternative i think there's something called scaffold messenger okay so this off the show start bar and we'll be able to show a snap bar here so let's remove this okay so we are going to show the test as state.arrow and it's going to give us the error that we added in the author for citrix so let's try that login and it brought us user not found you see user not found so we can show the user visually that something has happened now let's go back to our firebase and try to add a new user so we go to users and we go to add user let me add that email again and i'm going to add password one two three four five six add user and then we go to our app i put the password one two three four five six and we are able to log in okay there's nothing here apparently that is our home screen which there is nothing there right now we are going to fix that in a bit but let's try something let's refresh our app and see if we go to the home screen apparently it works because it has refreshed and it's going to the home screen and how did that happen we are using the ass checker so firebase automatically stores the users tokens on the app and it's cached so it lets you know that the user still exists on the app which is great for us so let's do on the home page let's do that the user can log out having a logo button here so we go on um our home screen okay so this is the login screen i just want to copy this text button and go to the home screen and then have the body and i have um a center and i have a child and it's going to take a text screen and i'm going to call this sign out now to sign out we'll make sure that we are using a hook consumer widget um so it's we're taking a widget riff nrf and we need this ref to draft us read our login controller provider dot notifier dot sign out okay we don't have a sign ups here in our login controller so let's go back to our login controller and just add a sign out method here it will be something like this so let's go back to our home screen and just add that sign out here so we have a sign up button um let's change it to an elevated button so it looks good okay so we have sign out so let's hit this sign out and we are back to the login screen let's try to sign in one two three four five six and we're back to the oscar home screen which is great so that means our authentication is working so this is how to do authentication in the florida apps using riverport and firebase i hope that you have been able to learn something from this tutorial if you like this tutorial please make sure to like subscribe to this channel so that i'll be able to bring more of these videos to you in future

Channel: Temi Codes

Views: 6,721

Keywords: firebase authentication, firebase riverpod flutter auth, flutter, flutter app, flutter course, flutter firebase, flutter firebase full course, flutter firebase riverpod, flutter firebase tutorial, flutter for beginners, flutter riverpod, flutter riverpod example, flutter riverpod tutorial, flutter state management, flutter tutorial, flutter tutorial for beginners, flutter widgets, riverpod, riverpod flutter tutorial, riverpod state management, riverpod tutorial

Id: UnbhkY0WdHM

Length: 35min 38sec (2138 seconds)

Published: Sat Jun 25 2022