How to Authenticate with Firebase and Google for Expo React Native Apps using Google-Signin plugin

hi everyone today I'm going to show you how to create a new project in Firebase and how to add Google signin to your Expo react native app using the Google signin package so first off let's create our project in Firebase I can disable Google an analytics because I'm not using that for this project and it's going to going to go ahead and create my project so now my project has been created so I can click continue and it's going to take me into the project where I can add my add my IOS and Android app so I'm going to need to supply a bundle ID and I can choose to supply the appn name and also the App Store ID so I add my bundle ID which will align with what's in my um app. Json file and I'll just click register app that gives me a Google service info p list which when uploaded to Expo as a um environment variable can be used to help me connect to um Google and sign in the rest of these steps are not necessary because we're going to be using the Google signin package which I'll show you cool so now I've got an Apple app I can go ahead and add my Android app this one's a little bit more involved once again I add that package name but this time I'm going to need to add a sh one as well um so I'm going to go ahead and generate that so I'm going to run EAS build configure and it's going to create my build configuration for my Expo project and specifi I want to um configure for both IOS and Android by selecting all from there I'm interested in the credentials for the Android I select Android and I select development I'm doing development you'll need to do different um different credentials for each one and also upload different um different infop lists and Json files so now I'm going to go ahead and add my bundle identifier as it said I need to do that to get the credentials so I'm just specifying the same thing that I put inside the Firebase console I'll do the same thing for the Android package also going to add in some config plugins that basically what it does it allows me to specify values that are going to um impact that Google signin package so I can um I don't need to eject from Expo to um yeah put in info list values and um yeah update Android manifest value stuff like that so now I'm going ahead and downloading that um Google signin package so I can generate credentials and I'll also in install the Expo Dev client cuz that's how I'm going to run my application once I get that Standalone app so instead of opening it inside go it's going to open its own Standalone app and it's going to allow this to work without ejecting so now I've got my um credentials that I'm about to generate and I'm generating them and it gives me the credentials along with that Shan fingerprint which I can copy across into the Firebase console I can then register the app and download that Google services Json that will also be uploaded as an environment variable to the EAS um build and so that I can use it um securely to get like client IDs for my app so this is something that um you would typically do at this stage by accidentally did it later um so you would want to add your signin methods so that you don't get errors and I'm going to show you what errors you would get if you didn't add this um so you need to specify that you want to enable Google sign in there's a few different optional settings but you don't actually need to set any of those so I'm just going to enable it you can provide a public facing name for the project which will show up when the user goes to log in so like this might be my cool app and so when it goes log in it'll say my cool app is requesting that you you log in requesting these permissions um so once you've set that up it gives you updated Json and info pist um doc uh files so it's actually worthwhile downloading those and those are the ones you'll upload to the build you may need to rebuild after you do that I'm pretty sure you do um but I'm just going to show you what it will look like um if you didn't download and set up the Google sign in after you've created your apps so it open and when you click on this signin button here it crashes and it says You must specify client ID so basically you need specify a client ID against the um configuring part of Google signin and if you don't do that it's going to fail and you need to actually set up um Google sign in in Firebase to allow it to work you get a different era inside Android I'm just going to show you what that would look like so you click to sign in it opens up this checking info page and it prompts you then for your username and then your password which I've obviously skipped over my password because I don't want people seeing it and I hit my two-step verification prompt on my phone and it's going to enable me to log in then there's a few extra steps about who will be using this device initial setup I think you wouldn't have to do this every time it's just because I haven't logged into Google on this phone before then I can accept these terms it says see it says sign an action cancelled I'm not exactly sure why it does that if it's just an emulator issue um but the code is correct and lets you sign in so you saw that I got developer error 10 and that basically meant that I hadn't set up my um web client ID which is needed to log in to Google and everything to work correctly so now I'm just going to show you how to upload your um your Google services Json and info pis to uh Expo using this EAS secret create uh CLI so you're going to specify that you want to project scope and you want the name to be of a certain name then you specify that you want it to to be of type file and where the file is located as the value next I'll go ahead and do the one for iOS which will be the info list version basically once you've done this you can reference these these um files from your app app configuration file and it will just allow it to be securely stored you don't need to check it into your um Version Control System it's just a secure way of managing these files so I'm now creating that secret for that Google services info pist and I'm going back to my app. Json and I'm going to rename that to app. config.js that's going to allow me to reference the um environment variables I all I need to change is I'm going to need to go export default and then this object and it's going to change it to an object so they can reference um the processor environment variables so inside the iOS section you'll specify that the Google services file is of the environment variable um whatever you named it so mine was Google services info pist and I can do the same thing for Android but refer to the Android version of that file which is Google Services Json now I head on over to my build configuration I'm just going to set that I want the iOS simulator to be true I'm I'm setting this so that I can run on the simulator and I'm about to generate my builds and they will just run on the web so I don't need to have a iOS device if I want uh Mac if I wanted to build my iOS um apps but obviously to run on the simulator I do need a Mac but it could help with building your production builds if you didn't have access to a device so once that's started I'll go ahead and um upload the project files to EAS build and start building those once your um que is free and it also gives you a link that you can go to to check on the build details so what St of put at um and also to download the file that you can copy into your simulator or your emulator for Android I can go ahead and generate another build for Android so just specify that the platform I want to generate the build for is Android and the profile is development those will take a little while to complete once they come finished I can go and download them while I wait for those um builds to generate I can go ahead and write my code that I want to um connect to the Google sign in so I'm specifying they want to import Google signin and Google sign in button and also use effect and use State going to use effect to configure um Google sign in and that's just going to happen once and I'm going to use state to hold the error if there is any and also to hold um any user info that comes back that'll just make it really easy to sort of see what's going on in a real life app obviously you wouldn't just show the error on screen it wouldn't be very useful to the user so like I said use effect is going to be called once when the app first loads up because I'm going to specify that don't want to have it um rerun when on any dependencies that's why I've added that empty array there as a parameter and I'm going to go Google signin doc configure I'm going to need to add a web client ID but I'll get back to that in a minute I also going to add a function that's going to allow my users to sign in so I've just need to check with the um Google sign in has Play services and that's for um Android to help it get set up for I that just going to return immediately and then it's going to go ahead and I'm going to go ahead and call the Google sign in um and with the result of that I'm going to set user info and clear errors I'm going to add a try catch here so if it fails then I'm going to catch the error and what I'm going to do is I'm going to then set the error in a real app you'll probably catch that error and maybe translate it into something more um useful to the user or maybe log it to your um system so you can get alerted about errors and go and resolve those errors now I'm going ahead and adding a logout function so this is what's going to be called when the user clicks log out and what I'm going to do is I'm going to clear the user info and then I'm going to revoke my AIS and then I'm going to sign out now the main functions that I need to um connect to Google I'm going to go ahead and just add my UI so I'm going to Jason stringify the error message that's basically going to allow me to see the error message as a string and so it'll show on screen within that text buiild I'm going to add another one for user info but I'm only going to show that if user info exists and the reason for that is I actually want to get the user from the user info as there's a lot of extra information like access token and stuff like that that wouldn't be very useful to show you guys on screen it's also worth noting when you're configuring you can add Scopes and that will allow you to access various Google services if that's something you want to do you might need to do some additional configuration around that so yeah it's worth looking into that I found a lot of people typically just like to offer it as a login service so that they don't need to handle that sort of thing so now I've got a button that I'm adding when there's user info I want to allow the user the log out button and if there's no user info set then it means that they need to log in so add a Google signin button I'm going to use some built-in standards for the Google signin button so I'm going to choose the size of standard and there's also um different color options so I'm going to choose the dark color so I'm going to go Google signin do color. darkar and on press I can call my signin function that I've configured previously so that's most of my code the final thing I'm going to need is my client ID that's the web client ID and I'll have a client type of free and you can get it from the Google services Json file that you downloaded after you configured authentication for your apps in your Firebase cons project console then you specify the web client ID so you're just going to put it here I think some people have found that it works without adding the web client ID here and others find that it doesn't so I just figure it's more it's more cautious to just edit there it's not going to cause any harm so I'm downloading my simulator build I just drag it onto my iPhone and it um loads so now I can go ahead and start my build I'm just going to open on iOS and the command to start it would be Expo start d-d client with Dev and client spe uh separated by space uh hyphen sorry and it'll open up this Google login when I go to um click on the Google sign in and I can go ahead and sign in and you can see it prints out my user info on the screen and a log out button is showing so now I'm going to show the same thing for Android and for some reason my Android only seems to work once I've done a full like restart of both the emulator and my operating system I have no idea why that is um but hopefully other emulators work a bit better but it seems to be just a bug that I generally experience but once you click on that sign in it's going to check your info prompt you to enter your email or phone then it's going to take you through to a password page you'll enter your password because I've got twep verification I need to answer the prompt on my device then there are a few more steps which I think is because I'm using this emulator for the first time or after I've restarted it find I accept this um policy and you see it says sign an action cancelled that seems to be a recurring theme on my emulator and I'm not sure if that's just because it's not fully set up but when I click on it the second time and SEL my username it logs me in and you can see the user if I wanted so I hope you've enjoyed this tutorial today if you have please like And subscribe for more content or my code will be available on GitHub

Channel: MissCoding

Views: 8,540

Keywords: misscoding, tech tutorials, learn to code, mobile development, tech career, software engineer, woman in tech, react native tutorial, google signin expo, firebase expo, react native expo, eas secret, eas credentials

Id: HY3O_wrvDsI

Length: 21min 27sec (1287 seconds)

Published: Thu Dec 07 2023