9

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.

Pasha
  • 333
  • 2
  • 3
  • 9
  • Well, I was using Expo Go with a managed workflow. The problem for me was that I didn't login to Expo using the `expo login` command in the terminal. Hope this helps someone! – Jarrett Oct 12 '21 at 08:35

5 Answers5

9

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: enter image description here

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.

walecloud
  • 306
  • 3
  • 5
  • hope this helps @pasha – walecloud Mar 12 '19 at 15:24
  • How to work with standalone app please. It shows Authorization Error Error 400: redirect_uri_mismatch – Omar Diaa Aug 26 '20 at 15:15
  • I had to create `iOS Development` app with `host.exp.exponent` as mentioned here => https://github.com/expo/expo/blob/72dcdb5a389310bcc9a028befb3d59d61bbc723c/docs/pages/versions/unversioned/sdk/google.md#using-it-inside-of-the-expo-app. This is weird and it works. Actually it requires Bundle ID for original Expo app. :~ – Paresh Thakor Feb 01 '21 at 12:39
8

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.
  1. 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.
  1. 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

Ghassane Aboughazaouat
  • 333
  • 4
  • 7
0

You must give the correct value for your application in app.json and also specify this value when creating the cliendID in the GoogleDeveloper console. android.package and ios.bundleIdentifier in your app.json should have a string value like "domain.subdomain1.subdomain2". For example app.json:

"ios": {
  "bundleIdentifier": "com.mydomain.myawsmapp"
  }
"android": {
  "package": "com.mydomain.myawsmapp"
}
Roman
  • 461
  • 4
  • 4
0

I was using same Client Id in androidClientId: ANDROID_CLIENT_ID and androidStandaloneAppClientId: ANDROID_CLIENT_ID by changing the client id of one of them it Worked for me

Anurag Dabas
  • 23,866
  • 9
  • 21
  • 41
Meet Patel
  • 11
  • 1
0

While using working with Expo Go, you only need:

  • in Google.useAuthRequest, expoClientId set
  • in app.json package identifiers set to host.exp.exponent

While working with android/ios build you can use your package identifier and iosClientId or androidClientId

Minaro
  • 173
  • 2
  • 11