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:
Select the project
We are going to create an OAuth client ID
Go to API’s and services and click on OAuth consent screen
On enable APIs & services, click on Create credentials:
After clicking on Create credentials, on the dropdown screen that comes up, click on OAuth Client ID
Next click on configure consent screen
Click on External - availabe to any User with a Google test account and click on create.
This is the consent screen
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
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:
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
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:
We will need to prompt the user to signin with Google, by adding this button in the app:
Let’s now run the app on the web and see:
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:
The getuserinfo function is called inside the signinwithgoogle function.
To run the signinwithgoogle function, we will now need to create a useEffect hook:
To enable sign out, lets add a button to delete local storage:
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:
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:
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:
On proceeding to signin with google, you might encounter this error:
To remove the error, edit your sign in with google button to appear as this:
To also ensure the userinfo appears in a nice format, edit the text stringify to appear as this:
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:
Upon a successful sign in, it will appear as follows:
Thanks for reading through!
Top comments (0)