How to Handle Authentication in your Flutter Apps with Riverpod and GoRouter

hello folks and in this video we are going to be talking about go router go router is a floater package that helps you to do navigations in your florida apps and today we are going to see how you can use go router and combine that with trivapod and do your authentication in your flood apps and without further ado let's get started we have a project here that i have called earth riverbot garage and i have built out a simple login screen that takes in the email address and then password and we are going to mark some sort of a back end to return a result for us when we pass this to the service and then here is the folder structure that we are going to be using i have a folder called ui that houses a home screen and a login screen this login screen is what you're looking at at this screen right now and then we have a home screen that is pretty empty we are going to get back to that later but in the library let's create a new folder and we're going to call the folder repository this folder is going to ask our off repository that we are going to use to do do the authentication the next folder you are going to create is your service this service folder is going to house the hot service that is going to return a result for us when we pass in the email address and the password to it the next thing to do is to install some of the packages that we are going to use and if you go back to your prospect.yaml file we have empty dependencies right now so if you go to your terminal or your view go to command palette and then go to prospect assist we needing go router so i'm going to type in gurata here and it's going to add that in our dependencies the next thing we need is a package called hooks riverboard i like who's riverbot and because it comes with floodlights although we don't need that in this tutorial so we are going to install riverport instead so let's go ahead and use pub spec assist again and then type in flutter riverboat so it's going to install florida river pod for us and then go router and that is what we need for this project to do authentication next we are going to create a file called art service dot dot in our service file and this will be a class of ad service and we are going to create a method called login that will return a token for us after some time so we have login is going to take a string of email string of password and after some milliseconds let's increase this to 5000 it's going to return an earth token for us one more thing to do here is to declare a global provider that is going to take that we are going to call our service provider and is going to return a provider that is of type of service like this so for here it's going to return florida ripper pod but here is going to take an argument of rev which is going to return an ad service so we are creating this here because we will need to assess this provider in our repository and we want to read this provider next is to create an auth repository so go to your repository folder and we are creating a repository dot dot and in the file you're going to create a class called auth repository and it's going to take a constructor of your earth service like this so we import a service here and in the constructor it's going to take an art service like this so that when you do a feature of um string and you do login which would take a string of email a string of passwords and you make it a sync you can easily return hot service that login like this but there's a problem how do your ultra repository know about art service we can easily do that by creating a global provider and we call it auth repository provider which is going to be equal to a provider that has the type of repository and then inside here when you are returning the auth repository you can read the art service provider here that makes it easily testable because you have just injected this hot service provider in your art repository and you can easily take this so now we are done with our ultra repository next let's configure go router and river pod okay the first thing is instead of returning my app here we are going to wrap it with provider scope because this radar scope makes our global provider accessible throughout the app also the next thing is to make sure that this is returning materialapp.router this dot router is from you guessed it go router and then we are going to get rid of this home also instead of extending stateless widgets here we are going to extend consumer widgets instead consumer widget is from flutter liverpool and in the build method here we are going to add another argument which is widget ref and ref but there is something this needs again if we check here it needs an argument of route information passer and router delegate but we are going to create a provider called the route provider which is going to help with our routing so um before that let's prepare that and we are going to create a final router ref the watch and is going to watch a router provider we're going to create the router provider in a bit and it still needs us to pass in the route information passer and the router delegate and to do that we are going to just do it like this next let's create a folder called in our library called providers and then here we are going to create a new a new file called routes provider dot so we are going to create a global variable called router provider which is going to be equals to provider but this time it should be of type go router so here is going to take in a widget riff and then is going to return go route so we are going to return go router here the router itself okay so let's import our river part here and then if you look at your router corrupter needs over that there are lots of options here there's initial location there's a url path strategy and then there's a debug log here so let's do some for configurations and first let's set the debug log to be true so that we can see our navigation routes on the terminal part of what we need for go router is also refresh listenable this refresh listenable is listening for go router refreshes so um when that listenable occurs go router refreshes and listens for more events okay so we are going to create a provider that handles those events for us and i'm going to call it a router notifier and it's going to extend a change notifier and here we are going to declare ref which will pass into the constructor because we need this rev at a later time and also uh i'll open the bracket here because this i need to listen to events here when the router is initialized also i need to get a list of routes and it's going to be a list of go routes which returns so in this list we are going to declare all our rounds for example this is what we need we need a go route which is of login and then we need a go out of home now that we have declared our earth we can import each of the screens here for example we are importing home and login screen we can't import home because we don't have a home screen so let's create a stateless widget here and call it home screen and it's going to import material so we are done with the home screen so let's go back and try to import it here which we have done okay and there is also something that we need in goals you have to see the path of each of the screens that you are going to so here i'm going to give it login and here for the path i'm going to give it the default path and when you want to do the default path you just put a for slash we are just going to pass in state here and also passing state here next you come up here and declare a variable called router which is going to be our router notifier here and router notifier is going to take in a ref from provider now you can let's say your refresh listenable is a router because router is a change notifier so this is looking for a change notifier which is a listenable and then you can say your router dot routes here which is going to give you the routes that we have declared down here okay so we are not done yet what we need to do is to create a method that we contain our navigation logic that will tell when go router should navigate to the home or to the login screen we're going to declare methods here called redirect logic this is going to take in argument of go out of state and but before we implement this we need to create a login controller that we undo the state of the user so let's go ahead and go to your provider and create a new provider and we're going to call it logincontroller provider.dart and inside your provider folder let's create a new folder called states and in here we are going to create something called login states that we will declare our state of the user before we go ahead here we need one more package to compare state objects and that package is called equitable so i'm going to type it here equatable and it's going to install that for us with the prospect we have equitable here and then we go back to our login states and these are the states that we need you can see that i created a class called loginstate which extends equitable now with this equitable we can compare the states now i've declared four most states which is login state initial which is extending a login state login set loading login state success login state errors and they are very self-descriptive because you can tell that when there is a login error we are going to throw this when there is a success and when there is a is loading and then when there is an initial state and with this logistics will be able to go back to a login controller and create a login controller so with that i can create a class called logincontroller and which is going to extend a state notifier so we are using state notifier because we need to be able to undo some sort of states so state modifier is going to take in an argument of login states like this so we need to import state notifier from riverbot and in the super constructor we can make sure that an initial state is login state initial next we will declare a variable called ref and as you know how we do it we will pass in this ref in a constructor next we create a method called login and here is where we admit those states so immediately someone clicks on login and we hit this method we are going to first set the state to be equals to login states loading so that will tell the user that this something is loading and then we await ref dot read off controller auth repository provider here and we can do login and passing the email and password to login from the auth repository provider and then we will return a state of success now we can improve this code a bit because there's no how you can tell if there's an error you can do that by having a try catch in your method here so you can do try and catch here which is going to catch the exception and you're going to set the states to login arrow but login error needs a an argument which is going to be arrow so you can do error that to string you and then we are going to move this right inside here as you can see and the login states we're going to do it inside here after here so we are good to go for our login state lastly here we create a global controller provider called login controller provider which we are going to be using we are almost there but we need to go back to our provider which is our router provider and complete the logic here and the first thing we want to do here is to create a variable which we are going to call login states and it's going to read it's going to read which is left to read our login controller provider there is a reason why we didn't use watch here go router already has a listenable which is listening for this router notifier so there's no need to use a watch which is going to trigger the review of the environment next we will use the state of the go router which is the grouter states to know if the user is logged in or not so we use the state to know where the user is at a particular moment so we declare another variable are we logging in equals to state dot location if the user is as login then we use it to decide if we want to login or not next we want to know based on the state of our login controller so we can say if login state is logging states.sex and we are going to return are we logging in if we are logging in return now else return login so that means that if you are logging in just return now if not redirect to the login next we will declare that if are we logging in then return home that means that these are taking care of our login and this will take care of our home lastly we'll return now if none of these conditions are met next in the router notifier we can do this and do a ref.listen red dot listing we're taking login state and we're taking a login provider and if the state changes just notify listeners that's it and lastly we will go back to go router and tell go router to use our redirect logic we just do this redirect router dot redirect logic now that we are done with our router provider we go back to the main. and import it here and after we have imported that then we can go over to our login screen and then make sure that we pass the data from the ui to the service so we do that by going to our on press screen in our login and do ref dot read but we don't have access to ref which means that we need to convert these stateful widgets to the one that provider has liverpool has so we do stateful consumer widgets consumer stateful widgets here like this which we take in consumer states and here consumer states and then we have access to ref dot read and then we can pass in an auth controller of repository provider and then we can do login and passwords so then let's restart our project and see what happens okay level path must start with slash so let's see how we are going to solve that to solve that we need to go back to our routes and it says that level path must start with slash so let's give it a slash login and then we restart restarting gives us a blank screen which means that we are in the home screen which is just an empty scaffold to confirm that we're just going to give it a body and give it a text that says we are at home so let's give it a center and yeah this shows that we are at home but this is not how what we want we want that when we first launch the app you should go to the login screen so there's a few fixes we need to do the first one is we need to say login state initial and not login state success so when we do that and then we refresh it's going to go to the login screen which is good now let's say you enter some email address and then some password it should log us in into the home page and when you click on login nothing happens okay so it's easily fixed because we made a mistake the other time by going to our login screen we are calling the auth repository provider here which is not what we should do that is the reason why we wrote a login controller provider that will tell our google router that the state has changed so let's go back to the login screen and just do login controller provider but this time the login pro controller provider is a state notifier so you need to do that notifier to be able to access the login and when we save that click on login we are at home locks us in to the home page so this is how you do authentication with riverport and go router so i hope you have been able to learn one or two things from this tutorial and if you like this tutorial please make sure to like subscribe to this channel see you next week

Channel: Temi Codes

Views: 14,635

Keywords: flutter, flutter course, flutter for beginners, flutter navigation, flutter riverpod, flutter riverpod authentication, flutter riverpod example, flutter riverpod tutorial, flutter state management, flutter tutorial, flutter tutorial for beginners, flutter widgets, gorounter authentication, gorouter flutter, gorouter refresh listenable, gorouter riverpod, riverpod, riverpod 2.0, riverpod auth, riverpod github, riverpod guide, riverpod state management, riverpod tutorial

Id: DVgjysZF82k

Length: 25min 49sec (1549 seconds)

Published: Sat Jul 02 2022