React Native Google Sign In with Expo | React Native Login System #5

hello there in this episode of to the point code we'll look at how to set up google sign-in in our application this is the fifth part of our espor react native login system series so let's get started we will implement this using the google sign-in button that we have on our login page so let's create a handler for this so how this will work is that when we trigger the handle google sign-in function the user will be directed to a page to login with the email address once the user logs in with the email address the details of the user will be made accessible to us for using our code so from there we can decide whatever to do with the details whether to store it in our database or just use it temporarily in our application now to continue we need to install a package from expo so let's visit the documentation [Music] so now we copy the command ahead to the command line to install it we are installing expo google app off [Music] [Music] once the package has installed successfully we need to create a config object this object will contain the client ids of all the platforms that you want to run our application that is if you want to run your application on ios and android you need to get client ids for android and also ios so to get these ids we need to visit the google console and create our application so on the documentation page you will get the link to the google console [Music] i'm duplicating the tab so that we keep the documentation page [Music] so once we are on the page we need to make sure that we have logged in after we have logged in we need to create a project [Music] for this one i'll call my project flower crib [Music] i'll leave the organization as blank [Music] [Applause] [Music] if you have multiple projects you have to ensure that you have selected the correct project [Music] now the first thing to do is to configure the consent screen so we will do that for the user type we'll choose external because that's the only option you can actually choose then click on create now for the app information we put in details about our app for the name i'll put flower crib again [Music] now for the email you put your email there [Music] if you have a logo for your app you can upload it here also if you have an app domain you can add it but for now i'll leave everything else blank for the developer's contact information you can once again put your email address here once you've done that you can save and continue you can also skip this part now over here you can add some users who will be testing the application if you leave it blank you will still be able to access your application so for now i'll leave it blank now you are presented with a summary and you can either edit or go back to your dashboard [Music] now click on credentials once you're on the credentials page we click create credentials and we'll choose oauth client id now for the application type we'll be creating for both ios and android so let's create for the ios first now for here you can decide to edit the name of the application [Music] now for the bundle id let's visit the documentation for the details from the documentation we see that we have to copy this for the bundle id [Music] if you have any other details about the application you can add them here otherwise we click on create and we see that all client has been created and now you are presented with your client id so all you have to do is to copy and go back to your code editor back in the code editor you add this to the config objects and this will be ios client id [Music] and i'll wrap this in the back text which is the same as the quotes now back on the credentials page we can go ahead to create the credentials for the android [Music] so for the application type we choose android and we do the same thing as we did for the ios [Music] for the package name we go back to the documentation [Music] now we need to provide a certificate fingerprint so for that we go back to documentation and copy the command here once we have it read to the command line now we'll press the command here and wait for the response [Music] now we copy the output that we have here and paste it in a browser so back in the browser we paste the value we just copied now we can go ahead to create our client id [Music] now we copy this and that's our client id so we go to the code editor and add that as our android client id [Music] now there is a last property we want to add to the config and that's the scope that will determine the kind of data that we'll get from the google sign-in and the values are profile and email so we added to our configuration object [Music] we are good to proceed so to start with we import all as google from expo google app earth so do it at the top of the component [Music] how to trigger the login we use the method google.loginasync and go ahead to pass the config object to it [Music] this will return a promise [Music] [Music] let's go ahead to handle the catch [Music] [Applause] [Music] we also want to set the error message so let's use handle message [Music] now the result that we get from the promise contains a type and also a user the type gives us a summary of whatever has happened it's either a cancel or a success the success is when the user has been able to log in successfully also the exact provides us with an object which contains all the details about the user so we can distract that from the results [Music] so if the type is success we want to go ahead and navigate to our home page i also want to display an error message to the user saying that the google sign-in was cancelled [Music] so before we move to the welcome page we can display a message briefly and we can use that timer to delete the movement slightly [Music] so we are moving to the welcome page once again we want to pass the data to the welcome page or with google sign in we get more than just the username and email we get all these details that we are seeing here including a link to the user's photo so what we can do here is that if the user signed in using google sign-in we want to change the avatar on the welcome page and replace it with the user's photo so for now let's just structure the values that we need from our user [Music] and for the timeout we'll pass a delay of one second [Music] now just like we did for the login button when we click on the sign in you want an activity indicator to be showing so let's go ahead to create a state variable to monitor the state of the google sign-in over the top here i forgot to bring us [Music] record is variable google submitted and the initial value will be set to false now let's go to the bottom of the page [Music] so if google submitting is false we'll return our regular button otherwise we'll return the button with the activity indicator [Music] let's copy the activity indicator here now once you have done that we need to toggle the value of the google submitter so we do that in the handle google sign-in so once the button is pressed and we enter this function you want to set google submitting to true [Music] once we are done with the den block we want to set google submitting to force and also once we are done with the catch block you want to set submitting to force [Music] so now we need to pass this function to the impress property of the button so we change the unpressed to handle google signing now let's save and connect our application to the metro server as we can see our changes are not reflecting [Music] now clicking on the google sign-in button we see that activity indicator is showing and you are redirected to a page where you can sign in with google so the signing with google doesn't work very well with my emulator so i'll demonstrate it to you using an actual device but first let's make some few changes to the welcome.js file so as we said google provides you a link to a photo so we want to check whether the link to the photo exists if it exists we'll use that instead of the flower that we have on our welcome page so in addition to the name and email i'll take in the photo url now create a variable to store the link to the avatar that we'll use [Music] now since the linked out to be provided by google will be an external link we need to pass it as a value to the uri key in an object [Music] so we replace the sauce here with avatar image this length should be image 1 instead so this should work fine now let's move to the demonstration on the actual device so on opening the app on an actual device i noticed that there is another background behind our app and that is due to the keyboard avoiding wrapper that we created so quickly let's change the background of the keyboard avoiding wrapper we'll find it in the components directory to get the color that you want let's import the colors from the components [Music] now let's apply the background color to the keyboard avoiding view [Music] now running it again we see that it's looking better now let's try out the signing with google [Music] now we see that the google signing was successful and the details on the welcome p2 have been updated to match the details that we got from the google signing

Channel: ToThePointCode

Views: 23,748

Keywords: google developer console, play store console, google play console, google console developer, play console, playstore console, google play services keeps stopping, talkback, google play services, android 12, android 10, android app development, android debug bridge, google play developer, android os, android sdk, node js, node js development, best javascript course, masters in data science, app hosting, ms in computer science, web app hosting, masters in computer science

Id: FSMrzYpBeDM

Length: 16min 31sec (991 seconds)

Published: Tue May 18 2021