Tutorial Sign In with Google | React Native Expo

hello everyone and welcome to code with better in this video I'm gonna teach you how you can integrate signing with Google using react native and Xbox go here we have a demo of what we're going to be building today it's a pretty simple signing screen we have just a text and a button that says sign in with Google and when we press this button we're gonna get this alert that it's gonna ask the user for permission to open a web browser inside this application after we accept that permission we are going to be redirect to this Google sign-in and then after we uh granted the permissions we're gonna get the information of the user and the token and with that information we can um get all the information like name photo email and everything we need from the user in order to sign him sign them in right and as you can see it's this is pretty much all the functionality that we are going to be having in the application but the important thing here is to learn how to integrate these provider now before we start guys as you know if you have seen all another of my videos this project is going to be available in my platform called with that.dev you can go to the projects and just search for sign in with Google if you want to copy the dependencies that we are going to be using and if you want as well to check the code on GitHub or if you prefer just download this ZIP project you can just press download and you're gonna download the the project all right as well you can find a link to the YouTube video and pretty much all the projects that we have in this Channel and more alright after that if you want to check it out my react native course if you want to be a master in react native you can check my react native course uh just keep in mind that this course at the moment it's in Spanish but I'm working to translate it to English all right so now uh now that you know that let's start with this tutorial the first thing that we're gonna do is create an application using Expo like I said at the beginning of this tutorial we're gonna be using Expo with JavaScript so I'm going to run the command Expo in it and for the name of my application it's going to be tutorial login here we're gonna select the the simple template the blank template and now let's wait until the dependencies are installed after the project is ready we can access to the carpet that we just creating put in CD and then after we are in the carpet of this project the folder of this project sorry we can start installing dependencies that we are going to be using all right let's go ahead and go again to Google better and we can copy these dependencies but before we start copying these dependencies I want to mention something that I think it's really important and this is this this way that we are going to implement designing with Google is not the only way that we can implement it there's many ways especially with Expo but as you can see this Google sign-in that I have here in the documentation of Expo it's already deprecated I don't recommend that then that you use this Google sign in because it is deprecated which means that no one's no one uh maintain this anymore okay so we're gonna be using Expo out sessions for this tutorial and as you can see here um they gave us this link to go to health session and it's the recommended way to implement any provider using especially Expo all right so I'm gonna go ahead and start by installing this dependency this dependency using Expo out session once that's done we can install export web browser as well and the reason we need export web browser it's because we want to open the browser inside our application if you remember the demo we open the window to Grant the ACT granted the the axis uh using Google and in order to keep the user inside the application we have to use the export web browser all right now we are going to need as well Expo random and Expo updates all right and those dependencies are pretty much just to uh codependencies you know that export authentication needs in order to work correctly after we have that done we can go ahead and go to our app Json and as you can see here my name is tutorial login and my slog is tutorial login as well down here on iOS we're gonna need to add a bundle identifier and the reason we need to do this is because we need to build this application in order to test these um this um this integration with Google because we need to redirect the user once the user opens the the browser to allow the Google allow and provide information from Google to sign in we need somehow to redirect this user back to our application and the way we're gonna do that is gonna be with the bundle identifier so in our app Json we're gonna need to create a bundle identifier the bundle identifier it's gonna be like a domain like the application it's a website but we are going to start saying com then dot in my case it's gonna be called with Beto and dots and finally we can add the name of this application in this case it's gonna be tutorial login but you can replace this of course with your name uh with the name of your application and for Android instead of having bundle identifier we're going to have a package just like this it's going to be the same as the bundle identifier for iOS once we have that we can um go ahead and go to Google Cloud and activate the service that we're going to be using as a developer because we need to identify ourselves uh pretty much tell Google that we are going to be using information from other users so for that we're gonna be we're gonna need to create a project in Google Cloud so go ahead and create an account if you if you don't have one already if you already have one Google Cloud account you just have to create a new project um this is the screen that you are gonna get when you enter for the first time here as you can see I have a login test but if you don't have any project you can just select this drop down window and create a new project um up here with I'm going to create a new project and for this project I'm gonna name it something like tutorial login and you can choose an organization if you have one for now I'm just gonna leave this as it is and I'm going to press create foreign and once that's done we can select this project you gotta make sure that you select the project that you are using and you know that you have select this project because if you um go ahead and and press the drop down tutorial login you're gonna see that the this check arrow is going to be selecting the project that you are using at the moment okay so now that you have this project let's go ahead and open this menu and go to apis and services here we're going to press credentials because we need to create a credential in order to authenticate us to Google asset developers right so now let's hit create credentials and the credential that we want to create is going to be oauth client ID select this client ID and we need to create a consent screen in order to have this functionality in order to activate our health services so you can press in this blue button that says configure consent screen or you can go um to the menu again and search for consent screen this is very simple you just have to pretty much put the information that the user is gonna see when they are logging in into your application okay so I'm going to select external in this case down here for the user type and I'm going to hit create down here here we have to put the information of our application as you can see on the right side of the screen we have um like design or this style of how this is going to look all this information that we are providing here how the user is going to see it so for the app name of my application I'm just gonna put the name that I have here at inexpo which is tutorial screen user support email you need to provide an email for in order to users to contact you and all that and that's and that's uh required field so I'm going to select my email you can choose a logo as well if you want to add a logo for your sign-in screen just keep in mind that it has to be 128 pixel pixels for 128 pixels we can leave the privacy policy in terms of service blank for now because this is just a test but if you are going to deploy this I would recommend that if you have a privacy policy in terms of services you include them here those links okay now an important thing here we need to add an authorized domains and uh we're gonna do that later I'm just going to add the email that that I have here and now let's hit continue save and continue and we don't need to add anything here if you want to add test users just add them you can skip as well this this part if you want and now that's done we can hit back to dashboard now we can create our oauth Authentication once we have this consent screen already set up now let's go back to credentials and here I'm going to create a new credential very much same thing that we were doing or else client ID now we can create a client ID here it's important that you select web application because we are using react native but when you are gonna deploy this you need to select IOS and Android as well okay so for now I'm going to say web application because we're using the web browser okay now um down here I'm gonna put a name I'm just going to say web and for the authorized JavaScript Origins I'm going to add a URI so let's um hit add URI and here I'm gonna add the URI for the authorized JavaScript regions in this case we're going to paste out.export.io and this is a link that export provide us when we are using the sign in with Google and for the authorized redirects we need to add their URI for our application or uh in order to go back to our application once the user agreed to share the information we need this URL and that's what I was mentioned at the beginning of this tutorial so here we're gonna need to add health.export.io slash at Beto Modano and Beto Modano it's my Expo username so you make sure that you are using your username of Expo and after that we need to provide the name of our application and this name is gonna be tutorial login in this case sorry and now that's how uh Google is gonna know where to send the user once the user agrees to share their information with our application okay so you make sure that you copy this lock okay in this case the name and this log it's the same but you you want to copy this log make sure you copy the slog and paste it here once you have that you can hit create let's wait a little bit and now uh we have this client ID specifically specifically for web and we have our client secret uh you guys make sure that you don't share these Keys especially if you're gonna upload this project to GitHub but yeah once you have this client ID you can pretty much just copy it and we're gonna use it later in our code so what I'm gonna do now is that I'm gonna go back to my app.js and I'm gonna paste here my um my key my client ID for web okay now that we have that we can press OK and now we need to go back to the Google Cloud console hit create credentials again uh select or else client as well and now select iOS we are gonna need one of these for each platform remember that when we are using Expo we can create apps for web for iOS and for Android that's why we need to identify each of these applications with Google okay in this case for iOS we're gonna need the bundle identifier so I'm going to copy this and paste it here now we need the app store ID um of course we don't have that at the moment so we're going to leave that blank and hit create okay once that done we're gonna get the client ID specifically for iOS so we can go ahead and copy this go back to our code and here in the app.js and I'm going to create another comment say in iOS and I'm going to paste this key now we need to do this one more time for Android so I'm going to put here Android let's go back to Google Cloud console hit OK create a new credential or alph client ID and this time select Android package name is going to be the same as the bundle identifier for iOS so we can simply paste it um we go back to app.json we can pretty much copy just to make sure that we have everything okay and here we need this certificate fingerprint this is an important thing for Android and it's a required field so in order to get the certificate fingerprint we can go back to our project open up a console and because we are using Expo we can get this um this fingerprint by running the command export credentials manager uh selecting the platform Android specifically with the flag B and here we're gonna select as you can see they are asking us if we're currently using veto medano if we want to select it and we want to say yes and then we can select here um update upload keystore um this is going to ask us now if we want to upload this keyster and I'm going to hit generate new keyster finally select go back to experience overview and this should print the fingerprint or that we need here as you can see Google certificate fingerprint here for specifically specifically for this project so go ahead and copy this fingerprint make sure that you are selecting the fingerprint here copy that go back to Google console and I'm gonna make this a little bit bigger just to make sure that I'm copying it um the way it is and paste it here okay once that's done we can go ahead and hit create down here let's wait a second and after that we should be getting the last client ID that we need this ID is gonna be for Android as you can guess okay I'm gonna close this terminal for now go back to app.js and paste the uh click the client ID for Android okay now we have these three clients authorized to use Google signing with Google in our application using react native okay so now we can start in integrating the logic using this credentials okay so the first thing that I'm going to do in my rjs it's going to be import all as web browser from Expo web browser that is the dependency that we installed at the beginning of this video and after that we also gonna need to import all as Google from Expo out session okay just like that we're gonna say here slash and here we need to select providers Google now then down here I'm going to create a function that is gonna it's gonna be like a listener in the case the user wants to authenticate so by saying web browser Dot may maybe completely Health session we can listen to the event when the user is trying to sign in right with Google and we are using a web browser we are also gonna need react so I'm going to import all as react from react because we're going to need to manage some state and down here in our application I'm going to declare a variable call Access token okay this access token it's going to be the token that we are going to receive after the user granted access to our application okay using react user State and if and I'm going to initialize that to be null okay once we have this variable we are gonna need um to have another variable to save the user information using react users date as well I'm going to call it user and I'm going to initialize it to be no as well finally we need to get the information of the user and for that we're gonna be using um this Hook from Google so I'm going to say request response and prompt async and all these things we are going to extract them from Google that we are importing up there dot use ID token alph request okay and this is gonna take the client IDs as you can see here when I open these parenthesis This is Gonna Take This is Gonna help us to load an authorization request with an ID token okay so we're gonna need the tokens that we have up here we're gonna we're gonna say client ID and for the client ID it's going to be the web client ID that we have up there to identify each of those we need to paste in in first in the first case the client ID is going to be the web ID the web client ID that we have up here then we can specify the iOS client ID and we can simply copy the the client ID that we have for iOS here and we're gonna do the same for Android so I'm going to say Android client ID equal to this ID that I have here okay perfect now that we have that we can simply create a button and prompt the async function whenever the user press this button and try to to log in the user okay so down here I'm going to create a use effect because I want to run some logic whenever the response and request changes because if the user prompts they or or tries to sign in with Google uh we're gonna be listening for the response to change right if the response change we're gonna set our state and we're gonna log in the user so inside this user effect I'm gonna create [Music] um I'm gonna check if I have a response from Google okay I'm going to say response and question mark DOT type okay if the type is equal to success success okay success we have various types like cancel dismiss error locked opened but the one most important is success now if we have a response we can set the access token using the set access token using reactive state and we're gonna get the access token from the response Dot authentication dot access token and this token is going to help us to get the information from the user I'm making a request to the Google service okay nice now that we have this here we can go ahead and create another function because we want to make another request like I said when we have the access token so this function is going to be called Fetch user information and inside this function we're going to make a request to the Google services right so I'm gonna be using an API from Google to get this information and this function is going to be async now let's create a variable called let response equal to a weight using fetch I'm going to hit this endpoint that I'm going to paste here oops um let me paste that again here okay this is the endpoint Google apis.com user info version 2 slash me okay now this endpoint needs the access token in order to give us the information that we need from the user so we can open curly braces here and specify the access token so I'm going to say headers open query braces and say it out authorized authorization equal to and I'm going to put tactics Bearer uh access token like this okay now down here I'm gonna declare a constant called user info equal to a weight response dot Json because we're going to get a Json after we get the response so we need to say response.json and now we can set our user information by calling set user and and set it to the user information okay so now when we get this access token using this use effect we can call this fetch user info right away so here I'm simply gonna say if we have an access token uh we we're gonna try to get the user information right so I'm gonna say fetch user info when I call my function just like this only if we have an access token okay because we need the access token to get there the response perfect so now we can add as a dependency for this use effect their response and the access token so whenever the response or access token changes this use effect is going to run now let's go up here and start importing some things that we're gonna need for for the style of this application I'm going to import an image and attachable opacity because I'm going to be using an image for my Google signing button and that's pretty much all we need to import so now we can go down here and create a component called show user info this component is gonna show the user info as you can guess and we're gonna be using I mean showing the user info only if we have a user in the state right so that's why I'm saying if user then return and here we can have this simple view that I have here pretty much just showing a text that says welcome and the username user.name and user.picture for the image okay we're going to be showing this information only if the user is logged in okay so now inside this app we can say we can have another validation if we have a user we're going to show this component called show user info perfect otherwise if we don't have a user we want to show the the signing button right so I'm simply gonna say if user equals no then we want to show the signing button and I'm going to paste again this this simple simple UI which it's just a text that says welcome then we have the the important thing that is this touchable opacity whenever the user press this um this double opacity which is the image from the login button we are going to prompt the async um we're on a prompt the the web browser okay and um I'm seeing that I have a mistake here because this prompt it's prompt async and I have I had it had a typo right there so be careful guys that you are saying prompt async okay now that that's correct we can save this and we can tried it I think it's ready to work now if if I hit save now uh I'm getting this error because um my image oh yeah I'm not importing my image or something is wrong with the root of my image yeah yeah I change the name of my image so once that done as you can see uh here everything is working so now we can test this out now as I mentioned in the beginning guys we need to build this application in order for this to work but I'm gonna try to sign in with Expo using Expo as well and you're gonna see that we're gonna get an error here we're gonna press yes and we're gonna be redirect to the signing with Google page after we clicked on our account we're gonna get this error because we cannot go back to the application because we we are we don't have we haven't built our application so the bundle identifier doesn't exist yet so now I'm going to open a new terminal and I'm going to run the command Expo per build to build this application for Android and for iOS okay this is going to take a little bit of time but after that's done we are gonna um we're gonna be able to use sign in with Google okay now it's installing the application on my iPhone tutorial login as you can see on the right I'm gonna click open and this application it's uh it's a project uh built okay so if I hit continue this time we're gonna be directly going to sign in with Google and this is going to be working perfectly fine because we have the bundle identifier and the application nodes where to send the user after the user signs in or after the user agrees to share their information now let's try this with Android and for Android you can create an APK in order for for these to work but at the time that I'm recording this video um this the redirect from from the screen where the user agrees to share the information with us it doesn't work in on Android we can redirect backed to to the application and I don't know why I think that it's um an error with the Expo package or something like that because it's impossible to retreact I tried it but I'm not sure but anyways I'm going to show you guys how you can create this APK to try to do this on Android as well so after you create your APK I have here my APK I'm gonna just drag and drop it into my Android emulator and as you can see it's installing just like that okay so now let's wait a little bit until this is installed if you don't know how to create an APK using Expo you just have to um see the documentation it's super easy now let's try this on Google I mean on Android it's working pretty much the same thing the same way that it works on iOS but after we click on the on on the information or the account that we want to use to sign in in this application we are we are unable to go back to our application and I don't know why I don't know if this has to do something with the fingerprint uh but yeah it doesn't work for me let me know in the comments if this works for you or let me know in the comments if now there's a fix for this issue as well I would love to hear what's going on but yeah the good thing is that it works with iOS but yeah this is the screen that we get as you can as you can see it's just loading and loading and nothing happens and I don't know why okay but at least works on iOS if you want to implement this on iOS after a moment we are redirect to Google so we have to close the browser because we couldn't uh sign in we couldn't get information from the user okay but yeah that's that's pretty much guys all I wanted to show you for this video I hope you liked it I hope you learned something new and please give it a like give it a like to this video if you like it leave a comment don't forget to subscribe and activate the Bell to get notified when I upload a new video okay don't forget to go to kobe.deck .com learn if you want to check out the react native course or if you want to download this project go to codibeto.dev Project okay that's all I have for today guys and I'll see you in the next one thank you bye

Channel: Code with Beto

Views: 39,473

Keywords: react native, sign in with google, google sign in, expo, tutorial

Id: MBMWiTsqnck

Length: 33min 52sec (2032 seconds)

Published: Tue Nov 08 2022