Can't login using google login method

[Befkadu1]

Summary

It was working well when I used expo-google-app-auth but it is deprecated in favor of expo-auth-session. Then
I followed this step

• Application Type: Web Application
• Give it a name (e.g. "Expo Go Proxy").
• URIs (Authorized JavaScript origins): https://auth.expo.io/
• Authorized redirect URIs: https://auth.expo.io/@my-username/my-project-slug

It is working good locally but in production I get Error 400: redirect_uri_mismatch. Should I use different URIs (other than https://auth.expo.io/@my-username/my-project-slug ) for production?

Managed or bare workflow? If you have ios/ or android/ directories in your project, the answer is bare!

managed

What platform(s) does this occur on?

Android

SDK Version (managed workflow only)

44

Environment

Expo CLI 5.0.3 environment info:
System:
OS: macOS 11.4
Shell: 5.8 - /bin/zsh
Binaries:
Node: 14.17.5 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 7.20.6 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.9.2 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
Android SDK:
API Levels: 28, 29
Build Tools: 28.0.3, 29.0.3
System Images: android-28 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.6 AI-192.7142.36.36.6392135
Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
npmPackages:
babel-preset-expo: 9.0.2 => 9.0.2
expo: ^44.0.0 => 44.0.6
react: 17.0.1 => 17.0.1
react-dom: 17.0.1 => 17.0.1
react-native: 0.64.3 => 0.64.3
react-native-web: 0.17.1 => 0.17.1
npmGlobalPackages:
eas-cli: 0.46.0
expo-cli: 5.0.3
Expo Workflow: managed

Reproducible demo

import * as Google from 'expo-auth-session/providers/google';
import * as WebBrowser from 'expo-web-browser';

WebBrowser.maybeCompleteAuthSession();
....
const [request, response, promptAsync] = Google.useAuthRequest({
        androidClientId: config.androidClientId,
        iosClientId: config.iosClientId,
        expoClientId: config.expoClientId,
        scopes: config.scopes,
    });

useEffect(() => {
   if (response?.type === 'success') {
       const { authentication } = response;
       getGoogleUser(authentication.accessToken)
   }
}, [response]);

const getGoogleUser = async (accessToken: string) => {

  try{
        const response = await fetch('https://www.googleapis.com/userinfo/v2/me', {
            headers: { Authorization: `Bearer ${accessToken}`}
        });

        const user = response.json()
        if (user?.email) {
            const { email, name } = user; 
            .......
        }
    }
    catch(error){
        console.log('GoogleUserReq error: ', error);
    }
}
    
 return (
   <TouchableOpacity style={styles.socialMedias}>
                <IconButton
                    icon="google"
                    color={"#c71610"}
                    size={50}
                    onPress={() => promptAsync()}
                />
            </TouchableOpacity>
   )
  }

[brentvatne]

the google provider defaults to not using the proxy outside of Expo Go, so you would need to set up a redirect uri for your app scheme. you can alternatively force usage of the proxy by passing in useProxy: true to useAuthRequest

[Befkadu1]

you would need to set up a redirect uri

Is it a different uri than the one I used https://auth.expo.io/@my-username/my-project-slug ? Or just only passing useProxy: true like the below code is enough?

