I have had the same issue, have managed to get it working using expo-dev-client.
I didn't find a way to fix this for Expo Go - not sure if there is one currently. It seems like using Oauth google login on IOS, currently requires building the app.
Once you configure the build, you can use
import { makeRedirectUri } from 'expo-auth-session';
to get the correct redirect URL.
const [request, response, promptAsync] = Google.useAuthRequest({
clientId: 'xxxx',
iosClientId:
'xxxx',
redirectUri: makeRedirectUri()});
Also remember to generate IOS credentials in the google console.
Answer from bonbonvoyage on Stack OverflowVideos
What happened to seamless auth integrations with expo apps?
I'm using the expo-router and supabase. I want to implement google auth and I have two options:
expo-auth-session : the docs are not up to date, for implementing google auth with supabase the docs refer to the supabase docs which uses react-native-google-signin.
react-native-google-signin : the free/original version will be deprecated in 2025 so there's no point of using this and I do not want to use their paid version.
What should I do?
Expo on their page wants us to use expo-auth-session over expo-google-app-auth.
But,
The expo-auth-session flow throws an ugly / scammy looking alert to the user before going into the google auth flow in an external browser, after showing a browser selection. Users are likely to drop off at this point itself, this is bad UX.
expo-google-app-auth doesn't do this, it seems to load what looks like a webiew inline and shows a clean google account selection screen.
However if you ignore this deprecation and continue using expo-google-app-auth, there is a runtime warning like "Deprecated: You will need to use expo-google-sign-in to do server side authentication outside of the Expo client" which I find confusing. Don't you have to do server side authentication (if you need to) regardless of which solution you use?
Thoughts around this? If you use the expo managed workflow, which one did you pick? I am at a bit of a dilemma...
So it's possible to get the idToken if you that's all you are looking for. You need to modify your code like this:
const [request, response, promptAsync] = Google.useAuthRequest({
*responseType: "id_token",*
expoClientId: 'my-expo-id',
iosClientId: 'my-ios-id',
});
You will also have to access the "params" key rather than "authentication," which will show mostly null :). For me it works at least since the rest of the information was useless. HTH!
Edit: I realized that I need to get an Access Token to use google drive in my app, and thus now I need both tokens and submitted a bug report here https://github.com/expo/expo/issues/12808 to try to get this resolved.
You can get user details like this:
First, get the access token from the response:
const accessToken = response.authentication.accessTokenSend GET request to the following endpoint with the accessToken you obtained in step 1:
axios.get('https://www.googleapis.com/oauth2/v3/userinfo?
access_token='+ACCESS-TOKEN-HERE)
.then(function(response){
const userDetails = response.data
console.log(userDetails)
})
» npm install expo-auth-session
this is working for me
import { makeRedirectUri } from 'expo-auth-session';
import Constants from 'expo-constants';
import * as Google from 'expo-auth-session/providers/google';
const EXPO_REDIRECT_PARAMS = {
useProxy: true,
projectNameForProxy: '@yourUsername/yourScheme',
};
const NATIVE_REDIRECT_PARAMS = { native: 'yourScheme://' };
const REDIRECT_PARAMS =
Constants.appOwnership === 'expo'
? EXPO_REDIRECT_PARAMS
: NATIVE_REDIRECT_PARAMS;
const GOOGLE_CONFIG = {
androidClientId: '...',
webClientId: '...',
iosClientId: '...',
redirectUri: makeRedirectUri(REDIRECT_PARAMS),
};
const LoginPage = ()=> {
const [request, response, promptAsync] = Google.useAuthRequest(GOOGLE_CONFIG)
...
}
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 },
});