I'm trying to implement Google Signin using expo-auth-session and following the guide here. Everything works fine in Expo Client in my GenyMotion emulator. I made the configuration for Android standalone app and built an apk to test on an actual device. On my phone, after I press the Sign In button, a browser is launched and let me pick the Google account I want to use. But after that, the browser closes, returns to the app and nothing else happen. A fix would be warmly welcomed. Here is the second example code I wrote to test with a fresh new project:
import { StatusBar } from 'expo-status-bar';
import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import axios from 'axios';
import * as WebBrowser from 'expo-web-browser';
import * as Google from 'expo-auth-session/providers/google';
WebBrowser.maybeCompleteAuthSession();
export default function App() {
const [gUser, setGUser] = useState(null);
const [reqError, setReqError] = useState('');
const [request, response, promptAsync] = Google.useAuthRequest({
expoClientId: 'xxxxxxxxxxxx.apps.googleusercontent.com',
androidClientId: 'xxxxxxxxxxx.apps.googleusercontent.com',
// iosClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
// webClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
});
useEffect(() => {
if (response?.type === 'success') {
const { authentication } = response;
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);
setGUser(gUserReq.data);
}
catch(error){
console.log('GoogleUserReq error: ', error);
setReqError(error);
}
}
return (
<View style={styles.container}>
{
reqError !== '' &&
<View>
<Text>There was an error</Text>
<Text>{JSON.stringify(reqError, 'reqEr', 4)}</Text>
</View>
}
<Text style={{
fontWeight: 'bold'
}}>Signed user</Text>
{
gUser === null &&
<Text>No user</Text>
}
{
gUser !== null &&
<Text>{JSON.stringify(gUser, null, 4)}</Text>
}
<Button
disabled={!request}
title="Sign in"
onPress={() => promptAsync()}
/>
<StatusBar style="auto" />
</View>
);
}
And here comes the expo diagnostics output:
Expo CLI 3.27.13 environment info:
System:
OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa)
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 10.19.0 - /usr/bin/node
npm: 6.14.4 - /usr/bin/npm
npmPackages:
expo: ^38.0.0 => 38.0.10
react: 16.13.1 => 16.13.1
react-dom: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz => 0.62.2
react-native-web: ~0.13.12 => 0.13.18
npmGlobalPackages:
expo-cli: 3.27.13
Expo Workflow: managed
Thanks in advance.
So, looks like this is a bug with the expo-auth-session
package, I'm not sure why, but this condition here may cause this issue:
setFullResult(fullResult ?? result);
changing it to:
setFullResult(result);
Seems to fix it for me. You can use patch-package if that fix works for you
I've also opened an issue about this because I believe that this is a bug https://github.com/expo/expo/issues/11714
Edit:
you also need to add the result as a dependency of the effect that contains the setFullResult
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With