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.

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!

App Setup

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.

Coding time!

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.

ProfileScreen.js

Google Console Project Setup

Create a new Google Console project on the following link:

Create your credentials:

(If it asks you to setup the consent screen, just input the project name.)

IOS Setup

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.

app.json

Test it out now on your IOS simulator or iPhone. Google login should be working!

Android Setup

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.

Happy coding!

Founder @ Snowball Financial Education www.snowballfinances.com | Javascript Developer

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store