expo-auth-session/providers/google not working on standalone app: invalid_scheme

user_3741900 0
Viewed 3227

I hope that someone can help me with the following issue which I’ve been struggling with for a while.

I am trying to use expo-auth-session/providers/google for Google Auth on Android in Expo SDK 39.

I have followed the guide here but everything I do ends up with a google message:

Error 400: invalid_request Invalid parameter value for redirect_uri: Invalid scheme: com.my_domain.myapp:/oauthredirect

And I just can not understand what am I doing wrong.

I need to mention the fact that in the Expo Client the login/signup works perfectly with the exact same code.

I checked the credentials an infinite amount of times and what bothers me is that it works in the expo client but not on the standalone app so I am sure it’s something related to the google config but I don’t know what.

Here is my app.json:

{
  "expo": {
    ...
    "scheme": "myapp",
    "platforms": [
      "ios",
      "android"
    ],
    ...
    "android": {
      "package": "com.my_domain.myapp",
      ...
    }
  }
}

And my integration:

import React, { useState } from 'react';
import * as WebBrowser from "expo-web-browser";
import * as Google from 'expo-auth-session/providers/google';
import PillButton from '../UI/PillButton';

const SignupCmp = props => {
    const [browserOpen, setBrowserOpen] = useState(null);

    const [request, response, promptAsync] = Google.useAuthRequest({
        expoClientId: '123-myuniqueid.apps.googleusercontent.com',
        androidClientId: '123-myuniqueid.apps.googleusercontent.com'
    });

    useEffect(() => {
        WebBrowser.warmUpAsync().then(r => console.log('warmed'));

        return () => {
            WebBrowser.coolDownAsync().then(r => console.log('cooled'));
        };
    }, []);

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


    const handleBrowserOpen = async (url) => {
        let result = await WebBrowser.openBrowserAsync(url );
        setBrowserOpen(result);
    }

    return (
        <View>
            <PillButton
                disabled={!request}
                title={I18n.t('authScreens.signupWithGoogle')}
                type="solid"
                onPress={() => { promptAsync().then(async val => {
                  
                  props.googleAuth(val.authentication.accessToken);
                }) }}
            />
        </View>
    );
};

export default SignupCmp;

I really need help on this one since I am out of ideas.

UPDATE

I updated the redirectUri property in the useAuthRequest as it follows:

const [request, response, promptAsync] = Google.useAuthRequest({
    expoClientId: '123-myuniqueid.apps.googleusercontent.com',
    androidClientId: '1234-myuniqueid.apps.googleusercontent.com',
    redirectUri: AuthSession.makeRedirectUri({
      native: 'myapp:/oauthredirect',
      useProxy: true
    }),
    scopes: [
      'profile',
      'email'
    ]
  }, {});

And now the message has changed to

Invalid parameter value for redirect_uri: Missing authority: myapp:/oauthredirect

The login in the expo client still works as it should.

I tried creating a new API key in the Google Console and tried different settings there but nothing seems to have worked.

I could really do with some help. Thank you!

google-signin expo react-native
2 Answers

I ended up using import * as GoogleSignIn from 'expo-google-sign-in'; instead of the import * as Google from 'expo-auth-session/providers/google';

It seems this is the only way I can get it to work properly.

user_37419000

Make sure you're not running your expo with an offline tag "expo start --offline" ---- this is wrong instead start it with "expo start"....... that was how i solved my issue on android

// code goes like these

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

    const [request, response, promptAsync] = Google.useAuthRequest({
             expoClientId: 'xxxxxxxx', //get this from google console
      
    });

     useEffect(() => {
     if (response?.type === 'success') {
       const { authentication } = response;
       // an access token will be returned in the authentication object
           getGoogleUser(authentication.accessToken)
      }
     }, [response]);

     const getGoogleUser = async (accessToken) => {
       try{
         let gUserReq = await 
           axios.get('https://www.googleapis.com/oauth2/v2/userinfo',
           {
            headers: {
                Authorization: `Bearer ${accessToken}`
            }
           }
         );
    
    console.log(gUserReq.data)
}
catch(error){
    console.log('GoogleUserReq error: ', error);
}

}

user_136399690
Related