<IconButton
                    icon="google"
                    color={"#c71610"}
                    size={50}
                    onPress={() => promptAsync({useProxy: true)}
                />
                

I would say it might be good to add some docs about it.

The other thing, Logging using google throws warnings when navigating to the redirect uri and back to my app. I use different login methods like Facebook only the google login method throws warnings. Is it ok to open a new issue?

The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration.
at node_modules/@react-navigation/native/src/useLinking.native.tsx:176:79 in listener
at node_modules/@react-navigation/native/src/useLinking.native.tsx:39:23 in callback
at node_modules/react-native/Libraries/vendor/emitter/_EventEmitter.js:135:10 in EventEmitter#emit

[brentvatne]

you would need to set up a redirect uri

Is it a different uri than the one I used https://auth.expo.io/@my-username/my-project-slug ? Or just only passing useProxy: true like the below code is enough?

you would need to add a redirect uri like yourscheme:// if you don't want to use the proxy. if you do use the proxy, you need to change the useAuthRequest method and not promptAsync - you could add useProxy: true after the scopes option for example

[Befkadu1]

you would need to add a redirect uri like yourscheme:// if you don't want to use the proxy. if you do use the proxy, you need to change the useAuthRequest method and not promptAsync - you could add useProxy: true after the scopes option for example

It works awesome. Thank you

[2MO5]

you would need to add a redirect uri like yourscheme:// if you don't want to use the proxy. if you do use the proxy, you need to change the useAuthRequest method and not promptAsync - you could add useProxy: true after the scopes option for example

It works awesome. Thank you

Hey there,

How did you work it out?

Did you add a different redirect uri?

Thanks

[Befkadu1]

It works awesome. Thank you

Hey there,

How did you work it out?

Did you add a different redirect uri?

Thanks

The issue was the androidClientId I used. I have different client ids like androidClientId , webClientId , expoClientId and so on. In my case I used the wrong one. In short yes I added a different redirect uri

[2MO5]

Thanks for the prompt reply!

I was able to cut through that obstacle. But now I am getting an authorization error saying that my request is invalid!

Error 400: invalid_request

Do you know what might be causing this error?
Btw, I'm trying to do this with firebase here!

[2MO5]

you would need to set up a redirect uri

Is it a different uri than the one I used https://auth.expo.io/@my-username/my-project-slug ? Or just only passing useProxy: true like the below code is enough?

you would need to add a redirect uri like yourscheme:// if you don't want to use the proxy. if you do use the proxy, you need to change the useAuthRequest method and not promptAsync - you could add useProxy: true after the scopes option for example

Hello there!

Could you let me know what you would add for that yourscheme

Thanks

[VishalMishra0]

i am also getting the same error too, what was that uri "yourscheme://?" and how could i fix this issue and i am also doing this from firebase

[yoshifumi4423]

@VishalMishra0

It is working good locally but in production I get Error 400: redirect_uri_mismatch.

I also faced same issue in Android Standalone app, but it works in ExpoGo.
This was caused by wrong ClientID of options in Google.useAuthRequest.

I used correct androidClientId for Android ClientID not ExpoGo ClientID in https://console.cloud.google.com/apis/credentials.

const [request, response, promptAsync] = Google.useAuthRequest({
expoClientId: config.expoClientId, // This ClientID is for ExpoGo app
androidClientId: config.androidClientId, // This ClientID is for Android Standalone app
...
});

I hope it helps.

[KhNishad]

@VishalMishra0

It is working good locally but in production I get Error 400: redirect_uri_mismatch.

I also faced same issue in Android Standalone app, but it works in ExpoGo. This was caused by wrong ClientID of options in Google.useAuthRequest.

I used correct androidClientId for Android ClientID not ExpoGo ClientID in https://console.cloud.google.com/apis/credentials.

const [request, response, promptAsync] = Google.useAuthRequest({ expoClientId: config.expoClientId, // This ClientID is for ExpoGo app androidClientId: config.androidClientId, // This ClientID is for Android Standalone app ... });

I hope it helps.

I have the same issue , I have used correct clientId for both expo and android . Its working fine in emulator but not working on standalone it showing 400:invalid_request 'you cant sign in to this app because it dosen't comply with google OAuth 2.0 policy for keeping app secure.

[VishalMishra0]

@VishalMishra0

It is working good locally but in production I get Error 400: redirect_uri_mismatch.

I also faced same issue in Android Standalone app, but it works in ExpoGo. This was caused by wrong ClientID of options in Google.useAuthRequest.
I used correct androidClientId for Android ClientID not ExpoGo ClientID in https://console.cloud.google.com/apis/credentials.
const [request, response, promptAsync] = Google.useAuthRequest({ expoClientId: config.expoClientId, // This ClientID is for ExpoGo app androidClientId: config.androidClientId, // This ClientID is for Android Standalone app ... });
I hope it helps.

I have the same issue , I have used correct clientId for both expo and android . Its working fine in emulator but not working on standalone it showing 400:invalid_request 'you cant sign in to this app because it dosen't comply with google OAuth 2.0 policy for keeping app secure.

actually The problem raising for only android Standalone App bacause when i am going signup in production mode with any gmail account its redirect to login page instead of my project and user are not created in firebase too but its prefectly works in expo app and development phase as well as IOS, only problem occurs in Android Standalone

PS: Social oauth i.e facebook and google login both are not work in android Standalone app for now, I will try all over the solution on internet, documentation, etc

[Befkadu1]

Most of the time the error is caused by not giving the correct client ids.

Here is how I did it

    const [request, response, useAuthRequest] = Google.useAuthRequest({
        androidClientId: androidClientId,
        expoClientId: expoClientId, // To login using expo go app
        scopes: config.google.scopes,
        ...{useProxy: true}
    });
    

Here in the pic below you can see how you can get the androidClientId

Here in the pic below you can see how you can get the expoClientId

[VishalMishra0]

Most of the time the error is caused by not giving the correct client ids.

Here is how I did it

    const [request, response, useAuthRequest] = Google.useAuthRequest({
        androidClientId: androidClientId,
        expoClientId: expoClientId, // To login using expo go app
        scopes: config.google.scopes,
        ...{useProxy: true}
    });
    

Here in the pic below you can see how you can get the androidClientId

Here in the pic below you can see how you can get the expoClientId

Nope it didn't work for me and while i put those sha key which uses on release time for our standalone app,

here is mine client id for expo and android

if you do login successfully with google account in standalone app so, can you provide your repo on my linkedin

https://www.linkedin.com/in/vishalkmmishra/

[yoshifumi4423]

@VishalMishra0
What kind of error did you get in Android Standalone app?

If you got error Error 400: redirect_uri_mismatch, I guess there are 2 causes. 1st you maybe used wrong clientID. 2nd your configuration of Android is wrong in Google Cloud Console. You might need to check #16220 (comment) and https://docs.expo.dev/guides/authentication/#google.

If you got error {"type":"dismiss"} from useIdTokenAuthRequest or useAuthRequest, I think it's hard to resolve because there are relevant unresolved issues. I'm stuck on this problem too.
#12044
#6679

[LucasLFurini]

Happens only in production, in expo go works fine!
When I use useProxy: true the workflow works and when get back to the app nothing happens and when I try to use makeRedirectUri({
native:"my-scheme://"
})
I get the error 400: invalid_request Doesnt comply with Google OAuth 2.0

I'm using managed project

[vincentdesmares]

Exact same case as @LucasLFurini right now. Did you figured out what is wrong. It's strange that the error is related to the redirectUri while in android mode it should not be required as it's not filtered/checked like on the web where you need to declare the acceptable sources.

[DonUggioni]

Happens only in production, in expo go works fine! When I use useProxy: true the workflow works and when get back to the app nothing happens and when I try to use makeRedirectUri({ native:"my-scheme://" }) I get the error 400: invalid_request Doesnt comply with Google OAuth 2.0

I'm using managed project

Have you tried using the makeRedirectUri function imported from expo-auth-session?

const [request, response, promptAsync] = useAuthRequest(
{
clientId: 'CLIENT_ID',
redirectUri: makeRedirectUri({
scheme: 'your.app'
}),
},

);

It worked for me, I passed the package name to the scheme.

[NataliiaRybalka]

Try to change "expo-auth-session" version to "^4.0.3". And code:
import * as AuthSession from 'expo-auth-session';

const signin = async () => {
const redirectUri = AuthSession.getRedirectUrl();
const response = await AuthSession.startAsync({
authUrl:
https://accounts.google.com/o/oauth2/auth?client_id=${EXPO_CLIENT_ID}&redirect_uri=${redirectUri}&response_type=token&scope=openid%20profile%20email
});
};

It works for me.

[aravindvakil]

Switching to "expo-auth-session": "~4.0.3" resolved my issue.

import * as Google from 'expo-auth-session/providers/google'
import * as WebBrowser from 'expo-web-browser'
WebBrowser.maybeCompleteAuthSession()

export const GoogleLoginButton = () => {
  // Replace actual IDs with placeholders
  const googleAuthConfig = {
    iosClientId: '<IOS_CLIENT_ID>',
    androidClientId: '<ANDROID_CLIENT_ID>',
    webClientId: '<WEB_CLIENT_ID>'
  }

  const [request, response, promptAsync] = Google.useAuthRequest(googleAuthConfig)

  return (
    <Button
      title='Sign in with Google'
      onPress={() => promptAsync()}
    />
  )
}

[ahmetariforhan]

use "expo-auth-session": "~4.1.0" fixed my problem