Purpose

We had some issues with the OAuth libraries in Expo React Native for Android. The Native libraries were working on iOS without any issues but not on the Android. In this article, I would like to elaborate how we could overcome the issues.

The purpose of this article is to explain the available OAuth libraries provided by Expo, their limitations and the approach we followed to overcome the limitations.

This article is applicable to Expo SDK v42 and lower. However, the outlined approach in this article can also be used for the latest Expo SDK (which is v44).

Expo Libraries

Expo provides browser based and native libraries for OAuth.

Browser Based

The recommended browser-based library is expo-auth-session. The flow is as below.

• User presses SignIn button
• A web browser will be opened within the app
• On successful authentication, authentication provider redirects
• App handles the redirect

Documentation: https://docs.expo.io/versions/v42.0.0/sdk/auth-session/

Native

The native authentication library for facebook is expo-facebook and for Google expo-google-sign-in.

Documentation: https://docs.expo.io/versions/v42.0.0/sdk/facebook/ https://docs.expo.io/versions/v42.0.0/sdk/google-sign-in/

Limitations

There are limitation using the libraries for Android and iOS.

• In Android, expo-auth-session doesn’t work for both Google and Facebook.
• Also, expo-google-sign-in can't be used in Expo Go App.

Here is the issue description 1 & 2.

Whereas it works for iOS.

To overcome the limitations, for Android, use expo-facebook and expo-google-app-auth libraries for facebook and Google respectively. The library expo-google-app-auth is deprecated but we are using it as we didn't have any other option to work both in the Expo Go and Standalone Apps.

So, here is the solution !

Facebook OAuth

As discussed, use expo-facebook for Android and expo-auth-session for iOS.

Configuration

Android

• Go to Facebook Developer console (developers.facebook.com) select the App.
• Go to Settings and then click on Basic.
• Click on Add Platform and then Add Android.
• Leave all the fields blank except Key Hashes
• Get the key hash by running the following command from the project directory and copy the Facebook hash key expo fetch:android:hashes

Update App.json

• Add facebookAppId, facebookScheme and facebookDisplayName

• facebookScheme will have fb prefix

iOS

• Go to Facebook Developer console (developers.facebook.com) select the App.
• Go to Settings and then click on Basic.
• Click on Add Platform and then Add iOS.
• Leave all the fields blank except Bundle ID

• Bundle ID should match with the bundleIdentifier key in App.Json.

Expo Go

• Go to Facebook Developer console (developers.facebook.com) select the App.
• Click on Facebook Login and then select Settings
• Enable Client OAuth Login, Web OAuth Login and Embedded Browser OAuth Login
• Add the Valid OAuth redirect URIs

Google OAuth

As discussed, use expo-google-app-auth for Android and expo-auth-session for iOS.

Configuration

Android Follow guide from here

Get a Google API Key for your app

SHA-1 certificate fingerprint

• Take this from Google Play App Signing Certificate.
• Go to Play Console, select App
• Go to Setup and then App Integrity
• Copy SHA-1 certificate fingerprint from App signing key certificate section.

Get an OAuth client ID for your app

Application type: Android

SHA-1 certificate fingerprint

• Same as above (see section Get a Google API Key for your app)

Add the configuration to your app

• Add Google API Key to android.config.googleSignIn.apiKey in App.json
  • API Key created in section Get a Google API Key for your app
  • Looks like: FIzaDyAkLFsTdoPRDCsxB0SMxXaNxbE-YLKNfY
• Add certificate hash to android.config.googleSignIn.certificateHash in App.json
  • Run the command below in project root directory and copy hash key expo fetch:android:hashes
  • Looks like: 582AAF01S7C2CF060H8A75RG8F68E9C7B6R5D984

iOS Follow the guide from here

Create a new Google Client ID

Application Type: iOS

Expo Go iOS

Application type: Web

Expo Go Android

Application type: Android

Conclusion

Hope this helps, if you are struggling to deal with OAuth libraries in your Expo project.

However, if you do not want to test your app in Expo Go and just want to test in the Standalone App, you can ignore this article. You can use the native libraries expo-facebook and expo-google-in.