How to fix "redirect_uri_mismatch" error while using Expo.Google.logInAsync in React Native?

Question

I am getting error code 400 "redirect_uri_mismatch" after calling Expo.Google.logInAsync() in my React Native application (on the built APK). Please NOTE, on the Expo client, I do not get an error, the Google login page crashes with no error. I suspect the error is being logged on the native side somewhere.
I am using Expo version 32.0.0 with React Native version 32.0.0.
I have followed the instructions laid out here https://docs.expo.io/versions/v32.0.0/sdk/google/ and have created iOS and Android OAuth Client IDs.
Below is a copy of my code:

const signInWithGoogleAsync = async () =>  {
    try {
        const result = await Expo.Google.logInAsync({
        androidClientId: ANDROID_CLIENT_ID,
        iosClientId: IOS_CLIENT_ID,
        scopes: ['profile', 'email'],
        });

        if (result.type === 'success') {
        return result.accessToken;
        } else {
        return {cancelled: true};
        }
    } catch(e) {
        console.log(e);
    }
    }

Your help will be greatly appreciated.
Please let me know if you need additional information.
Thank you.

Answer 1

So far, I have only seen a temporary fix. I had the same issue for days and was able to fix it thanks to

Michel Comin Escude who provided a solution here -> https://github.com/expo/expo/issues/3540

Solution

Keep using Expo SDK 32. Go Google Developer Console and create an Android Oauth2 Client ID and an iOS Oauth2 Client ID, as stated on the SDK 31 documentation for the Google sign in (make sure that the package name is host.exp.exponent).

Use the Android Client ID and iOS Client ID as it follows:

import { Platform } from 'react-native';
export const isAndroid = () => Platform.OS === 'android';

const result = await Google.logInAsync({
    clientId: isAndroid() ? '<YOUR_ANDROID_CLIENT_ID>' : '<YOUR_IOS_CLIENT_ID>',
});

Explanation The main problem that I've seen is that even though on the new documentation the following is stated:

const clientId = '<YOUR_WEB_CLIENT_ID>';

The truth is that internally the request is being called from the Expo app, and you can see that when you expand the request details on the error page:

as you can see, it adds the package name host.exp.exponent.

Anyway, this will only work while you're in development or in the Expo app. If you create a standalone app, you need to use Google Sign-In and that's a completely different battle.

Answer 2

If you want to use expo go you should do this

---

1. In the iOS OAuth Client ID in your google console you should :

• Use host.exp.exponent as the bundle identifier.

2. In the Android OAuth Client ID in your google console you should :

• Use host.exp.exponent as the "Package name".

And in your standalone app you should :

1. In the iOS OAuth Client ID in your google console you should :

• Use bundleIdentifier in your app.json if you don't already have one.

2. In the Android OAuth Client ID in your google console you should :

• Use android.package from app.json (eg: ca.brentvatne.growlerprowler) to the Package name field.

Source : https://docs.expo.io/versions/latest/sdk/google/#using-it-inside-of-the-expo-app