Please provide the following:
- SDK Version: 6.0.1
- Platforms(Android/iOS/web/all): Android
- Add the appropriate “Tag” based on what Expo library you have a question on.
Hello, I am trying to implement google signin into a newly created react native project.
In the Expo Go version everything is working properly, however, when I build the standalone version for my android device, the google signin prompt returns a dismissed result after closing the prompt.
I tried to reread and redo the documentation steps multiple times but I don’t know what I am missing.
I made sure to have the same clientIds in the useAuthRequest
method and in google developer console.
import { StatusBar } from 'expo-status-bar';
import {StyleSheet, Text, View, Image, Button, Alert} from 'react-native';
import * as Google from 'expo-auth-session/providers/google';
import * as WebBrowser from 'expo-web-browser';
import React from "react";
interface User {
name: string,
email: string,
picture: string,
}
export default function App() {
const [accessToken, setAccessToken] = React.useState<string | null>(null);
const [userInfo, setUserInfo] = React.useState<User | null>(null);
const [txt, setTxt] = React.useState("");
WebBrowser.maybeCompleteAuthSession();
const [request, response, promptAsync] = Google.useAuthRequest({
androidClientId: 'copied from google developer console',
expoClientId: 'copied from google developer console',
webClientId: 'copied from google developer console'
}, );
React.useEffect(() => {
setTxt(response?.type!) //here it sets it to dismissed
if(response?.type === "success") {
setAccessToken(response.authentication!.accessToken);
}
}, [response])
const getUserInfo = async () => {
let userInfoResponse = await fetch("https://www.googleapis.com/userinfo/v2/me", {
headers: { Authorization: `Bearer ${accessToken}` }
});
userInfoResponse.json().then(userInfo => {
setUserInfo(userInfo);
});
}
const showUserInfo = () => {
if(userInfo) {
const {name, email, picture} = userInfo;
return (
<View style={styles.container}>
<Text>Standalone version</Text>
<Text>{email}</Text>
<Text>{name}</Text>
<Image source={{uri: picture}} style={styles.profilePic} />
</View>
)
}
}
return (
<View style={styles.container}>
<Text>{txt}</Text>
{showUserInfo()}
<Text>{accessToken}</Text>
<Button title={accessToken ? "Get user info" : "Login"} onPress={accessToken ? getUserInfo : () => promptAsync({useProxy: true, showInRecents: true})} />
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
profilePic: {
width: 100,
height: 100,
}
});
What might be causing a dismissed result in my case?
Thanks in advance