AuthSession proxy error when trying to implement Expo AuthSession

Question

I'm trying to get my expo AuthSession to work (sign up with google) in my react native app. I have been following this clip (https://www.youtube.com/watch?v=YX7IWOQIKA0) on youtube but get an error as soon as i try to navigate to the login screen.

The error message i get is:

Cannot use the AuthSession proxy because the project full name is not defined. Prefer AuthRequest (with the useProxy option set to false) in combination with an Expo Development Client build of your application. To continue using the AuthSession proxy, specify the project full name (@owner/slug) using the projectNameForProxy option.

Notes:

The app is working overall but breaks completely when i try to navigate to the LoginScreen where the code below exists. I have checked that the "https://auth.expo.io/@owner/slug" in the Google Cloud Credentials is correct. Have i missed to add something that i should've? I should also add that i am aiming to get this to work on both IOS and Android devices.

My relevant code to the problem is in my LoginScreen.tsx and it looks like this:

Imports:

import * as WebBrowser from 'expo-web-browser';
import * as Google from 'expo-auth-session/providers/google';
WebBrowser.maybeCompleteAuthSession();

GoogleAuthRequest:

    const [request, response, promptAsync] = Google.useAuthRequest({
        expoClientId: '*THE CLIENT ID FROM GOOGLE CLOUD CREDENTIALS IS PASTED HERE*',
        iosClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
        androidClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
        webClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
    });

Code that runs when pressing "continue with google":

    const signUpGoogleHandler = async () => {
        const response = await promptAsync();
        if (response.type === 'success') {
            const {access_token } = response.params;
            console.log('res params ', access_token);
        }
        console.log('test123');
        const provider = new GoogleAuthProvider();
        await signInWithRedirect(auth, provider);
        getRedirectResult(auth)
            .then((result) => {
                const credential = GoogleAuthProvider.credentialFromResult(result);
                const token = credential.accessToken;
                const user = result.user;
            }).catch((error) => {
                const errorCode = error.code;
                const errorMessage = error.message;
                const email = error.customData.email;
                const credential = GoogleAuthProvider.credentialFromError(error);
            })
    }

How my Client ID for my Web application is setup in Google Cloud (the Authorized redirect URIs is written as https://auth.expo.io/@myusername/slugname): Client ID for Web application

Ronald Tchuekou · Answer 1 · 2023-04-30T05:04:56.023

At first, add second params to Google.useAuthRequest like this

const [request, response, promptAsync] = Google.useAuthRequest({
  expoClientId: '*THE CLIENT ID FROM GOOGLE CLOUD CREDENTIALS IS PASTED HERE*',
  iosClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
  androidClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
  webClientId: 'GOOGLE_GUID.apps.googleusercontent.com',
},{
  projectNameForProxy: "@owner/slug"
});

Then when calling the promptAsync method, you pass them the following object:

{
  projectNameForProxy: "@owner/slug"
}

Note: Replace @owner/slug by the right values.

AuthSession proxy error when trying to implement Expo AuthSession

1 Answers1