Supabase + Expo + Google Sign In

google-sign-in.tsx

// go to supabase dashboard -> into auth -> url config -> put the Redirect URLs as [your-scheme]://google-auth

import * as WebBrowser from "expo-web-browser";

WebBrowser.maybeCompleteAuthSession();

const extractParamsFromUrl = (url: string) => {
  const parsedUrl = new URL(url);
  const params = parsedUrl.searchParams; // Using searchParams instead of splitting on "#"

  const data = {
    access_token: params.get("access_token"),
    expires_in: parseInt(params.get("expires_in") || "0"),
    refresh_token: params.get("refresh_token"),
    token_type: params.get("token_type"),
    provider_token: params.get("provider_token"),
    code: params.get("code"),
  };

  return data;
};

// to warm up the browser
  useEffect(() => {
    WebBrowser.warmUpAsync();

    return () => {
      WebBrowser.coolDownAsync();
    };
  }, []);


//button
<Button
        onPress={async () => {
          const res = await supabase.auth.signInWithOAuth({
            provider: "google",
            options: {
              redirectTo: "[your-scheme]://google-auth",
              queryParams: {
                prompt: "consent",
              },
            },
          });

          const googleOAuthUrl = res.data.url;

          if (!googleOAuthUrl) return Alert.alert("no oauth url found!");

          const result = await WebBrowser.openAuthSessionAsync(
            googleOAuthUrl,
            "[your-scheme]://google-auth?",
            {
              showInRecents: true,
            },
          ).catch((err) => {
            console.log(err);
          });

          if (result && result.type === "success") {
            const params = extractParamsFromUrl(result.url);

            if (params.code) {
              const user = await supabase.auth.exchangeCodeForSession(
                params.code,
              );
              console.log(user);
              return;
            } else {
              // sign in/up failed
            }
          } else {
            console.log("handle failed error");
          }
        }}
        title="Sign in with google"
      />

It says redirect_uri_mismatch. It looks like custom schema is not supported. Only http/https

For some reason when I try this I don't get a code. I do get the access token, but I don't think that is useful for anything. Any suggestions?

@Schotsl, was able to get around this by using Supabase's auth.setSession() instead. It takes the access_token and refresh_token as arguments which can be retrieved using this method.

I also had to refactor the extractParamsFromUrl() function a bit to get params in a more reliable way using:

const parsedUrl = new URL(url);
const params = new URLSearchParams(parsedUrl.hash.replace("#", "?")); // Using searchParams instead of splitting on "#"

I hope this helps.

Thanks so much for this gist @sonipranjal 🙏🏾

@Schotsl, was able to get around this by using Supabase's auth.setSession() instead. It takes the access_token and refresh_token as arguments which can be retrieved using this method.

I also had to refactor the extractParamsFromUrl() function a bit to get params in a more reliable way using:

const parsedUrl = new URL(url);
const params = new URLSearchParams(parsedUrl.hash.replace("#", "?")); // Using searchParams instead of splitting on "#"

I hope this helps.

Thanks so much for this gist @sonipranjal 🙏🏾

Thanks for the quick reply! And thanks @sonipranjal :)

thank you!

I'm not be able to finish the sign in with Google, I'm receiving this warning:

The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration.

Are you guys know what could be this?