i get invalid_request and i cant solve it. im trying with Expo Go and Native. Same problem. Could anyone give me a hand please?.
import { makeRedirectUri } from "expo-auth-session";
import * as Google from "expo-auth-session/providers/google";
import { LinearGradient } from "expo-linear-gradient";
import { router } from "expo-router";
import * as WebBrowser from "expo-web-browser";
import { useEffect } from "react";
import { Image, StyleSheet, Text } from "react-native";
import SocialLoginButton from "./commons/socialLoginButton";
WebBrowser.maybeCompleteAuthSession();
export default function LoginScreen() {
const redirectUri = makeRedirectUri({
scheme: "app",
});
console.log("Redirect URI:", redirectUri);
const [request, response, promptAsync] = Google.useAuthRequest({
webClientId: "",
androidClientId: "",
scopes: ["profile", "email"],
redirectUri,
});
useEffect(() => {
if (response?.type === "success") {
const { authentication } = response;
fetch("https://www.googleapis.com/oauth2/v3/userinfo", {
headers: { Authorization: `Bearer ${authentication?.accessToken}` },
})
.then(res => res.json())
.then(userInfo => {
console.log("Google User Info:", userInfo);
router.replace("/homeScreen");
});
}
}, [response]);
return (
<LinearGradient colors={["#6EC1E4", "#8364E8"]} style={styles.container}>
<Image
source={require("../assets/images/logo-blanco.png")}
style={styles.logo}
resizeMode="contain"
/>
<Text style={styles.title}>Hubbly</Text>
<Text style={styles.subtitle}>Log in and connect with new experiences.</Text>
<SocialLoginButton
backgroundColor="#4285F4"
icon="google"
text="Inicia sesión con Google"
textColor="#fff"
onPress={() => promptAsync()}
/>
</LinearGradient>
);
}
const styles = StyleSheet.create({
container: { flex: 1, justifyContent: "center", alignItems: "center", paddingHorizontal: 20 },
logo: { width: 100, height: 100, marginBottom: 20 },
title: { fontSize: 28, fontWeight: "bold", color: "white", marginBottom: 10 },
subtitle: { fontSize: 16, color: "white", textAlign: "center", marginBottom: 40 },
moreButton: { flexDirection: "row", alignItems: "center", marginTop: 16 },
moreText: { color: "#fff", fontSize: 16, marginRight: 5 },
terms: { color: "#fff", fontSize: 12, textAlign: "center", marginTop: 30, paddingHorizontal: 20 },
});