Flutter Firebase Authentication - The Clean Way

knowing a useless identity allows an app to securely save user data in the cloud and provide the same personalized experience across all of the user's devices this is a remake of my most popular video which got over 100 000 views and even promoted in the official documentation of flutter we will learn things such as signing and sign out automatic authentication how to clearly separate our authentication logic to be able to reduce it in your future applications after this you will have a strong foundation to work upon if you enjoyed this kind of videos smash that like and subscribe button and let's dive in we will start off by adding some dependencies the first one is firebase core and the other one is firebase auth remember to be up to date and take the latest versions from the documentation to keep this as updated as possible i recommend you to follow the official flutter firebase website here you will find all of the different setup steps for each platform after you have followed the platform setup steps you should go to the authentication section and follow those steps the first thing we are going to do is initialize the firebase app this needs to be done before we can use any kind of firebase service and of course before we do that we have to also initialize widgets flutter binding after we have initialized that we're going to create a authentication wrapper the reason for this widget is to later return either the home page or login page depending on if you are authenticated or not for now we're just going to leave it with an empty container on the return now we can actually start building the authentication class we will give it a name something like authentication service and then we're going to build a constructor so the reason for this constructor is so that we can pass the actual firebase of class coming from firebase sdk so here we can see the creation of the variable but we're not going to initialize it and with the syntax from dart we can simply use say this dot firebase auth inside the constructor now we're going to define our two methods both of these are going to have a return type of future string this one is going to take two parameters the first one being the email and the second one being the password we're pretty much going to do the same with the signup it will also be a feature of type string we'll call it sign up instead and with the parameters we're going to have the email and password we're first going to start off with the sign in method so inside here we're going to create a try catch statement and we're going to specifically cache the firebase off exception this exception comes directly from firebase auth meaning that if we actually catch an exception we'll be able to provide all of the different messages now as the sign in method of firebase off is actually a future we're going to use the await keyword then we can simply call firebase off and sign in with email and password and as our method already takes the email and password we can simply pass that to the sign in with email and password method if that is successful we will use to return a string something like signed in and then inside the catch statement we can just return the message coming from that exception moving on to the sign up method this one is pretty much going to be identical to the sign in one only difference that we're going to do is just call a different method on the firebase off class in this case being create user with email and password now for the last thing we're going to do inside this class which is going to be the firebase of state changes getter so depending on if you are signed in or signed out this is going to return the user or null this one is very important as we're going to listen to this in the widget tree and then depending on if we get a user we're going to return the home page and if not to return the authentication page if you want to learn how you can test this class you can check out amateur coders video i will link that video down in the description so make sure to subscribe to him and check out the video so moving back to the yaml file we're just going to add providers we don't have to handle the stream builders so what we're going to do with provider is that we're simply going to provide both the authentication class but also the user stream we get from the authentication class to do this we can use a multi-provider which makes the syntax more clean with multiple providers and we're going to start off by use creating a simple provider this provider will provide authentication service and in the create statement we're going to use create authentication service and pass the a firebase off for the second provider we're going to create a stream provider with this one we can actually access the authentication service from within this create statement so this create actually provides us with context and we can use two context read and i used say that we're going to read the authentication service as the type and here we will get access to our actual getter that we created in our service so now we actually don't have to handle a stream builder we can simply use context watch to listen for that user we do that by specifying the watch type which is user and that's the one we created above before this will yield us the firebase user so this firebase user can be two types it can be either the firebase user or it can be null so if it's firebase user we're going to return the home page or a text in this case and if we're not signed in we're going to have a null class that means that we're not signed in so to set up authentication in the firebase console you navigate to authentication and then the email password and you enable that after we have done that we will head over to the users section and add a new user we can create a user something like test gmail.com and then just add a simple password that you can remember so we can test it out i've gone ahead and created two very simple classes one home page and one sign in page the signing page is a little longer but that's just because we have some simple text fields and our raised button so now inside our sign in page we can call our authentication service using provider the method we are going to call is use the sign in method and as you remember before this requires two arguments the first one being the email the second one being the password to make this as simple as possible we're just going to use our email controller and provide the text from that and it's the same with the password using the password controller if you want to you can also trim the text of course now inside our authentication wrapper we can just return our home page if our firebase user is not equals null and then return our sign-in page if we don't have a user and here we can see our minimal example actually working we provide it with our email and we also provide it with our password hitting sign in we will see that we'll navigate to the home page and we can also see that if we reload the page we will automatically sign into the home page that way the user don't have to sign in every time so how can we now add a sign out functionality first off we navigate to our service we add a simple method called sign out and this method will use call sign out on firebase off now inside the home page we can use create a new button the on unpressed on this button we'll just call our sign out method and that's all we had to do for our sign out functionality looking at this now we can just press the sign out button and we will navigate back to the login page

Channel: Robert Brunhage

Views: 92,320

Keywords: Flutter, Flutter firebase, Flutter firebase Auth, Flutter firebase authentication, Flutter firebase tutorial, Flutter firebase auth tutorial, Flutter firebase login, Flutter firebase login example, flutter firebase sign in, Flutter firebase unit test, Flutter firebase auth ui, Robert Brunhage, Flutter firebase part 1, flutter Authentication, Flutter firebase auth clean, Flutter firebase auth pro, firebase flutter auth, Flutter automatic authentication, flutter auto sign in

Id: oJ5Vrya3wCQ

Length: 7min 41sec (461 seconds)

Published: Sat Sep 19 2020

Reddit Comments

[u/[deleted]]

Nice

[u/alizahirh]

Liked, Subscribed, upvoted and saved. Because i like your style. Not much preamble, straight to the task at hand and everything is pretty clear.

I’ll be sure to check out your other videos.

Edit: (question)

What IDE do you use? And what plugin did you use for that clean “!=“ symbol?

[u/d3xm0rg]

How can I do the exact thing using Riverpod? I came across the autodispose function but I am not sure how to use it properly. Any suggestions?

[u/AGlorie]

i heard they changed the firebase method names etc recently, i need to refactor all my code :) thanks for the video