Sign in with Google on Expo React Native

today we are going to sign in with Google and specifically sign in with Google natively on an Android application that we're building with Expo react native now to do this we're going to use this great open source Library called react native Google sign in and I'm also very happy to say that super bass is now a sponsor of this Library helping to support the collaborators and maintainers that make this happen because this really makes native Google sign in uh so so easy on react native applications so please if you can also consider supporting this package if you're using it for your application now the way we get started is there's a guide in here for Expo installation so in the first step let's go ahead and create our new Expo project I like to use typescript so we can use this Expo blank typescript template here and then we can give it a name and we're just going to call it Google off there we go and so now we're spinning up a new project great and so now we can go into our Google auth folder here and I like to use vs code so let's open this up um in vs code here and um we can see so we can run this our npm Run start for example npm run Android so maybe let's quickly do this npm run Android and so now we're going to spin this up on here the Google pixel simulator okay great so here we have our project so we can open this up maybe let's do this side by side and then we can say and say sign in with Google that's what we're going to do later on here give that a save and we can see okay that is all set up um so let's stop this server for now uh because what we need to do is we need to install um this react native Google sign in library here so we can do that with our npx Expo install and while that is installing we also need to configure our config plugins in our app.json so in here we will add this plugins at the react native Google sign in plugin there okay and then um the important thing is we'll step through this Android guy guys here in a second but because this is using um kind of native code that's not built into Expo go in order to do this we actually need to run um like build and run our Android um app kind of outside of Expo go and so what we can do is we can do this here with an um with this command npx Expo run Android so let's copy that over and so you can see now that we're going to build um kind of says this Android package name uh here let's specify um so it should be a reverse URL um my website is thor.bio so let's just say bio dot Thor dot Expo test let's call it that and so you can see now we have um our package name added here for Android and then also we are getting the Android directory here so we can configure kind of any sort of build.gradle files that we need to configure later so the first time you're running this is we'll take a little while so in the meantime what we can do is we can dive into the Android guide here so if you're using Firebase you will need to kind of set up the configuration there but we're not using Firebase we're using the open source Firebase alternative called Super Bass so if you're not using Firebase where you can follow this start integrating Google sign in into your Android app guide here so let's have a look at that um yes so we'll kind of have done all the the setup already so we'll need to check that in our build um dot Gradle file so that's in here um build.gradle we have these repositories so we can see now our um application has finished building and we actually have it running now um as well the the local build that we've done um so here repositories we need that Google repository okay we already have that in there that's great and then what we'll also need in our app level build.gradle So within Android app and then there's another build.gradle here we will need dependencies this Google Play services auth dependency here so if we go into this and search for dependencies and then we'll just add that at the bottom of our dependencies maybe here um we'll do this okay and then we'll lastly need to configure our Google API console project um kind of oauth things but for now let's um actually go ahead and have a look at kind of the react native implementation side of things and then we'll come back to setting up the auth kind of configuration with Google okay so here we can look at this we have this Google sign in so we can just copy this out here and what I'll do is I'll just create a new file so within a components components folder I'm going to create this off dot TSX component and so that's where I'm going to implement my Google sign in button so um yeah we'll just load the Google sign in Google sign in button uh here from the library and then we'll export default function and the function is then just going to return our Google button so we'll need some configuration here as well so we can copy this and kind of look at all the different things we'll we'll need so here we have scope so if we want to access you know drive for example read only so we want to read from the user's drive with the access token we can do that and then lastly we'll need the web client ID to actually get the ID token returned and the ID tokens what we need to then complete the sign in with with super base auth um so yeah these are kind of the only two pieces that will need and so we can comment this one out before we'll just give it a um give it a try see kind of what happens and then later we come back and complete the setup here once we have the the client ID created and then yes so there's the sign-in code but let's look at first of all the button so this is the Google sign in button so we want to return this um so we'll return our Google sign in button will um not going to implement meant the disabled state for now and then here we'll just do an inline function uh with the sign in Behavior so that was here so it's an async um method we can just copy kind of the function for now um and then we're not going to set the state we're just going to console log the user info let's chase on dot stringify that um user info now two so we're just doing that to have like a nicer print so here with the two we can kind of do an index tab index of the string we'll just give the error as any here and then we can Implement kind of the different error messages um yeah let's start with that and kind of see what happens so we'll give that save and then in our app.tsx so underneath here we'll just get in our auth component from components off um there we have it and so now we have the Google um sign in with Google button here okay so this is just the visual here we still need to um Step through and finish the configuration in our Google project so we'll um this part here we need to open our project in the Google API console so that's the step here if you go back here follow the start integrating Google sign in into your Android app um and we'll need to configure this I will need to get our sha one certificate so that that piece the configuration is actually a little bit challenging so you can see kind of here authenticating your client you can read out kind of how to do this so um we'll need to get the key store uh one certificate so let's just go in here so I've created this Expo Google sign in test let me actually do this from scratch and create a new project we'll call it Google auth test just to kind of Step through this end to end okay so now we go into our Google auth test so here we are and then in apis and services we have um so if you look in here uh or auth content screen so that's in apis and services then or auth content screen we want an external so available to any test user with a Google account let's create that we'll just say Expo Google auth test um we'll just select my email here we don't need to configure that we'll just use my Thor at Super Bass email here as well and then we can save this uh and so we've now got this created and now we need to set up the credentials um and so first of all we need to create the oauth client ID credentials here and we will say so Android is the application type Android client we need the package name so if you remember um in our app.json so this is our Androids here package name that we set up earlier so we'll put in the package name here and then yes now we need our Sharon certificate fingerprint so we can copy this command here stop this for now and so if we do this here the key tool um we need the path to our key store and so this will be in the Android directory with an app and then you can see we have the debug key store so that's our directory and then we can fire this off and in debug mode the default password is Android that's also in in the docs here if you read the docs here it should say somewhere uh yeah the password for the debug key store is Android uh and so now we just copy out here the Sha one certificate fingerprint so copy out this one um go back here um set that up and so now we can create um this and so here now we get the client ID and if we look back so once we have our client ID we know we need to go into the project strings dot XML file so we can do a command P here to search through our files strings.xml here and then we can copy this um one here so we'll need to add that in here and then our client ID we'll just copy this client ID here give that a save okay so we got that saved and so now when we rebuild the application npx Expo run Android opening up the application here and so now when we do sign in with Google you see now that we've set this up correctly uh well we see access blocked um has not completed the Google verification process so um yes access tonight okay there was some more configuration ah yes we need to add test users so here in our apis and services or off constant screen we need to add users and we'll just say okay so now that we have our test user set up okay let's try this again sign in with Google so we have our test user configured now okay um being tested yep we're fine with that is currently only being tested and so now here we have our Scopes we can see that and then we can continue and so no now what you can see is we do get our user info object so if we go back to our auth component here um you can see we get this user info object here but we don't have an ID token so we get some information about the user but we also need this ID token and so in order to get the ID token if you remember here um you saw this earlier by the configuration it is a little bit confusing but yes in order to get the ID token we need to set this web client ID and so the way we can create this um here web client ID you can see is back again in our API and services credentials so we've created our Android client and now we need to create a new oauth client ID and so now we need this web application here web client we don't need to specify this because it's coming from our native application and so here now we have a client ID for our web client and so we copy this one out and we go back to our auth and here in the configuration now we set up um this web client ID here give that a save just yes rerun the build step yeah luckily uh once you've kind of built it initially that step is quite quick and so now when we play this through again so now the consent screen doesn't pop up anymore because we've done this already but so now we're getting our ID token and again very similar you know if you've done the Apple um sign in with apple before this ID token is just a JWT so we can put that into our JWT dot IO and so we now see here and so this is kind of the important part here which Super Bass auth will verify is this a UD ience credential so that's what we'll need to configure and this if you remember this is the web client ID here that we set up so that's encoded now at JWT and so that's what we'll need to tell the the Super Bass auth server so let's go ahead and initialize Super Bass in here so using the supervised CLI we can say super face in it uh we don't need a vs code workspace and so now we have our Super Bass credentials the config.tomo and what we can look at is I believe the Google uh Google off yeah that's our project ID and then we can do like auth external and in this case um we want Google we say enabled true and then also we want this client ID and again so that is the client ID our our web client ID um um so we can copy it from here or you know um from your console there so this is the same this is the client ID we need to set up um and then we don't need any secrets or anything for this here I also don't need the URL so if you're only doing kind of the Native Google auth and not um the the Google oauth on the web for example uh we really just need the um client ID for our auth external.google um and then yes so now we can implement this with Super Bass Js so in order to use super bass shares let's have a look at the docs um we'll look at so for react native we can use the normal JavaScript client Library um we'll just need to um yeah so react native options with async storage so let's create a new um utils folder to make this smaller here let's say new file utils slash Super Bass dot JS TS working with typescript um and then let's copy this one out here and then we'll need to install a couple dependencies so we can say npx Expo install and so the only difference with like um npx Expo install versus like npm install is that um you know four libraries where there's a specific version required for Expo it then installs the appropriate library for um yeah that specifically works with your specific Expo version I believe something like that so we can just paste all these um in here and we're installing um yeah so you can see just one um and I think this is the async storage it's installing kind of a specific SDK related version and the other modules are just then normally installed via npm um and then what we can say here so if we run super bass start we then get our login we do need to specify the auth external Google secret um I believe that's a limitation currently that we're gonna fix um because we don't actually need the secret for um the Google auth so we'll just replace it with um just a dummy kind of Secret for now and then I think we can Super Bass start it up yep there we have it so um we can now set up our uh Super Bass client so the API is just running here on localhost this one and then we just need our public add-on key remember for react native clients only put the public add-on key in there the service role key should never be exposed and then we want to export this const so we can use it throughout there we have it and then one thing I really love about um using supervised locally we get our fully fletched Studio here running on localhost and so we also have auth here and then when everything is configured correctly we can just see uh the user pop-up in there and so basically now what we need to do as we need to implement our Super Bass auth sign in with ID token and then just pass in that ID token so we'll say import from um we'll just go util slash Super Bass uh and so we'll just importing Super Bass here and then here after our console log we'll do await uh Super Bass dot auth dot sign in with ID token yes exactly that's what we want and then we want our provider to be Google and we want our ID token this would be here the this ID token and that would be our user info dot ID token and in our case we'll just you know if we don't have an ID token we just pass this in and then we'll get an error you know ideally we check uh yeah let's actually let's do this properly we will check if user info George ID token then we do this and then we'll have an else we can throw new era and say no ID token present okay um great and then here this will give back data and an error or either data or an error and then we can just console log um let's do like this error data there we have it and that should be pretty much it we have a native module yeah so I think we need to just rebuild this after the installation we need to properly rebuild because it's a kind of native dependency module okay there we are and then sign in with Google and we have YES Network request failure I think I remember there was something if you uh react native Android local host um yeah I think that is this one here need a mapping part run the following command in your terminal your local port to the mobiles port access your development server this way okay so I think if I read this correctly we should be able to do um and so we're running on localhost 54321 so we should just say five four three two one and map that to five four three two one let's do that and let's give that a retry I'll restart our Expo um yeah I think on the iOS simulator that kind of works out of the box but then with the Android simulator looks like we have some extra steps obviously if you're using kind of a super bass hosted Super Bass project that shouldn't be an issue yep and there we have it so now we can see maybe we can make this a bit bigger here so the arrows null and we have a session we have an access token and so now if we actually go back to our studio reload this here we can see now that my account is created in superface auth we got Google here so basically now if you know if we wanted to go to our hosted Super Bass project and wanted to configure this here with our hosted project we can then go to auth Providers and Google and then again here we'll need to set up the client ID here we need to set up the authorized client IDs and that is uh yeah our client ID from from here and then we can get it working with our hosted supervised project as well so there you have it this is how you can implement the native Google sign in into your react native Android projects now the configuration is a little bit more involved here so I hope this was useful for you and let me know in the comments what else you'd like to learn about and see you next time [Music]

Channel: Supabase

Views: 18,300

Keywords:

Id: vojHmGUGUGc

Length: 29min 49sec (1789 seconds)

Published: Thu Oct 05 2023