react native supabase auth with google redirect issue & no session update

Question

I am a little confused about trying to make a redirect URL to go along with the openAuthSessionAsync in app mobile browser view (docs: https://docs.expo.dev/versions/latest/sdk/webbrowser/#webbrowseropenauthsessionasyncurl-redirecturl-options).

  const signInWithGoogle = async () => {
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'google',
    });
    if (error) {
       // handle
    }
    if (data.url) {
      const result = await openAuthSessionAsync(
        data.url,
        Linking.createURL('sign-in') // this never fires
      );
    }
  };

The redirectUrl never fires because the browser gets stuck on the Auth screen after selecting my google account. It looks like it tries to go to localhost for some reason? Is that a bad redirect url on my side? I have tried '', 'sign-in', exp://, myappslug:// all with no success. What's more concerning is that the supabase client is not getting any update...despite seeing my user show up in the admin dashboard.

useEffect(() => {
    async function getSession() {
      const {
        data: { session }, error,
      } = await supabase.auth.getSession();
      if (error) {
        setMessage(['error', error.message]);
      } else {
        setSession(session ?? null);
      }
    }
    try {
      setIsLoading(true);
      getSession();
    } catch (e) {
      setMessage(['error', (e as Error).message]);
    } finally {
      setIsLoading(false);
    }

    const {
      data: { subscription },
    } = supabase.auth.onAuthStateChange(async (_event, session) => {
      // never fires a 2nd time after login, even though the dashboard shows user
      console.log('onAuthStateChange');
      console.log(_event);
      console.log(session);

      setSession(session ?? null);
    });

    return () => {
      subscription?.unsubscribe();
    };
  }, [setMessage]);

after success auth from google, redirect fails, tries for localhost:

Why does it try localhost; Is it my linking schema? Or something else?

Is there a way for the expo-web-browser to close automatically after success? I tried adding a Linking.addEventListener, but it also doesn't fire.

score 0 · Answer 1 · answered Jun 19 '23 at 06:13

I don't have much experience using expo, but hopefully I can give you some guidance.

Instead of opening the browser via openAuthSessionAsync method, just open the browser normally with the URL provided by signInWithOAuth method. You need to pass your deep link to open the app as a redirectTo option here. With this, the user should be redirected back to the app after signing in.

const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    redirectTo: 'YOUR_DEEP_LINK_HERE'
    });

// open data.url in your browser

react native supabase auth with google redirect issue & no session update

1 Answers1