How to Authenticate with Google for Expo React Native Apps using Google-Signin Config Plugin LATEST

hi everyone today I'm going to show you how to use Google signin to add Google signin to your Expo react native app I've done this a few times before but um this is something that has been changing reasonably regularly and has been quite a popular video so I thought I'd redo it again so I'm going to start off by adding my bundle identifier to my iOS section of my app. Json this is just going to be useful when I go and create my o client credentials inside um the Google developer console um and so we'll be able to recognize that this is my app along with the um additional info I'll Supply to it which I'll get when I create it in the Google developer console it's also going to need this additional item in the info list and this is just some um URLs that will be supplied by Google I'm going to leave this empty for now because I don't have it yet but I'll go and fill that in in a minute once I've gone and uh set up inside the Google developer console I'm also adding this Google signin as a plugin so basically it's a config plugin which means that I'll need to build my app using um the Expo build CLI and then I can go ahead and run is like a Dev build it'll install a standalone application on my um emulator or simulator and I can run it using um this Expo Dev client package which I'll install soon so I'm going to want to create some credentials I've already got some here this is kind of one that I've used before um as my sort of default project for Google orth I'm going to go ahead and delete these after so you won't be able to use the keys you shouldn't like share things like this um generally so yeah I'm going to go ahead and delete those after so you can't use mine um I think there are some validations in place to make sure you're not using the incorrect one um for example um I provided my bundle identifier and also um for Android you have to provide like um the Sha um results so so this is the iOS URL scheme that I've talking about and that's going to need to go inside my app. Json file inside here so now I've got that complete this my default app and it's just pre-standard um from on the template I'm going to go and add to this to add the Google sign in functionality I'm going to configure my um build file which is going to be basically um my configuration for any builds that I do so it's that EAS Json there if I click on it I'm going to go ahead and add simulator true to the iOS section because I want to run on the simulator I'm going to go ahead and create my other o of client idas that I require so I'm doing one for Android now actually first I'm going to go ahead and build my um iOS application because it's going to take a little while um and so yeah it's best to just get running so it can happen in the background I'll kick off Android the same way um that- p is basically the platform and I'm running it for Android and I'm specifying they I want to build for the profile development which is specified in my e. Json config file I want to get my credentials for Jason so I can go ahead and get their ool client ID and we're going to take that show one fingerprint so I've grabbed that shower one fingerprint and I'm going to go ahead and paste that into the correct correct um field in the um Google developer console I'm also going to go ahead and get my Android package name which I've made match my iOS one I'm just going to re rename this one so I know what it is can't verify ownership yet because it's not on the Google Play store yet I can copy that client ID across I'll do that in a minute when I looked at the documentation it suggested creating um a web application one as well so I'm going to go ahead and do that and you'll just pass this configuration through um to the Google sign in um config plugin I've got a button there cuz I'm going to use that to um trigger my log out I'm also going to import a couple of things I'm going to import Google signin which I'm going to use to set up my signin and I'm also going to import Google signin button which is basically a component that is like a familiar button that would look familiar to people who use Google to sign in so so um it will just have that expected user feel it'll look more professional and make people feel more comfortable that they're actually you're actually using Google to sign in and not just doing something just dodgy in the background of course you should never enter your passport password into random text Fields um so it will actually pop up a window and prompt you in the New Normal more Google way so I'm going to create this function now um for configure Google sign in it's going to call this configure function and pass a couple of options so I'm passing the web client ID I'm going to pass an Android client ID this one's not in the documentation I'd seen it when I looked up a few things and I was having a few issues with the Android client ID so I've included it anyway because it's not going to have any Cal and I'm also including the iOS client ID so I'm just going to copy and paste each of these client IDs now finally the eyes client ID I'm going to want to configure that Google sign in when the um application loads up so I'm using this use effect um function to basically call it when the um app opens and the components mounted I'm also going to have a signin function which I've defined there but I'll fill in in a minute and that's going to be called when I click on my gole Google signin button which is a component provided by the Google signin um mpm package and it also has like sub sizes and um yeah like dark mode light mode and when I press it I want to call that sign in function that I haven't filled in yet to get started I'm just going to console log that I press the sign in button that's just going to indicate back to me that this is all hooked up correctly just checking on my a simulator build it's still in progress I'm going to go ahead back and add some more to my code so when a user clicks the sign in button I'm going to want to try and sign them in going to want to catch any errors in display also um the reason I want to be able to do this is just to help the user resolve any issues they're having uh so I'm going to have a state variable here called error and a set of function for that error State variable whenever an error happens it's going a set error is going to be called and it's going to trigger the reender of the UI which will render the error message on screen as an error message will be passed to it there are a couple of steps it's going to just um call this Google signin do haspl services and then I'm going to get the user info back um and I'm going to do that by calling this Google signin do sign in those are um asynchronous so they're long running things potentially which means I've got an await there which is why I've made my sign in function um async I'm also going to add an additional State variable for the user info and so when I get user info back I can set it and I can display like relevant user info on the screen um I could also use it to sort of hold on to any access tokens that I have um and that could be used for further API calls if I've included um scope requests to get like access to certain Google apis so now my um iOS simulator build is ready so I'm just going to go ahead and download and show you guys what I have just going to drag that file across and it's going to install and now I can start running my app using this um um Expo div client so I go Expo start-- div client and that will basically allow me to run it inside that Standalone app I just need to say that I want to open it on iOS and it's going to go ahead and open it inside that app that basically allows you to make changes that would require typically you to eject I noticed I actually made a typo here and sign in should not capitalized so I'm going to go ahead and fix all my references to sign in and it she'll be fixed now cool so now you can see I've got a sign in button I'm going to make this text display my error if I have any I'm also going to show my user info so let's go ahead and run that now so I click sign in and it opens up I'll enter in my username and password if I hadn't already and it's going to show me like the access token and all the additional user info it's overflowing the screen so I actually want to reduce this down just to make it look a little bit better um inside this user info object there is the actual user so I'll just go do user and it'll get me more specific user like more like profile information so you can see photo name and all that now when I've got user info it means that there's someone logged in and so it wouldn't wouldn't be relevant to click that sign in button anymore instead I might want to try logging out so I'm going to create a custom log out button for this so I'm just giving it the title log out and on press I'll call a function called log out which I'll Define in a minute it log out doesn't make any um asynchronous calls so I don't need to call make it as synchronous I'm going to set the user info to be undefined when the user logs out and I'm also going to go ahead and revoke access and I'm going to go and log the user out that's just going to log the user out nicely if they don't want um their access inside the app anymore if there is not user info then I do want to display that signin button so I'm just going to move it inside this turnery operator here which will check for user info and display the appropriate button accordingly so I've click log out and you can see that it says cannot read property use of undefined and that's because user info is now undefined um so what I need to do here is I'm just going to going to basically check whether um user info is undefined and I only display that um text if it is defined cool so you can see a sign and Buton now and that would all work correctly now I'm over on Android I'm going to go ahead and download my um my build for my emulator Now Android is something that I've shown in the past and often has issues on the emulator in particular that I've noticed um it just seems generally a bit FL flaky I don't know if it's just my emulator or maybe it's better on physical devices or maybe it actually is a bit flaky um so I'm going to show you it um as it was and as it is working currently which is not working so I'm going to click sign in it's going to hang um but I did previously have it working um it just seemed to start working after a while earlier when I was using it um and testing it and so yeah this is how it would work if um if it wasn't flaky for whatever reason um if anyone knows why it's been a bit flaky and whether there's any settings or anything um please do let me know um so I can help people out and update um on people who might be watching this but yeah it does work it's just flaky um this is the code that would make it work if it were to work um yeah I'll be interested to hear from anyone who has it on in production um surely it works because a lot of people are using the package so that was having some issues because I had some alerts in this previous test code that I had I've removed that now and you can see that it works so that's how it should look um it may not work for you or it may work for you I hope you've enjoyed this tutorial today all my code will be available on GitHub please like And subscribe for more content

Channel: MissCoding

Views: 12,181

Keywords: misscoding, tech tutorials, learn to code, mobile development, tech career, software engineer, woman in tech, react native tutorial, react native, google sign in, expo react native google signin, google auth expo apps, expo react native tutorial, android google auth, ios google auth

Id: T-zTZn_xRBM

Length: 19min 30sec (1170 seconds)

Published: Tue Nov 21 2023