Sign In with Google | React Native Expo | Tutorial 2023

hello everyone welcome back to code with Beto it's been a while I'm super excited to be here back again and in today's video we are going to learn how to integrate sign in with Google in to your react native application using Expo so let's see what we're going to be doing here um as you can see here I have a demo of this application and this is going to work for web IOS and Android we are going to learn the three of them and let's start by checking if this is working so I'm I have um the information of the users saved locally but I I just removed it and if I now try to sign in with Google you're going to see that it's working on Android and now let's do the same on iOS um yes it's working uh let me just select my account and lastly in um web and as you can see it was super quick because I already had my account there I already signed in before and yeah this is pretty much what we're gonna be doing guys super simple UI don't worry about that the functionality is going to be uh just just to add the functionality of signing in with Google right now let's start as always guys if you want to download the resources for this project you can go to codewebet.dev and if you click here and projects you're going to find all the projects that we create in this YouTube channel you can click just whatever you want um even we have this Facebook login as well if you want to integrate Google and Facebook you can find this video in this channel as well you're gonna find the code down here if you are interested and as well I invite you to check the react native course it's been and translated to English so the first two sections are available now you can see that you have this button of English and you can enjoy these lessons in English right okay and that being said now that you know that let's take this out of the way and start creating this application okay guys so the first thing that we need to do is just open our terminal and create a new export project so here in my desktop I'm going to say MPX create Expo app and the name for this application it's going to be um tutorial Google for example and hit enter and let's wait a little bit until this is done and the project is ready guys so we can access the new folder called tutorial Google Now that we are in this project we can open it on Visual Studio code by running the shortcut the code Dot and here we have our new project guys so the first thing that I want to do is actually stop by start by installing the dependencies that we're going to be using we're going to be using Expo out session to manage the signing with Google so we're going to need to install Expo elf session and Expo crypto because it's a per dependency of this um this library and as well Expo web browser we're going to use Expo web browser to have a actually browser inside the application so we can sign in using Google without leaving the application right and as well we're going to need react native web because we want to show that this is to work as well on the web so we are going to need to install react native web because we are using react native web we are going to need as well react Dom and we're going to need as well Expo webpack config okay Expo uses webpack to build the the web application so we need to install it as well and finally guys we're going to need react native async storage and this is optional I'm going to be using async storage to save the information of the user once they sign in so we don't have to sign in every time we reload the application right now these are the dependencies that we're going to use if you don't want to copy them manually you can go to code with better.dev and in this project you're going to find these dependencies so you can go there and just copy them now I'm going to hit enter let's wait a little bit until this is done so we can continue okay guys so the dependencies are installed and now we can actually start creating our project in the Google Cloud if you don't have an account in the Google cloud cloud I'm going to bring here my browser so you can see what I mean so you're gonna need a project here in Google Cloud if you don't have an account you can just go to Google cloud and create one and here as you can see I have these two projects I'm going to go ahead and create a new project just to show you how you can do it if you don't have one I'm going to name this project tutorial and for the organization I'm just going to leave it like that right now let's hit create and this is going to start creating a new project in the Google Cloud so we need to do some things before we can actually start integrating the code in our application so the project is ready as you can see here and I'm going to click on select project and now as you can see here in this select we have the tutorial that we are using now we are going to need to create an oauth client ID for our applications in this case we're going to have three one for web one for iOS and one for Android so let's go here to the navigation select apis and services and hit enable API and services actually clicked on oauth cons no sorry let's go back to enable apis and here you can click on credentials once you are here on credentials you can click on create credential up here and we are going to need a oauth client ID so let's create one and yeah like I was I'm gonna say before we need to configure a consent screen what is a consent screen a consent screen is basically the screen that the user is going to see when he is trying to sign in with their Google account into your application so we need to provide some information about our consent screen here and for this case you can select for example the user type in this case you can select internal only available to users within your organization or external which is available to any test user with a with a Google account so I'm going to hit external hit create and as you can see here let me just make this a little bit bigger so you can see a little more this is basically the consent screen it's the screen where our name well the application name shows as well as some information about the developer and what information we are getting from the user right and here they select allow or cancel so the app name is going to be a Google tutorial in my case tutorial like this and email support we need to provide one it's going to be called with better.dev gmail.com you can specify a logo for your application app domain and all this is optional I believe um yeah so let's scroll down let's close this and here we're going to need to add another email so I'm going to say outload.com like this you need to provide a developer contact information save and continue and we have an error here it seems that error saving your app down here we need to provide a developer contact information so I'm going to say that so actually code with beto.dev gmail.com and hit save and continue okay now we need to provide some Scopes here so I don't think we need to do anything crazy here just save and continue we can add test users if you want want to save and continue and just check that everything it's okay here and you can hit back to dashboard or we can go now to the credentials section here and create a new credential select or off client ID now we're going to be able to get into this screen because we already have a consent screen and here we can select the type of application that we are going to be creating let's start with the easiest I think it's going to be web application which is going to be for the web obviously now down here we need to provide some URLs and this is going to be the URL for application so in order to get this link we need to run this project on web so we can see the link right so I'm going to clear my terminal here so I'm going to open my terminal and I'm going to run the following command which is going to be an npx expo star web and one important thing here is that we need to pass the flag https hit enter and I'm going to use this board instead because I don't know why I'm using the other one and now we can press W to open on weft so I'm going to press w and this is going to open a window let me bring the window here I'm going to put it here and as you can see we have just the basic configuration if I go to my app.js and if I change this text for example I'm gonna say code with Beto hit save and it's reloading so this means that this is working and I can make this super bigger so we can see what's going on okay guys so now we can see that this is going to be our link so I'm going to say localhost 19006 and this is the same link for the authorized redirects so let's add it here and now that this is done let's hit create of course if you have this application deployed you need to provide your your domain and the link for your web application right okay and here we have the first thing that we're going to need which is the client ID so I'm going to copy the client ID here make sure that you don't share this information of course and yeah we can come to the app and just paste here let's say web and paste it right we're going to be using it in a moment uh actually let's just um start by doing this but I'm going to stop my server and let's actually get the the ideas for IOS and Android as well so in order to get the identifiers for IOS and Android I'm going to close this one by pressing ok we need to create more credentials right so let's hit another oauth client ID this time is going to be for iOS and for iOS we're gonna need the bundle ID so the bundle ID we can generate it if you don't have it already in your app.json this is it because this is a new app here in my app Json you can see that in IOS and Android I don't have a package and I don't have a bundle identifier so we can run the command npx Expo previewed and what this is going to do is basically just prepare this project to be ready for production so let's just give the defaults in this case it's going to be the package name for Android which is going to become tutorial Google hit enter and here we have the iOS identifier which is going to be the same hit enter and we're going to have these fields here it's basically what we are doing here and as well we are creating the folders for the projects on Android and iOS okay so it's installing cocoapod for iOS and while this is done we can close this Explorer and just copy this bundle identifier and go back to Google and paste it here this is going to be the bundle identifier for my application now we can scroll down and hit create this is going to give us the client ID for iOS let's copy this and go back to the app.js and paste it here so I'm going to say iOS equal to the following now we need Android and let's go back for to get the Android one so hit OK create a new credential or else client ID select in this case Android and the package name is going to be oops it's going to be the same that we have for iOS you can check it out here for Android so I'm gonna copy this and go back to my Google Cloud platform and paste it get it now we're gonna need a sha one certificate fingerprint and in order to get this from Expo we need to run um okay guys so in order to get the Sha certificate for Android we need to run the following command which is going to be npx Expo credentials uh manager hit enter and this is going to be without the npx I believe I'm gonna run it like this and this is going to ask us for which platform so I'm going to select Android and hit yes okay and here I believe I need to select update and generate new keystore I believe let's wait a little bit this is going to generate a new credential and let's go back to the experience overview okay now here we have the sha1 or Android so we can copy this and now we can just press Ctrl C here just to get out I copy the Sha and I'm going back here and I'm going to paste it okay so let's close this now hit create this is going to create the client ID for Android copy it and go back to app.js I'm going to close my terminal and here I'm going to paste this ID okay this is the most uh difficult part I believe getting these IDs for for the application that we're doing but now that you have this we can actually start creating the code for this application or we can actually start by implementing this application okay so the first thing that I'm going to import here is going to be web browser and this is the web browser that I mentioned before that is going to be a browser inside the application so we don't have to leave the application to sign in this is just going to work for Android I mean for iOS I believe and we can initialize this listener by saying maybe complete out session and close like this now we can start actually as well importing all as Google and we are going to import this from Expo out session and we can select providers and we have two providers here I'm going to select Google okay I'm going to save the information of the users when they sign in so we don't have to sign in every time and for that I'm going to use async search we installed this dependency at the beginning and I believe this is all we need for this application I'm just going to import as well here all ads react from react so we can use some state to say the information of the user and let's start by creating one variable that is going to be called user info and set user info using react use State cool so let's initialize this to be no so if it is no we don't we we need we know that we don't have a user right sign it in okay guys so now inside this application we can actually start using a hook that comes with this uh provider Google that is going to allow us to sign in with all uh in our in all of our applications using the applications ID so this Hook is going to return us three things I'm gonna say Google dot use of request and this use out request is going to take some things here and the things is going to be the client ID for each application so we can just copy this information that we already have up here and actually I'm going to copy these three and paste it here and now we can actually start removing the comments of course we need to add this with um string like this so we're going to have Android we're going to have IOS client ID and this is going to look something like this and finally web line ID the web client ID is going to be this one so let me cut it and paste it here cool now hit save and basically this is all the information we need this is how this Hook is going to know which application they have to load when they open the web browser to sign in and now this is going to return their request the response and as well a function that is going to trigger the web browser right so it's going to be called prompt async okay hit save now that we have these three things we can actually prompt the user to sign in with Google by creating a button here so I'm going to say button and the title is going to be signing with Google when they press this this sign in with Google we want to prompt so we're we're going to call this function prompt async so if I hit save now and a Reload here of course I need to run this again so of course I need to run this again I'm going to run npx Expo start web https and yes reload in this side and as you can see we have this button signing with Google now let's see if this is working sign in with Google let's press it and we get this model here and yeah it's working and yeah it's working as you can see guys but we are not handling anything even though if I hit in this account we are not not handling the request need the response right so let's close the terminal and go back to the application and actually handle this um these request and response okay okay so what I'm going to do here is just create an async function that is going to basically handle the sign in so I'm going to call this function handle sign in with Google for example you can name it as you want and this function it's going to basically check if we already have a user locally remember that we are going to be using async storage so I'm going to say wait async storage dot get item and this item it's going to have the key user of course it doesn't exist yet we are going to create it later but in the case that somehow this user exists I'm going to say user equal to in the case of the this user exists we don't want to sign in the user or we don't want to make the request to the API of Google to get the information of the user because we already have the information right so I'm just simply going to say if there is no the user we want to make the request to Google otherwise else we want to use the information that we that we have saved locally in the device so so we can set the user info set user info equal to this user so we can set the user info by saying Json Dot ours and we're going to Powers the user and the reason we are saying parse is because this user is going to be an object and we are basically transforming it into a JavaScript object right cool so now the logic the important logic here is going to be whenever there's no user in that case we want to make a request in this case we want to make Edge request so I'm going to copy this function that I have here basically let me just delete this token well let's just leave it like that we're going to pass the token as a parameter if we don't have a token we're going to return otherwise we're going to continue and try to make a fetch request to the Google API endpoint user info version 2 that slash me and we're going to pass the token cool so if this is correct the token is correct we're going to get back the response which is going to contain the information of the user so we're grabbing the user here and we are going to save the user locally so next time we reload the application we already have the information inside the user key right so we are going to say stringify user and update the user State Hook by saying set user info equal to user cool so now inside this handle sign in with Google if there is no user locally we want to get the user info and this is an asynchronous function so we can say a wait for the response here but if you remember this get user info it's going to take the token so we need to abstract the token from the response so if you remember we have this response here that we can use from the hook use out request and this response is going to contain a type so I'm going to say type we can check double check here if the type is Success it means that everything went well in that case we want to get the user info and we can pass the token here by saying response um sorry response dot authentication dot token dot access domain okay so with this token we are gonna go and hit this endpoint and get the user info cool now let's hit save and now we need to run this function whenever this prompt async is triggered so in order to do that I'm going to create a use effect so I'm going to say react.use effect use effect is going to take two parameters the first one is going to be this function and the second one is going to be an array of dependencies inside this array of dependencies we want to add a trigger to round the functionality that we are going to have inside this function so inside this function we want to handle the sign in with Google and the trigger for this is going to be the response so whenever the response changes that means that the user has sign in with Google and we or at least has tried to sign in with Google so we want to run this function and and this response is going to trigger the use effect and this use effect is going to try to get the user info if the response type is Success if it is Success we want to get the user info save it locally and update the state got it now let's hit save and just to make sure that this is working we can come down here and just say json.stringly fi and we want to stringify the user info this is going to basically put the information inside a string and I'm going to put it here hit save and well as you can see here we have some information but I'm going to create that that information is because the demo that I showed you but I'm going to create another button that is going to be called delete local storage delete local storage and whenever we press this button we want to say async storage dot we can say delete I believe sorry you can say remove item and the item that we want to remove is going to be user so let's hit save let's hit delete local search try to reload okay and we have no that means that we don't have a user cool so it seems that this is working let's try to reload again okay so let's try to reload again and try to sign in with Google as you can see we have this screen I don't know if you can see it well but yeah I'm going to select my um my account and once this is done you can see that we have all the information of the user back into the application of course it's looking ugly but what we can do here is just to come here into this stringify object and say no and give it a space of two and now it's going to look a little less ugly we can make this smaller so we can see everything and yeah so this is working just like that on web now let's see if this is working on IOS and Android I'm going to stop this and I'm going to close now this um window because we already know that it's working so I'm going to clear this terminal and in order to test these guys we need to provide a scheme this scheme is going to help us to re re redirect the user back to the application once they sign in okay so before we do this guys on IOS and Android we need to add a scheme or application this scheme is going to look something like this in this case it's going to be my Google app but you can name it as you want for example you can just paste this log for your application or I'm just gonna say bet just to prove that you can write anything in this game uh yeah so this is going to be like the thing that is going to allow us to redirect back to the application once the user signs name signs in okay so let's hit save and we are going to need to build the application in order to test this okay so for iOS we're gonna need to run the command npx Expo run iOS this is going to take a little bit and this is not going to work if you are using Expo go you need to make the build by running this command in order to test this okay so let's wait until this is done and and try to see if this is working okay I think this is done almost done as you can see it's opening my iPhone 14 pro and I get this alert that um you know that Expo wants to open tutorial Google so I'm going to say open and this is loading so let's wait a little bit until this is done and there we go we have no because we don't have any user yet and we have these buttons and if I get out of this application you can see that this is another one this is tutorial Google which is the one that we are working on so now let's see if this is working by pressing sign in okay and let's try it again okay something is wrong here I don't know why this is not working and as you can see I'm getting this we're back I don't know if that has something to do with this front facing I believe if we do it like this maybe the arrow goes away I'm gonna try that again hit sign in with Google yeah so that was the error make sure that you write these um this Handler like this and now let's hit continue and it's actually working so guys make sure that you write this function like this now let's press this account let's see if we get reload back yes so it's working we are getting the information of the user just like that and now we need to see if this is working on Android to do that we're going to need to create the actual build for Android so it's going to be pretty much the same command npx export run but in this case it's going to be Android hit enter and this is going to build application so let me just drag my Android device here um and I'm going to put it here maybe and as you can see guys it's loading it's loading the new application and let's wait okay we don't have anything let's sign in with Google we are redirect let's wait a little bit and there we go as you can see here we have tutorial test it's the name of the application that we provide on the Google cloud and if I press on Beto medano at gmail.com we should be redirect back to the application but I believe my memory is full so what I'm going to do is just delete an application here um so I'm going to delete this one I don't know why I'm running out of memory all the time in this device let's try to go back again sign in with Google let's see let's wait okay okay let's try to reload this application again press a here this is going to open again the application sign in with Google let's wait a little bit hopefully it's going to work this time sometimes you just have to reload everything as you know um and for some reason this is not really redirecting back to the application what I'm going to do here is just try to make the build again but I'm going to delete the application sometimes these weird bugs happen don't worry guys we are going to fix it okay now let's run this again let's see if this works and while this is working or building we can actually add some styles to this screen so I'm going to copy some styles from my application here and paste it here I'm going to remove this oops okay I'm going to remove these turn yep so hit save sign in with Google let's see if this works I don't know why it's making that sound making a sound I believe something's wrong with this device okay guys so I was trying to to discover what why is not working on Android and I just leave my simulator like that for for like a minute or two and then I press on sign in and this is going to take me back to the application I believe so I think it has to do with my simulator it's a bit low and as you can see yeah it's working now I didn't do any changes I just tried to delete the Android folder then I changed the scheme as well then rebuild the application and it's still the same issue but if I wait a little bit so for example if I remove here the local storage and reload the application try to sign in with Google and if I press right away here is not going to do anything but if I leave it like that for a minute or two I don't know if it's my emulator or it's my computer I don't know if I leave it like that it's going to work in a minute or or or two in a minute or two so let's let's just wait just to see if if this works just for science yeah and and now I it let me clicked and it's loading it's redirecting me back to the application let's wait a little bit let's see if it doesn't break yeah and it's in it's working so I believe it's in my it's my emulator but yeah hopefully it's working right for you and yeah this is basically what I wanted to show you guys I hope you like this video I hope you learned something new please give it a like subscribe if you haven't already leave me a comment down below if you have any questions any suggestions down below it's a place to do it and don't forget to go to codibeto.dev and check the react native course I'll see you in the next one thanks bye

Channel: Code with Beto

Views: 55,733

Keywords: react native, sign in with google, google sign in, expo, tutorial, expo-auth-session

Id: BDeKTPQzvR4

Length: 36min 7sec (2167 seconds)

Published: Sat Apr 22 2023