I used LogInAsync function from @expo-google-app-auth package. It works until it opens browser window. In browser window, It is throwing 400: Invalid_request error. Someone's help would be highly appreciated.
Code for those who live in hurry..
import { TouchableOpacity, StyleSheet, Text, View } from "react-native";
import { AntDesign } from "@expo/vector-icons";
import * as Google from "expo-google-app-auth";
export default function SignIn() {
const LogInHandler = async () => {
const { type, accessToken, user } = await Google.logInAsync({
androidClientId: "ClientId_From_GoogleCloud",
androidStandaloneAppClientId: "ClientId_From_GoogleCloud",
});
if (type === "success") {
let userInfoResponse = await fetch(
"https://www.googleapis.com/userinfo/v2/me",
{
headers: { Authorization: Bearer ${accessToken} },
}
);
console.log(userInfoResponse);
}
};
return (
<View style={styles.container}>
<Text style={styles.header}>Signing Options</Text>
<TouchableOpacity
style={styles.btn}
onPress={() => {
LogInHandler();
}}
>
<AntDesign name="google" size={24} color="white" />
<Text style={styles.txt}> Continue with Google</Text>
</TouchableOpacity>
</View>
);
}
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", alignItems: "center", }, btn: { flexDirection: "row", width: 200, borderRadius: 10, backgroundColor: "#516BEB", justifyContent: "center", padding: 10, alignItems: "center", }, txt: { color: "white", fontWeight: "bold", }, header: { fontWeight: "bold", fontSize: 30, marginBottom: 50, }, });``<br>
`