expo: Can't login using google login method

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)

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>
   )
  }

About this issue

Original URL
State: closed
Created 2 years ago
Comments: 21 (2 by maintainers)

Most upvoted comments

use “expo-auth-session”: “~4.1.0” fixed my problem

ahmetariforhan on Nov 24, 2023

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

brentvatne on Feb 9, 2022

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()}
    />
  )
}

aravindvakil on Oct 27, 2023

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.

vincentdesmares on Mar 9, 2023

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

LucasLFurini on Aug 25, 2022

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

2MO5 on Apr 6, 2022

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

Befkadu1 on Mar 31, 2022

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

Befkadu1 on Feb 9, 2022