React Native Expo Google Sigin Using expo-auth-session redirect issue

Question

I am using expo-auth-session for Google login in Expo App. But when try to hit the login button I am getting redirect URI mismatch issue. Any help would be appreciated. Below

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, View, Text, Image, Button } from 'react-native';
import * as Google from 'expo-auth-session/providers/google';
import * as WebBrowser from 'expo-web-browser';

WebBrowser.maybeCompleteAuthSession();
const LoginScreen = () => {

const [accessToken, setAccessToken] = React.useState();
const [userInfo, setUserInfo] = React.useState();
const [message, setMessage] = React.useState();

const [request, response, promptAsync] = Google.useAuthRequest({
    androidClientId: "androidClientId",
    iosClientId: "iosClientId",
    expoClientId: "expoClientId"
});

React.useEffect(() => {
    setMessage(JSON.stringify(response));
    if (response?.type === "success") {
        setAccessToken(response.authentication.accessToken);
    }
}, [response]);

async function getUserData() {
    let userInfoResponse = await fetch("https://www.googleapis.com/userinfo/v2/me", {
        headers: { Authorization: `Bearer ${accessToken}` }
    });

    userInfoResponse.json().then(data => {
        setUserInfo(data);
    });
}

function showUserInfo() {
    if (userInfo) {
        return (
            <View style={styles.userInfo}>
                <Image source={{ uri: userInfo.picture }} style={styles.profilePic} />
                <Text>Welcome {userInfo.name}</Text>
                <Text>{userInfo.email}</Text>
            </View>
        );
    }
}

return (
    <View style={styles.container}>
        {showUserInfo()}
        <Button
            title={accessToken ? "Get User Data" : "Login"}
            onPress={accessToken ? getUserData : () => { promptAsync({ useProxy: false, showInRecents: true }) }}
        />
        <StatusBar style="auto" />
    </View>
);
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    userInfo: {
        alignItems: 'center',
        justifyContent: 'center',
    },
    profilePic: {
        width: 50,
        height: 50
    }
});

export default LoginScreen;

Answer 1

I have lost around 2 days and I wasn't able to configure it properly. I ended up using this package instead: https://docs.expo.dev/versions/latest/sdk/google-sign-in/

I know it's deprcated, but when I've done all setup following instructions everything started to work.

I will be following if there are some updates in next expo sdk version, but right now it's not working as expected :(

Edit: In expo go everything was working fine, but in standalone app it wasn't working