FLUTTER • FIREBASE Google Signin • with BLoC - Google Auth | dmgcoding

so welcome to the second part of this video series uh in this in the previous video I did uh the basic authentication with the block uh Firebase uh email and password Lo sign up and in this video I will do I will Implement sign up with Google uh using Firebase and block for State Management so in case you didn't uh Cas you didn't watch that previous previous video you can go watch it or else uh what you're going to do is uh this app is it will have a splash screen in the beginning and if the user is not authenticated it will go to the login screen and you can switch between login and log uh sign up and sign in screens forms uh so if uses sign in uh it will he will go to the user will redirect it to this homepage in the homepage we can uh go and add new task and edit new task like change the status and like that then it will also show us how many task are done how many TK are in progress how many task kind waiting and we can also delete the task as well so this I will also use cloud fire store as well so fire store with you will also learn how to use fire Store with uh with block State Management as well in the in next videos so in this video Let's do let's implement the Google sign in so to get all of you into the same page I have repost in here I have repost folder and I have Pages folder which all have all the UI code and all the blocks and in the repos I have allo I have created allo and in the auo uh we have imp implemented create user with username password and this repo contains all the methods like log out login and Google sign in those all of the related authentication related methods will be in this R and the block will communicate with uh block will call these methods for when it needs to do the login related uh authentication related fun methods so we have we already have created username with the username and password because we created in the previous video and let's create the in this video we we're going to do login with Google or sign up with Google so let's create the F uh method for that so just like the uh usern name and password it will return a user five as user and it can be now so I'm going call it sign in with Google uh sign up and sign in it will be both will be same so let's do sign a new Google we don't need to get any arguments in here so let's do a try catch if there's a error we will print the error and return not so let's uh add so before adding the code in here we need another plugin in case you also didn't watch in case you didn't watch the previous video we have F SC we have installed FIB SC FS o and flut block we will need another plugin called let's called Google S in we need this one we need to install this one so we can Al either copy it and paste it in hand save it or else we can go popad right in here so going to be underscore in here so let's add the package so that's done we have our package in here we need a final so we'll I'm call it uh so we have Google user here we have to use a r here it's a sync function so sync a wait it's going to be Google sign in Google sign in sign in and if uh it's not not that so final Google alt equals Google user authentication so if the if Google user this Google user if it is cancelled or if the sign in wasn't working properly so it will this Google user will be null it can be null you can see so if it is Google user is null we'll just return now because we can do any uh it it means if the Google us is now means that the authentication wasn't successful so we return now otherwise we can go get this authentication here so the next thing we have to do next thing we have to do we have to get the credentials that's call it crits and it's going to be Google all provider so the next thing we have to do we have to get the credits from this call it credits for credentials [Music] Google provider credentials and we have to pass the two parameters uh here to hum uh id id token and the access token so access token here access token will be we will get from this Google o Google o access token oh this is fun uh this is a uh feature so we have to this Google o access token and we also need ID token as well so Google both ID token so finally we need this five PR o instance so underscore o uh this will be final user a five b user this will return a 5S user so a wait o signning with credential signning with credential we get the credentials in here so we pass this credentials to this not Google or it's the crits pass the crits and this if user if this user is not so this is user this is not the user so we can return user. user this is user credentials uh let's call it credentials credential and user we return the user so let's go again let's go uh to the beginning so we first Google sign in we call Google sign sign in method and it will return this Google user and if this Google user is null that means it wasn't successful Google sign wasn't successful so we will return now and if it is not then we will go Google we call Google Google user authentication and it's a aing function so we will get Google Au authentication details and we call Google o provider credential and pass the access token from Google o and ID didn't token from uh Google as well so we create that it will return a uh credential for all credentials so we will this use you use this credentials to sign in uh for Firebase so this is this this is from the uh the package that we installed now Google signin package and this is from the FES so you first sign in with the Google and you pass create credentials and you pass that pass that credential for the 5S or package um this method and if you're using uh any other like Facebook authentication or something like that you do the kind of do the same thing you first get the uh in here in you first get the uh uh sign in with the Facebook and get the credentials and you pass this credentials with this method and it will create it will return this user credential object and it in that object we have user so like that so we have now we now have a signning with Google method so let's create uh let's go to the this sign up page so in the sign up page uh we have our Google signin button Google let is uh in this one sign up one sign up with Google this is the Google sign up button and this the email text form field this is email and text from fields and password inut f is in here and sign up button is this paramet button so just for you just just for you to not get uh confused this is uh so this uh we want to implement uh Google sign up so we have to add some we have to edit this sign up with Google button which is this one so let's go inside that and we have a gestro detector we have wrapped that UI with Gest detector so we can uh call methods but uh call methods on T but before that we have to create a block for that so in the previous video I created a block for separate block for this basic authentication in this video I will also create another block for this sign up with Google so we will use two blogs for this so let's go this is the sign up page and let's go for blocks and create a new block block new block I'm going to call it Google Google o and it will create this folder I'm going I'm going to rename that it's going to be Google o here and so Google all so to create normally it will create three files State file and the goog events file and the blocks file in case you don't know what how blocks work basically in the basic way uh you can there's a video in my channel uh we will uh it will be about like 30 40 minutes you will go we I will go around the basic step so go watch it and come back if you already know let um let's go at the uh at the state and events and then we'll add call backs for the block so what states do we have in here uh let's go for the state first so we have Google or initial State uh which is the initial State and when we tap on this button it will be a loading screen because we calling the sign in button sign in screen and after sign in after sign in uh after sign in if it is error we will throw it will be error State and if it is uh successful then it will be successful state right so let's create uh wa for that this is Google um we'll call it this is pending and this is error this is success but before that uh in the state we need uh actually we don't need anything so these are the states uh these are the types of States so let's go here Let's uh close this and let's pass the event we have only one event in here which is tapping the button tapping on the button so I'm going to call it final class I'm going to call it login or sign in and event let's go which extends this Google of event let's go for the block finally on this sign event what we what do we want to do let's create a call back for that we want future Vo search void and sign in with Google so we just take a event here and the emiter of type state of this block so Google outsite I'm going to call it emit so let's pass this one to here [Music] and an Asing function what do you doing here we have to call the the method this method that we created now right so let's go how to create this so we have to access this all Tri so we have to get this Alo from The Constructor so repo Alo let's get this Alo in here alra DOT sign with Google which will be like this part for that we have if you don't we created four St four types of States so pending aual pending and out error and out success so before doing that let's actually let's let's try the sign up let's add the uh loading progress indicator so let's first a it this type of event uh the types of state so I'm going toit you if you if they use tap on this button I'm going to emit this type of state so pending State and I'm going to wait some seconds 3 seconds and after that I'm going to emit again Google uh let's go here R out success so let's just uh before adding this function here let's go to this button UI of that button I'm guessing it is this so yeah so let's go here and even before that we had to go to the this uh this widget this whole screen is this widget is the whole screen of this so we have to wrap this whole screen uh with uh with this block that we created otherwise we can access our call events for that block so I'm going to con I'm going to convert this into a multiblock provider cuz we need um more than one block so to wrap this the multi block provider providers is a list pass this and we don't need child in here we need child in here like this so we have one block provider we need another and that will be Google or block and this LC variable is if in case also there's a video for that p as well so service locator patter you can search in my channel so LC what LC does is in here in the main do whenever app loads or run Lo when app loads I initialize dependencies but it does is uh I'm going to get this get it instance and register these single uh register these instances of uh services and dependencies what you want in this case we have allo so whenever we this Oro is needed for the first time it will create this AO instance and we can use this instance we that created instance anywhere in our app so that's what it does so you can you don't even have to give any uh the type of the dependency it knows which type of the dependency that we need in this case in go blog that we created we need all report type of uh uh instance so it will pass that type of instance so uh wrapping with block proide is done now let's do a hot prart for because we changed in here so and let's go for the let's go for the login with Google button in here this is it Google sign up this widget Google sign up button so I'm going to add I'm going to call I'm going to pass an event to this I'm going to pass event to the block which is type of sign an event so it will call this call back and it will emit this Google pending button pending uh State and then after 3 seconds it will emit Google out success uh uh Google success state so let's pass that state how to do this you can access uh any block uh if from Context so context read and give the type of block we want we in this case the type of block we want is Google O Block CL block and add we pass the event type here so the event type is sign in event and and so whenever we tap on this button it will pass even to this Google block but I I need to do one more thing that is uh I want to wrap this with the row and add add uh circular progress indicator if you do this let's go to sign up print this so this is how it works so I don't need this align let's remove that and I want it in the middle so main AIS line is in the center like this so we have circular progress so whenever we tap on this button and when we inser in the when progress of sign in we want to show a sign a progress data like we we will have to show that so what I going to do in here I'm going to wrap this wrap in a block Builder and go right uh you can go in click on this uh bu Bon and if you have the extension you will see these options uh these options uh block extensions if you don't have go install that extension in vs code you can go here and install that block extension so let's go for Block create a block Builder block Builder is so we can create we we can uh rerender every time a state change of this block so if you pass uh this this is block build we have to pass the uh block type and the state of the type so in this case Google o block and this is Google o state so Google block the block that we created uh just a mod before so this is Google block in in case if it if the if that state is changed it will recreate this uh render this object so I'm going to do what I'm going to do could even put this in here as well so if I'm going to check if the state is Google o pending if the state is Google pending I'm going to return this with circular progress indicator otherwise otherwise we don't need this so now it's not showing anything but if you tap on this button it will show this for 3 seconds and it will go back uh to normal that's because we in the block we are emiting Google pending state so we are checking if Google pending is the new state show this uh text with the circular progress indicator and and after 3 seconds it emits a new state which is not Google pending type so this uh is it's not Google pending so it will show this normal text with Google if I type on again it will go over 3 seconds like this and like that so in this way uh in this way uh we don't need to wait 3 seconds we just want to uh let's get this let's uncomment this and let's get this to next line and sign with the Google so we just want to check if user is null us is null then we have to return actually yeah return m had an emit uh if FES now that something went wrong right so we want to uh emit this kind of state out there Google out there so I'm going copy this one Google out there so like that otherwise you emit this um you emit Google success because if if the US not now and me everything went well we have successfully success sucessfully signed up like this the Google sign up button is completed but we need one uh we did one more thing now if we tap on this button it will show the popup of the selecting our or signning in with our Google account and it will work and it if it is successful it will return Google success but I want to check I want to check one more thing so let's go to the uh this sign up this whole UI screen so let's just go with the one block listeners well as block listener and this is Google o block and Google o Sate so this is not this one it's a Google state is this type of state so if this status type of this Google success so let's go in here and let's check it again and after the 3 seconds it types Google sign successful so what do we what we want to do in here if the if the sign in was go sign was successful we want to redirect the user to the homepage so St is Google sucess if you st Google success let's go call Navigator uh it's going to be push and remove until because uh when we go to the home page we want to remove we shouldn't be able to go to back go back to the login screen so this new new rout is material page rout cxt context and and we want homepage it's constant so let's check this this works so we when we tap on this one button it when the block it will emit a Google pending which will show the CLE progress indicator and after 3 seconds it will show Google success so this in this block list if Google if the news St is Google success it will go to the homepage okay that works so let's actually implement the Google signing so let's just uh come in this line and add this line so now if we if we tap on this button so uh we got an error so I fixed it by going to the isos folder uh go to the is folder and Runner you have inputed playlist and I added this this one here this part in here so it was saying it was missing this uh URL scheme so I added this one here so I will add this uh this part in the comment section uh sorry in the description so you can if you face this error you can fix that so if I tap on this now sign up with Google now it's saying T wants to use google.com to sign in this allows the app and website to share information about you so let's go continue now it's going to the Google signin page so I'm going to sign in and let me add the password and I will come back so I add the password and let's go next okay there two step uh verification so I successfully signed in uh using Google and let's check the our Fus console uh this is the user that I created with username password in the previous video Let's Go refresh this and we have this uh Google sign it says Google pro pro is Google so that worked so if I if I go now uh and signing uh it should be the same for the sign in as well so I'm going to use uh actually I have to yep let's at this uh if I go to sign up and sign in with Google now it will uh continue for the second time I just had to select the previous time I had to do some uh security uh stuff and if you if you already because I haven't already signed in to to this uh simulator but once I have signed in or with that email I can just select this and go sign in so that works so so now if I if the user uh if the user close this app and uh open it again let's say it is equal to H restart now it works now it goes directly back to the login that shouldn't be because we the we already signed in so we need to redirect the user we need to go to the homepage so in this in the next video I will add that I will Implement that if the user is already log logged in it will he will be redirected to the home screen otherwise it will be he will be redirected to the sign sign in page so in case if you if you have watched this far that means you are learning something so hit the like button and share and also subscribe so you won't miss out on upcoming videos I will in this in the next in the series um next videos will come up with come for uh Firebase using fire fire store database with uh this uh adding this fire store C fire store C operations with block and you will learn both block State Management and fire Base fire store as well so definitely subscribe and turn on the Bell notification so you will you will get notified so thanks for watching let's meet in the next video

Channel: dmg coding

Views: 295

Keywords: flutter bloc, flutter bloc tutorial, flutter tutorial, flutter, flutter ui, beginners course, flutter ui design, flutter beginners course, firebase, flutter app design, flutter master class, flutter tutorial for beginners, flutter course for beginners, flutter ui design tutorial, flutter ui challenge, dmgcoding, flutter liquid pull, bloc, flutter bloc basics, bloc builder, firebase authentication, email password login, basic authentication, basic auth, google signin

Id: aoHzWMYN9l8

Length: 33min 31sec (2011 seconds)

Published: Sun Nov 26 2023