How to fix Google expo auth session sign in Error "Something went wrong when trying to finish signing in"

user_14602509 0
Viewed 2392

I'm trying to implement google sign in in my expo using expo-auth-session, When I click on my gmail to sign in, I'm redirected to this screen saying "Something went wrong when trying to finish signing in. Please close this screen to go back to the app".

//Google auth code:
    import * as Google from 'expo-auth-session/providers/google';
    const [request, response, promptAsync] = Google.useAuthRequest({
        expoClientId: config.google.expoClientId,
        redirectUri: config.google.redirectUri,
      });

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

    //Button that calls the google sign in
    <Button iconName={'google'} iconPressed={() => promptAsync({useProxy: true})} />
google-signin expo react-native reactjs
2 Answers

I ended up using expo-google-app-auth, for some reason that I'm yet to figure out, you have to use host.expo.exponent as your package name and bundle identifier in the google developer console for this library to work. Code:

import { Alert } from 'react-native';
import * as Google from 'expo-google-app-auth'

const GoogleLogin = async () => {
    //Get those keys from the google developer console
    const { iosClientId, androidClientId } = config.google
    const { type, user } = await Google.logInAsync({
        iosClientId,
        androidClientId,
    });

    if (type === 'success') {
        /* `accessToken` is now valid and can be used to get data from the Google API with HTTP requests */
        return { email: user.email, id: user.id }
    } else {
        Alert.alert("Google login error.")
    }
}

export default GoogleLogin;
user_146025090

I think you can try like this

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 as any).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; // you will get more data in the user object
            .......
        }
    }
    catch(error){
        console.log('GoogleUserReq error: ', error);
    }
}

 return (
    <View>
      <Button 
        onPress={() => promptAsync() }
      />
    </View>
  );
user_77679980
Related