Flutter Firebase Auth Login| Google Sign In | Android & iOS

well to get started first we'll  create a new flutter project then after that we'll come to our pop spec.yml  file and install three plugins so we have firebase   core firebase auth and google sign in with this  three plugins we'll be able to successfully   sign in with google account and then you need  to run pubget and for ios itself click on this   pod file and then open an xcode right after that  click on this runner and over here we'll select 10   then we'll go back to our project and then we'll  do pubget again now we'll go to firebase console   firebase official website and create a project  from there so here we'll create a new project first we'll create a new app first we'll  create for ios and then for android now over here we need to put app bundle a bundle  would be coming from your xcode but just now you   opened it and copy this section buddle identifier  and put it right here and then i'll register after that we'll download  this one so we'll open this   showing finder then we'll drag it to our xcode so right below this runner   and make sure they're all checked like  this then we'll have the file over here after that we'll continue next next we'll select swift   and from here we need to copy this two  sections firebase code we'll open our project and then we'll create another app we'll click  over here this time we'll create for android then we'll register our app  we need to download it again   showing finder and we need to drag and  drop this one right inside this app folder so here we are seeing this one now we need to put this few lines  inside this project build.grade file   now in general these two are already there so   we'll just copy this one come to our  project and we'll open this one build.gradle next applause builder.gradle we'll copy this one  and we'll find this file build.gradle over here   and first one is this one but since it's already  there we don't need this we'll remove that and then we'll click next continue to console so we need to do a few more setup with this  so we'll come over here project settings   now over here we need to assign an admin email for  this project so here you should choose any kind of   gmail address or account that's what it would do  and here public facing name we can change this using this line we'll give our app internet  permission make sure that you write it correctly   then we'll come over here and inside this will  create a new file and we'll call it auth service so here we'll have three methods handle auth  state sign in with google and sign out actually   this three methods would be called from our  ui and these three methods are core of our app   and they're pretty simple so first we'll go ahead  and create handle auth state method so here is   our handle or state method and make sure at the  top you import firebase auth file is auth.dart   and inside this method we have a stream builder  all we do we are returning a stream builder now   stream builder eventually would return a widget  okay so what kind of widget we are returning that   is based on the authentication from firebase  so as you see that first we get a firebase   instance and then we get off state change this  method now it would help us to know whether the   user has logged in or logged out okay if the user  has already logged in which means that user has   authenticated data from the google server  then we'll go to home page of course we'll   create this one very soon if the user has not  logged in we'll ask the user to go to login page   after that we'll create a method that is  called sign in with google so this is our   sign in with google method and this method  will be called from a button press on the ui   as we click on the button it will try to get the  email id or gmail account from your device is in   this method if it can find it will send it to  the google server and wait for authentication   if we get the authentication based on that  authentication over here we'll create a credential   user credential that would be our access token and  id token okay so that will have a credential which   will pass over here to the firebase so first we  need to connect with our google account and then   if we get credential we send this account or  information to the firebase and firebase will   return us an instance based on this credential  which would be using later to show our information   like your gmail account and your name from the  google server so this is the last method which is   sign in method so as we see there is a similarity  once you have firebase instance you can sign in   you can sign out so now we see at the top we  have this home page and a login page so first   we'll go ahead and create a login page so here  we'll create a new dart class called login page now this is a simple stateful  class and which for this   you will have the code in the link  below so go ahead and get the code   this is basic ui over here but most importantly we  have this gesture detector and from here we call   sign in with google this is what i have mentioned  earlier okay so all it does on the bottom click it   calls this method now right after this if we  come over here we need to import the login page   and the arrow should be gone now we'll  go ahead and create this homepage class so this is our homepage class and this  is once again simple stateful class   make sure at the top you import firebase auth  dart file and if we are logged in definitely   we would be able to use the current user  and display its name that is username   and at the same time if we are logged in we  would be able to use current user and its email   okay now if we come to our other service we'll  see over here if we imported the error is gone   okay now it's time to combine this all three  together from our main.dart file so here is our   main method and at the top we make sure that we  initialize firebase and until that we have to wait   and then we call our auth service and from here  we call the method handle auth state which is   over here now it would determine whether the  user is logged in or not if the user is logged   in we'll go to the home page and show the user  information if the user is not logged in we'll   ask the user to log in we'll go ahead and run  our app now our app has booted and after that   make sure inside this project you have assets  folder and inside ss folder you have an image   google.png it could be any image it doesn't matter  and then at the same time in pop spec.yml file   you have a reference for this image and make  sure the format is correct now if you try to   click on this button we'll see it will try to get  gmail account from our device but now it crushed now here it's saying that we are missing this in  our url scheme now this mostly happens for ios   so for ios device we'll come  over here and inside this   runner file over here we'll open up info.plist  file and then we'll put this information inside so this is the information that's needed for ios   and over here inside this string we'll copy  whatever we see from here that's been printed now we'll run our app one more time we see that  our app has booted now would click on this button and it will ask for the permission so this  is what we see i'll click on my gmail account   here it says that sign so here we see  an error error is for authentication   now this happens because we didn't enable  email login from our firebase dashboard here we'll choose sign in method  so click on google because we are   using google account to sign  in we'll enable it and save it and we'll click over here done so this  time we'll run our app one more time   and it restarted we'll click on this  button so i'll click on my gmail account   it already talked with the server and here  we see this is my gmail name and this is my   gmail account you can log out okay we are done you  can log in so it'll ask you the permission again so we'll click on this so we log in now it's getting the data from the  server so it takes a bit of time so we are waiting   now here is our data so that's how it works so if you liked and learned something don't forget  to subscribe and smash that like button thank you

Channel: dbestech

Views: 34,347

Keywords: flutter firebase authentication, flutter firebase auth, flutter firebase login and registration, flutter google sign in firebase, flutter firebase login, flutter firebase google sign, flutter tutorial, flutter google sign in, flutter

Id: hgRg9RFvNJQ

Length: 12min 51sec (771 seconds)

Published: Fri Jun 17 2022