Google Sign-In with React Native and Expo: IOS & Android 2021
1 CODE: IOS & ANDROID Google Login on Expo SDK 40.0.0 (updated!)
Welcome! In this quick tutorial you’ll learn how to build Google login into a React Native application. Let’s get started.
Before starting: You need to know how to setup a React Native app with Expo and run it either on your phone or simulator. You can follow the App Setup below as well, but I recommend going over the documentation if you don’t know what Expo or React Native are.
Getting Started · React Native
This page will help you install and build your first React Native app. If you already have React Native installed, you…
One last thing. I learned how to code by building my business, Snowball Financial Education, teaching people finance in a fun way. You can find my life’s work in progress here: www.snowballfinances.com . I hope to make your journey through code easier than mine!
On your terminal input the following commands:
npm install -g expo-cli expo init your-project-namecd your-project-nameexpo install @react-navigation/native react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view @react-navigation/stackexpo install expo-google-app-authexpo start
Download the expo app on your phone and scan the QR code, or setup the simulators on your computer. I have it setup on my computer, your app should look something like this.
Here’s the folder structure for our entire app. You only need to add a ./screens folder with a LoginScreen.js and ProfileScreen.js files.
Warning: After coding, you have to setup the app on the Google Console. It won’t work until you do so.
App.js: navigation setup
LoginScreen.js: this is where the magic happens.
Google Console Project Setup
Create a new Google Console project on the following link:
Google Cloud Platform
Google Cloud Platform lets you build, deploy, and scale applications, websites, and services on the same infrastructure…
Create your credentials:
(If it asks you to setup the consent screen, just input the project name.)
We have to tell Google that our specific app is trying to login from each platform. Let’s start with IOS.
IMPORTANT: In order to get it working on your expo local environment, you have to input “host.exp.exponent” as the Bundle ID.
Hit create. You should now see this on your project.
Copy that Client ID number, and paste it on the LoginScreen.js
Add iOS URL scheme to your app.json file
Click on the ios-client Name of your credentials page. It’ll take you here:
IMPORTANT: You have to use host.exp.exponent on the Bundle ID for it to work on an Expo app!
On the app.json file, under ios.config.googleSignIn.reservedClientId add the IOS URL SCHEME found in the client ID for IOS. This one is different from the client ID you added previously. Look at the image above to see the IOS URL scheme.
Test it out now on your IOS simulator or iPhone. Google login should be working!
Similar process, create OAuth client ID
Now this part is a tiny bit tricky. You have you create your Android singing certificate.
Open your terminal and run this command:
openssl rand -base64 32 | openssl sha1 -c
It’ll output a string that looks like
A1:B2:C3 but longer. Copy that string into the signing certificate.
Hit create. Now you’ll see your android client ID on the Credentials page.
Copy that Client ID and paste on the LoginPage.js.
And you’re done! You have now setup Google login with IOS and Android on your local Expo project.
Let me know if you have any issues.