Google Sign-In with Firebase in Jetpack Compose | Android Development Tutorial

hey coders welcome back to coding Hub and in this video we'll be learning how to implement Google signin using Firebase authentication now I am having my application over here which is basically having a button now we are basically having a you know an icon of Google on this particular button with a text now for clicking on this button you'll be able to see all of our account and after clicking on any of our account or selecting any of our account we'll be able to sign sign up right now we can also have this log out button so we can click on this log out button and now if we again click on this signin button we'll be able to access that one click signin you know button uh so if we click on this see now the user is directly being logged in so let us jump into the code okay so what I have done is I have basically created an empty activity compost project now the main thing what we have to do firstly we have to remove this two function the greting function and the preview function remove this creting call from here and let us connect our application with Firebase for this navigate to this tool now you will be seeing this Firebase click on this now after clicking on this you'll be finding out this you know uh this different things like you know Cloud functionality navigate up now come to this authentication now you'll be seeing all of this you have to Simply select this authenticate using the custom authentication system now connect to fire B now the Firebase will be you know the Firebase will be opened in your browser what you have to do you have to basically uh either choose a existing project or you can choose a project you know a new project okay so let us add a new project now here we have to name our project I will leave it as it is uh so it will basically by default take you know our project name we can click on this continue now it will be saying that you want to enable Google Analytics uh I don't want to do it for now now click on this create project and it will take some time to create the project we have to wait for that okay so our project is done uh now we can click on this continue now it will open uh Firebase console wait for some [Music] time now click on this connect now it will basically you know our you know our basically Android Studio is being connected what you have to do you have to come back come back a little bit replace this you know this uh link and just keep till this okay keep this fire base only okay now rerun this now select your project which uh so our project was this Google sign in select this one now come to this authentication now here you'll be be seeing multiple things however the main thing is click on this get started now click on this Google enable this one and then you'll be seeing that you require a supported email for this project so you have to provide a email I will provide a email which is you know I am having currently then click on this save okay so uh it is done now we have to click on this done now click on this Google and navigate down so you have to navigate down uh by basically selecting this you know so you can navigate down click on this web STK configuration now you'll be finding out this web client ID so you have to copy this web client ID because we'll be using it okay now what you have to do you have to click on this cancel okay now come back uh to your Android studio now over here click on this add the Firebase authentication Sate to your app app clicked on accept changes now it will take some time till now what you have to do you have to expand your resource you know you can expand your resource expand your values come to the string create a new string so you can simply say string and name your string uh so I will be basically saying client uh you know C ID okay like that and here you have to paste that okay you have to paste paste uh the thing which we have just copied so I'll be pasting it over here okay so we'll be seeing this right so I'll be basically you know hiding this because it is a key which shouldn't be shown but yeah after pasting it over here you are done okay now what you have to do you have to come back to your cotl file which is our main activity file close this one now what you have to do you have to come to this Android now select this project expand your project over here you'll be finding out this gredle you you know ew click on this now right click on this and click on this open with and open it with basically terminal now you have to basically write this which is uh do/ grle ew sign in report so using this you'll be getting your keys wait for some [Music] time so it will basically provide you the sh key which is basically you know a key which is required okay now you'll be finding out your sha keys right so you will be getting two keys which is sha1 and sha 256 I'll be hiding this two because it is you know confidential you have to copy your sha1 so copy it then come back to your Firebase console over here now here you will be basically finding out uh this setting right click on this setting come to this project setting now here you'll be finding out different things but what we have to do you have to come to this add fingerprint and you have to paste your sha key and you'll be seeing this screen okay so for sh1 you'll be getting this s sh1 Okay click on the save similarly copy your s 256 key so we can come over here we'll be copying this sha 256 so uh when you are copy remember that you shouldn't be taking any spaces okay okay after copying it come to your browser again and add another fingerprint which was your sha256 click on the same button perfect so both of this are done now click on this download Google service. jsn click on this now your jsn file will be downloaded and we can come back what you have to do you have to open your downloaded jsn file and click on this and copy this one come back and here what you have to do you have to open your project now over here you'll be seeing this app folder uh and you have to paste it over here okay so you can simply come over here and then you can you know simply say control V and you have to rename it uh so because I am having that uh we can simply say Google sir P say okay so if it will be by default uh you know for yours because I have already downloaded one file uh earlier so it is showing one right now we can click on this okay it will say overwrite overwrite it okay now we are done with uh setting up our uh client ID and all of this now what we have to do is we have to close this one uh close this schedle also minimize this one okay now we are ready now what we have to do let us firstly focus on the first thing which will be creating our lockin screen okay so what we can do is let us create another composable function after this override uh so what we can do we can simply say composable or what we can do is we can also do one more thing which is we can create this function below this class so we can simply say composable then we can say one and we can say login okay and here in this login we can have different things let us call this login from here okay and one thing which I am wanting is that I will be changing the color of this surface so we can simply say color and here we can basically provide the hex code we can simply say 0x you know and then we can simply say FF 1 A1 818 okay so this is the code which I will be using import This One Import this Android uh compose UI graphics and it is done okay now we can come to this login and let us write our code now the first thing which we have to do is that we have to basically come over here and we have to say where okay and we can say user by remember you know and in this remember what we'll be saying is we'll be saying remember mutable state of you know and in the state of we can simply say Firebase dot OD dot current user okay so we can say current user let us see what is it saying it is saying that we have to import this one also import this one wait for some time we have to import this we have to also import this one again import mutable set values so we have to import the set values and get values okay so we are done so we have imported all of the things which are required now the next thing will be that you know we Define the token so this token uh is the one which we uh you know earlier we uh we have basically written on the string file okay so we can simply say token equals we can say string resource you know and in the string resource what we can say and in this resource we can simply say ID and in this ID we can simply say r dot you know it will basically R do string dot we can simply have different things so we'll be using this client ID okay now here let us see what is it saying it is saying create uh class string resource so uh let me check once okay so this s will be small rer and we have to import this okay perfect it is done okay now the next thing will be we'll be requiring the context so we can say context you know and in this context we can simply say local context dot we can say current context okay so we have you know taken two things the first one is we have uh you know taken the user and then we have basically taken the token okay now the next thing will be that we start creating our uh design so we can simply say column and in this column what we can do is we can specify a modifier so we can simply say modifier fire equals modifier okay and in this modifier we'll be having few things like fill Max withd then we can have few more things like we can have the vertical Arrangement okay so uh what we can do is we can directly come to this and we can simply say fil Max width and then after this we can simply come down and we can say vertical Arrangement and let us say Arrangement do Center so it will be Arrangement do Center and the next thing which we'll be basically doing is that we'll be defining the horizontal alignment so we can say horizontal alignment and then we can simply say alignment do Center horizontally okay so we are done with this also now what we'll be doing is that we'll be basically saying that if let us suppose if you know if that you know the user is equals equals null that means there is no user present currently right uh it was I guess lesser then okay so it is perfect now if user is equals equals L we can simply say let us have a spacer firstly and let us give it uh you know uh height maybe so we can say modifier dot height and let us give a height of maybe 35. DP okay and then we have to import this DP okay let me do it manually and select this import this extension DP okay perfect we are done with this now the next thing will be that uh you know uh we basically create a button uh which will be the button on which you know the user can click and navigate okay so we can simply say elevated button and in this elevated button we'll be basically having this on click so we'll be defining the on click after some time one now what you have to do you have to define the shape so uh bring this okay so what you have to do you have to bring this down and after this you can come down and you can simply say shape and we'll be simply saying rounded Corner shape and let us give it a shape you know rounded Corner shape of 15. DP okay and after this what we have to do we have to define the modifier so we can simply say modifier equals modifier dot we can simply say height and in this height we can simply say 50. DP and after this height what we be saying we'll be simply saying with Max withd and then we can also have few more things like we can give a panding and this padding will be of 5. DP okay so we have done that too also now we can define the color so we can come down and we can simply say color equals so we can come down and we can simply say button default dot button color and in this color we'll be basically having a container color uh which will be basically uh color you know color do white we can simply say color do white let us bring this down uh let us bring this down also perfect after this we can have a comma and we can simply say content color and let us give the content color to be of black okay okay perfect uh so both of this are done now the next thing will be that you know we bring this up uh a little bit this also okay perfect now in this row scope what we'll be defining is that we'll be basically having the image and we'll be having the text okay so let us copy this image okay so I'll be basically providing you with this image uh you have to just download the this image and you can directly paste it okay so what we will be doing is we'll be opening our you know this SRC and over here we'll be finding out this screen right you have to you know open this resource click on this dble and then just space it over here perfect let us have the image now so we can simply say image and it will be basically a painter resource and we can simply say our Trel do the Google logo we can provide a description uh to this uh we can simply say Google logo so it will be basically one or lesser over here okay perfect so we we have the image now uh what we can do is we can bring this down a little bit and let us you know Define more things like we'll be requiring a modifier so we can simply say modifier equals modifier dot we can simply you know have this size and let us give it a size of 45. TP and then what we'll be having will be basically having this content scale and this content scale will be basically content scale. fit okay so we are done with this so we are now having the image let us Define a spacer after this so we can have a space between you know the image and the text so we can simply say uh modifier dot we can have this width let us give it a width of maybe 12. DP perfect now let us have the text so we can have the text and the text will be basically sign in Via Google you know so we can say Google perfect after this have a comma have a comma and come down and then we can simply say font family and let us have a font family which is basically s siif so we can use S siif then we can basically have font weit let us give it a font weit of maybe extra bold and then we can have few more things like we can have a font size and uh let us give it a font size of 15sp we have to import this SP and then we'll be having few more things like we can have a letter spacing over here which will be basically 0.1m unit okay so we are done with this and after this if you know after this if let us suppose this user is existing that means the user is present then we'll be having something else which will be that we'll be showing the user okay so we can come down and uh we can simply say you know uh text maybe and in this text we can simply say I okay and then we can basically say dollar you know and then we can have this user we can have this n insertion and then we can simply say display name so the username will be visible now after this what we can do we can come down and come down let us have a comma come down and now we can basically Define the remaining things like we can have a fault family which will be basically again s [Music] siif so we are basically using the custom fonts which are by default provided now we can have a font [Music] fate and in this font weit we can simply say font weit [Music] bait. extra bold now the next thing will be that uh we also provide few more things like the font size so we can simply say font size let us give a font size of maybe 14. and then we can also have a color which will be basically color. white okay so the text will be of white color perfect so it is also done now let us have a spacer down here okay so in the spacer what what we'll be having we'll be basically having a spacer with a height uh so we can simply say height and maybe we can give a height of 35. okay perfect now what we'll be having we'll be having a button for the sign out and after this we can come down so we have to have this on click and then after this we can simply come down okay so whenever you know someone will click on this on click what we have to do we have to Simply say Firebase do or DOT sign out okay so we'll basically sign out the user and we'll be making the user equals null okay okay so now the user is not present okay now the next thing will be that we Define the Buttle components so over here what we'll be having we'll be basically having you know uh we'll be basically defining the shape and all of this so let us Define the shape and all of this so we can directly come down and and we can simply say shape equals rounded Corner shape let us give the same like 15. TP then we can basically have a modifier equals modifier and here after this modifier we can basically specify a height maybe a height of 50. DP then we can also Define a filmax size okay and then we can also have few more things like you know we can have this padding so we can have this padding let us provide a padding of 5db okay so what we have done uh we have basically you know defined this button and we have defined its modifier okay so the thing is over here uh you know we can simply overwrite this with simply saying filmax width okay so it will be just filmax width not fil ma size okay perfect so it is done and in the Clos scope we can basically Define the things which we want over here okay so what we'll be wanting we'll be basically wanting a text and this text Will basically say a simple thing and before that we can also define the color so we can have a comma and let us have this color and we can simply say button default dot button color and here we can basically have like a container color which will be basically color dot White and then we can have this you know content color and then we can basically have color dot or we can have this black okay and then we can have the text and the text was basically sign out or we can say log out okay so it is completely upon you what you want let us specify log out as it was in the preview now after this we can have a fault family over so we can come down and let us say say font family and in this font family we can simply say font family dot s set and then we can have font weight and this font weight will be basically extra bold okay perfect after this we can have a font size and this font size will be of 15sp then we'll be having this letter spacing this letter spacing will be 0.1m unit okay so we are done with this okay now let us run this code once so we can see that our UI is working perfectly and we can start implementing our authentication part so let the gdle build finish okay so we are able to see this and it is basically saying sign in via Google but the problem is that we are unable to see the image so let us see what is happening over here it was a uh Google logo okay so the size we have to Define it of it will be basically 40 we can say let us 40 so we did it wrong and let us re uh rerun this okay perfect now we can see this right uh so we can see this uh but the thing is that this button is not working because we haven't defined the on click till now okay so let us work on this I'll be you know dragging this over here okay perfect now it is done and let us work on the remaining parts okay so the first thing is that uh let us you know work on this Firebase or launcher function uh so for that what we have to do we have to come down completely and then after this we can have that okay so it was our you know this function uh which was login function okay let us come up and after this we can simply say composable and here we can simply say one remember uh remember fire base or launcher okay so it is basically the function name and there will be two callback functions which are basically on or or we can say on or [Music] complete and uh it will basically have the you know accept the O result and here after this we'll be basically saying that the return return will be nothing but unit okay and then we can have one more thing we can simply say on what error okay and in this we can simply say that the receiving will be of API exception and then it will be also unit okay so it will return nothing so let us see what we are getting so it is saying to import class AP exception let us import that okay perfect now the next thing will be that we also Define the main things uh which will basically it will you know it will it will have this manage activity result launcher you know as its return type and then we can simply say intent comma we can say Activity result this one okay right and here after this we can have this function body okay so it is saying that we have to import this also import this one also and let us see what is happening uh we'll be requiring one more M perfect so it is done right okay so the next thing will be that we come down and we simply say scope so it will be basically you know uh remember we can say remember we can say remember routin scope now why are we doing this okay so basically remember Co routine scope you know this PS a CO routine scope that is remembered across decompositions and it will allow us to launch Co routines within the function okay now after this what will be doing will be basically coming down and we can then say return and it will be basically return you know and then we can simply say remember uh uh we can say remember uh you know remember launcher you know for activity result and here we'll be having this you know contract so here we can can simply say uh something like this so we can remove this one for now and then we can you know expand this so we can come over here let us expand this and over here in this you know what will'll be expecting we'll be basically saying activity V and then we can say result contract so it will be the contracts uh then we can say dot we can say start uh so the S will be Capital we can say start activity for uh you know uh we can say okay so what we can say over here is we can simply say start activity for result okay and in this result it will be basically a function call okay so it is also done now why are we doing it okay so what are we doing over here we are basically saying that uh you know return remember launcher for activity result and here it will basically return a managed activity result launcher which will basically create using you know the remember launcher for activity result function it takes an activity result contract and uh Lambda function that handles the result of the activity okay so let us do that so what we can say is uh you know after this we can simply come over here and uh then we can simply say result and after this we can come down okay so after this what we can say is we can simply say well task you know and then we can simply say Google sign it will be sign in and then what we can do is after this sign in we can simply say get sign in account from intent okay uh so it will be i n t n intent and then we can simply say result dot DOA okay now let us see what it is saying it is saying know let us see more options so we can say add dependency we can add that dependency and then it is basically saying uh okay so get sign in okay so let us say if so will be signed in account from perfect so it is done okay now the next thing which we'll be doing is that we be basically having a try and a catch block now what we are doing over here you know this this will basically you know retrieve the sign in Google account from the int data okay so we are basically doing this now the result is you know it will be basically then processed in a try cat block okay so what we can do is we can come down and then uh you know we can simply say try and after this try there will be a cat block so we can simply say catch and it will be basically you know having an exception which will be basically a API exception and in this catch block what we'll be doing we'll be Simply Having a log we can say log T you know and then we can simply have a string which will be basically that uh you know Google or and then we can have this which will be B basically e.2 string okay so using this we can basically see the log and then we can simply say all OD error okay so we can call this and we can pass this exception okay and now let us do the uh Tri block what we'll be doing is we can simply say Val account you know Val account and then we can simply say account equals task okay and then we can simply say dot get result and in this result we can can simply say API exception and in this exception you know we can simply say that it is you know inheriting PRS class dot Java okay okay so it is done now we have this null exception and then after this we can simply have this log message which will be a log T and in this log D we can simply say Google or and then we can simply say something like this so we can say account uh you know dollar so we can we have to store this in a string for that so we can simply say dollar account okay and after doing this you know we are done with this now the next thing will be that we have uh Val so we can simply say Val and we can say credential uh cre in shs and when in this CR in Shi what we can say we can simply say Google Google or provider and in this provider what will be doing we can simply say get credential and here we will be having a string so we can simply say account do ID token again plus n and then we can simply have this null over here okay so this is the thing and then what we can do is we can have this scoop. launch so you know all of this code are by default provided you know in the documentation so you can read the documentation to understand more about this however I will be explaining all the things again so you can simply say well o result and in this result what we'll be doing is we can simply say Firebase do OD you can say odd dot we can simply say you know sign n with and then you'll be having different things over here we'll be using this sign in with credential and here we'll be basically passing the credential and over this we can simply have this await okay okay so it is also done and then what we can do is we can simply say on or complete uh you know navigate to this or result okay so what what are we doing so let us suppose if the sign in is successful you know the user you know the user's Google account information is retrieved from the task result and the file based credential is created using the account ID token and the credential is used to sign in with the Firebase authentication asynchronously using Co routines now if an error occurs uh during the signin process let us suppose the user cancel sign in you know or there is a network error it is caused in the you know in this catch exception block and then we basically you know lock the error and with this we have also you know done a call back Lambda function okay so now let us uh Define this on not complete and this on o error Lambda function okay so let us do that part so for this what we have to do we have to come up and we can come up come up come up and after this user what we can do is we can simply say well launcher and here in this launcher you can simply say remember Firebase or launcher and then here we'll be having this on complete so in this on complete what I can say uh that you know in this on complete I can simply say the result and here after this result we can simply say that the user or we can say the user is now the uh uh we can say result. user okay we can say that perfect so now we have set the user and here the user will be simply null so we can simply say user equals null so it will be called you know so this o on o error will be called when this exception will be get triggered and we'll be basically you know doing nothing but we'll be just saying that no the user is null while if the authentication is successful then this on off complete will be called and then we'll be basically you know basically we'll be uh you know that we'll be updating the user variable with the current user okay now there are few more things and the thing is that we haven't uh you know described what will happen uh when this elevated button is clicked so we can come down and we are having this elevated button over here only so let us see where our elevated button was okay so it will be over here so it was the uh that button okay so here is the on click of this elevated button we can come down over here and then we can simply say well gso so it will be basically the you know Google signin option and we can simply say Google Google sign in options and here in this options what we can do we can have a builder so we can simply say build bu so it will be Capital Builder and in this Builder we can have this Google sign in option. default signin then we can have a comma and then we can come down or we can directly even uh you know have a DOT and then we can simply say request ID token request ID token and here we can pass the ID token which was our token you know and this token was basically having that you know the client ID right as which we have defined already here okay now what we can do is after this we can have another Dot and then we can simply have a request email and after this we can simply say build okay so we can bring this down uh so the reability can be increased okay okay so everything is done now the next thing will be that uh we also have the is you know another Val uh which will be basically you know uh the Google signin uh we can say client and in this client what we can do is we can simply say equals Google sign in and in this sign in what we'll be doing is uh we can directly even say Google signin doget client we can do that also and over this get client we have to pass the context which is the current context which we have already defined earlier and the gso okay uh so uh this is the context which we have defined and here is the gso okay which is basically the Google signin option okay now the next thing will be that you know we can have the launcher uh so we can uh simply say okay so after this we can simply say launcher do we can simply say launch and here we have to pass the intent uh so we can simply say Google sign in client. signin intent okay so it is also done and hopefully we have done everything right so let us run this okay so the main thing over here is that I'll be suggesting you that you know you basically run this application on your personal device the reason is that the avd you know the avd which we install in our computer or we can say in our laptop you know it is basically not having the toolkit by default and you have to log in you know with your Google account in your IMD which is you know somewhat I don't feel so it is secure so what you should be doing you should be basically running this on your personal device so now I will be basically clicking on this run button and then I'll be showing you my screen okay my full screen okay so now let us jump into the screen okay so after running the application I am able to see this screen where we are basically having this button with a you know a Google logo and it is saying sign in via Google now we have to click on this button now I am able to see all of my accounts and I have to select any all of my account I can select this one you know the first account and see we are able to see that the username and a log out button right now if we click on this log out button we are logged out again now let us check whether One Tap sign in is working or not so if we click on this see we are able to log in again with this one tap okay okay so now as we have seen that the application is working correctly let us also see that whether we were able to retrieve you know the uh the signin information right so for this what we'll be doing we'll be basically you know opening uh we can say our Firebase Google console then we can open our project which was basically Google sign in okay now as we can see this what we'll be doing is that we'll be basically coming to this authentication and we'll be able to see our users over here and we can see this user right which we have just you know authenticated you know so we are able to see his user ID and all of this okay so finally we were able to achieve authenticate using Google and in our previous video we have also discussed how to authenticate user using email and password we have also shown you how you can basically store the user details like username user phone number and all of this in fir Stone so if you want to know more about authentication you can direct or you know you can basically follow up that video uh which will basically clear up your concept much briefly however we'll be continuing our series and we'll be bringing More Concept so for that what you have to do you have to basically subscribe to the channel so you don't miss any upcoming update from us till then have a great coding ahead this is coding up signing off for this [Music] video

Channel: Coding Hub

Views: 1,242

Keywords: Google, Firebase, Authentication, Android, Sign-In, Google Sign-In, Firebase Authentication, Tutorial, Example, Code, Implementation, Mobile, App, Development, OAuth, Login, Account, User, Integration, Kotlin, SignInWithGoogle, Auth Flow, Social Login, Multi-Factor Authentication, Identity Management, Authorization, Token-Based Authentication, User Authentication, OAuth 2.0, Mobile App Security, Firebase SDK, Kotlin Programming, Mobile Development, User Profile, Session Management, FirebaseUI

Id: mNO-Bj344QA

Length: 42min 39sec (2559 seconds)

Published: Wed Feb 14 2024