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.

Answer 1

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

Answer 2

Try adding your app slug to the signInWithOAuth options as well with the const result = await openAuthSessionAsync

Similar to this:

const { data, error } = await supabase.auth.signInWithOAuth({
  provider: "google",
    options: {
      redirectTo: "myappslug://google-auth",
    },
});

// then when you call openAsyncSession
const result = await openAuthSessionAsync(
  URL,
  "myappslug://google-auth?",
  { showInRecents: true }
);

Answer 3

I faced a similar issue and for me I needed to ensure that my app's scheme was allowed in the Supabase instance's redirect urls.

• https://supabase.com/docs/guides/auth/concepts/redirect-urls
• https://supabase.com/docs/guides/cli/config#auth.additional_redirect_urls

I recorded all of the steps I took to get browser based OAuth working in an Expo project with a local Supabase instance in this discussion https://github.com/orgs/supabase/discussions/2818#discussioncomment-7931646.

Hope this helps!