useAuthRequest redirectUri Not Found

[jameswu21]

1. SDK Version: ~49.0.7
2. Platforms(Android/iOS/web/all): iOS

I am trying to create a LoginScreen that will let me log in with Google. The pop up will show and I’m able to actually log in to a google account even-- however upon successfully logging in, the redirectURI I have just says “Not Found” and I can’t exit the popup window without clicking “Cancel”.

With what I’ve found online, I’ve been trying to do a redirectUri with the format: https://auth.expo.io/EXPO_USERNAME/SLUG

And have also updated my Google Cloud console to have the same Authorized redirect URI, but it doesn’t help. Basically, I am trying to figure out how to create a new redirectURI that will route back to my app and return me a response object like so:
Object{ "type": "success"}

…If the user signs in correctly. This is the relevant code I have:

import React, { useEffect } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { useNavigation } from '@react-navigation/native'; // Import useNavigation hook
import { COLORS } from '../styles/Global';
import { useAuthRequest } from 'expo-auth-session';

export default function LoginScreen() {
    const navigation = useNavigation(); // Get navigation object

    const [request, response, promptAsync] = useAuthRequest(
        {
            clientId: 'VALID_CLIENT_ID_HERE',
            redirectUri: 'https://auth.expo.io/EXPO_USERNAME/SLUG',
            scopes: ['openid', 'profile', 'email'],
            useProxy: true,
        },
        { authorizationEndpoint: 'https://accounts.google.com/o/oauth2/v2/auth' }
    );

    useEffect(() => {
        console.log(response);
        if (response && response.type === 'success') {
            console.log('Google Login Successful:', response.params);
            navigation.navigate('Tabs');
        }
    }, [response, navigation]);

    return (
        <View style={styles.container}>
            <Text style={styles.title}>Welcome to APPNAME!</Text>
            <TouchableOpacity onPress={() => promptAsync()} style={styles.button}>
                <Text style={styles.buttonText}>Login with Google</Text>
            </TouchableOpacity>
        </View>
    );
}

Of course in my code,
“MY_VALID_CLIENT_ID” and “https://auth.expo.io/EXPO_USERNAME/SLUG” are their respective actual values. I’m mostly concerned with the auth.expo.io link though, as I think that’s the issue. Does anyone know how to fix this?

Thanks so much! Have been knocking my head on this the entire day today.

What it looks like after entering in the Google account password: