Login with Google on React Native Expo
Published: 2024-03-18 02:52:38

This will work for web, IOS and Adnroid
Create a new expo project:
`npx create-expo-app tutorial-google`
Install dependencies that we will need
Expo auth session will manage the sign in with Google
Expo-crypto and expo-web-browser are core dependencies of expo-auth-session
We will also need react-native-web, react-dom and @expo/webpack-config
We will also need react native async storage
`npx expo install expo-auth-session expo-crypto expo-web-browser react-native-web react-dom @expo/webpack-config @react-native-async-storage/async-storage`
Create a project in Google cloud:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gjrnxwpgm3hivr8lnq4.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o6xfpxkcbzr134ogw96n.png)
Select the project
We are going to create an OAuth client ID
Go to API’s and services and click on OAuth consent screen

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/psu6em1kmmf2i3hqsbki.png)
On enable APIs & services, click on Create credentials:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0m8c4dsyxpzt9uvfk7li.png)
After clicking on Create credentials, on the dropdown screen that comes up, click on OAuth Client ID
Next click on configure consent screen

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/icu7x81squu6zr0j8mqv.png)
Click on External - availabe to any User with a Google test account and click on create.
This is the consent screen

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1hog5n5e9wnvkiwfw7jz.png)
Under app name, fill in ‘google-tutorial’ or your preferred name
Under user support email, provide one
You can specify a logo, app domain, which are all optional
Under developer contact information, add another email
Hit on save and continue
Under scopes, you can add users if you want.
Click on save and continue
Now we have a consent screen.
Lets get a client id for the web:
Click on credentials, and under application type, click on Web application:
Under authorized Javascript Origins, we need to add some URL’s, which are the URL’s for the application
To get the URL, run the project on the web:
`npx expo start –web –https`
The app will open in the web, copy that URL and add it:
https://localhost:19006
This is the same link under Authorized Redirect URI’s
Click on ‘Create’
On the screen that pops up, Copy the Client ID

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpmbscaquwk2jlq10yio.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lekr0zuv5lr3ldmvf5nj.png)
On the App.js file in your Expo  app, paste the client ID on there for later use.
Lets also get the ID’s for  IOS:
Click on create credentials, Click on OAuth Client ID, the select IOS under Application type
For IOS, we will need the bundle ID.
On your app’s root folder:
Run the command, `npx expo prebuild`
Under the package name add: com.betomoedamo.tutorialgoogle
We also have the IOS Identifier which is going to be the same as package name above
Hit Enter
Once this is completed, we can see that the bundle identifier has been added under IOS:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mn74bd58j3c89pkzz3bi.png)
Copy that bundle Identifier and paste it in the Bundle ID field under Create OAuth Client ID:
Hit create, and on the popup screen that comes up, copy the client ID.
Paste for later use in your App.js file, just as you did with the client ID for the web
Create a credential for Android
Click on create credentials, Click on OAuth Client ID, the select Android under Application type
Under package name, paste the name attached to “package” under android in app.js. It will the same as the Bundle ID for IOS
We will also need a SHA-1 certificate fingerprint
To obtain this for android,
run this command in your app’s  root folder: `expo credentials:manager`
Under platform, select Android
Under ‘You are currently in a directory with @betomoedano/tutorial-google experience. Do you want to select it?...’, Select Yes
Under ‘What do you want to do?’ Select Update upload Keystore
Then select Generate new keystore
Select on Go back to the experience overview, and here, we have the SHA-1 fingerprint

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68suef3f1l2j8smxu6r3.png)

Copy the SHA-1 certificate fingerprint and paste it under the required field in creating credentials.
Hit create and on the pop up screen that comes up, copy the client ID an paste it your App.js file for later use
That was the most difficult part, now we can start creating the code for the application
In app.js, import WebBrowser:
`Import * as WebBrowser from “expo-web-browser”`
Initialize the WebBrowser with this command:
`WebBrowser.maybeCompleteAuthSession();`
Also add this import in your app.js:
`Import * as Google from “expo-auth-session/providers/google”`
To save the information of the user when they sign in so that they do not have to sign in again, we will use async storage:
`Import AsyncStorage from “@react-native-async-storage/async-storage”`
Also add this to the imports section:
`Import * as React from “react”`
Add a variable userInfo and initialize it to null:
`Const [userInfo, setUserInfo] = React.useState(null);`
Next, lets create a hook that is going to enable us to signin in all of our applications:
Here will now add the client ID’s we had saved for later use.

```
Const [request, response, promptAsync] = Google.useAuthRequest({
})
```
Populate the above array to appear as this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jdvzzxtvxg7xu679ek01.png)
We will need to prompt the user to signin with Google, by adding this button in the app:
<Button title=”Sign in with Google” onPress={promptAsync}/>
Let’s now run the app on the web and see:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fyn7w3783y6g99osb1j5.png)
This is working, though it’s not handling the response,
Let’s go back to the application and handle the response
We will need to create a get userinfo function and a handlesigninwithgoogle function:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/em27zbig1avkpibynt76.png)
The getuserinfo function is called inside the signinwithgoogle function.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2bkdgriszajw3qy8fanb.png)
To run the signinwithgoogle function, we will now need to create a useEffect hook:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/poz8fnzpaq06qbiu1q8o.png)
To enable sign out, lets add a button to delete local storage:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hy1xec8v9ceiqw8vpv0a.png)
We added the json.Stringify(userInfo) above to test if the sign in and delete local storage are working. You can test them out and see.
Test on the web
On a successful sign in with google, we have all the information about the user:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t11dswasua49vu6doqlt.png)
Also test if its working on IOS and android:
To test it in android and IOS, we need to provide a scheme, which will help us redirect the user back to the application
Add the scheme into your app.json as shown below:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98g5mhxewhla0buzgsir.png)
You can name the scheme as you want. In my case, I named it ‘myGoogleApp’
A)	Test on IOS
Next we need to build the app:
To build for IOS, run the command, npx expo run:ios
With no user signed it yet, the userInfo will be null:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/grmlwgehzph661yuywxy.png)
On proceeding to signin with google, you might encounter this error:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nbcaawbhnl7605nfxsfw.png)
To remove the error, edit your sign in with google button to appear as this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/biw4te0ai4b3he5jatbl.png)
 
To also ensure the userinfo appears in a nice format, edit the text stringify to appear as this:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jio3jotmcskrj7jo47zv.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z78fphce7e44lvy9wsrp.png)

b) Test on android:
Now also text if its working on android.
We need to create the actual build for android: npx expo run:android
Before sign in, it will appear like this in android:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hunrvnpkqr2z73yc0igt.png)
Upon a successful sign in, it will appear as follows:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3mkys4oqdanptogx42h4.png)
Thanks for reading through!