Google oAuth redirect URL with Vercel Preview URLs & Supabase

[lucksp]

I am having trouble getting my redirect urls to work with signInWithOAuth & my vercel deployment “test branch” urls…

I have followed the suggestion here to have my code read process.env URLs:

export const getURL = () => {
  let url =
    process?.env?.NEXT_PUBLIC_SITE_URL ?? // Set this to your site URL in production env.
    process?.env?.NEXT_PUBLIC_VERCEL_URL ?? // Automatically set by Vercel.
    'http://localhost:3000/';
  // Make sure to include `https://` when not localhost.
  url = url.startsWith('http') ? url : `https://${url}`;
  // Make sure to include a trailing `/`.
  url = url.endsWith('/') ? url : `${url}/`;
  return url;
};

and I set NEXT_PUBLIC_SITE_URL to my production domain.

Here is the code that runs on sign in:

 async function signInWithGoogle() {
    setIsLoading(true);
    try {
      const redirectTo = `${getURL()}auth/callback${next ? `?next=${encodeURIComponent(next)}` : '/'}`;
      const { error } = await supabase.auth.signInWithOAuth({
        provider: 'google',
        options: {
          redirectTo: redirectTo
        }
      });
      if (error) {
        throw error;
      }
    } catch (error) {
      console.error(error);
    } finally {
      setIsLoading(false);
    }
  }

In my supabase dashboard, I added the RedirectURL to my list: http://**.vercel.app/**

I thought this would pickup anything from Vercel - such as: https://my-webapp-git-feature-sp-hash-my-projects.vercel.app/

• I can’t add a wildcard url to Google Console allowed URI

The end result is that after I sign in, it redirects to my production URL with the google code URL param instead of my Vercel deployment URL.

What am I missing?

[system]

The domain troubleshooting guide can help with most custom domain configuration issues. You might be able to use that guide to solve it before a human is available to help you. Then you can come back here and share the answer for bonus points.

Troubleshooting domains

You can also use v0 to narrow down the possibilities.

[anshumanb (Anshuman Bhardwaj)]

Hi @lucksp, welcome to the Vercel Community!

@lucksp

The end result is that after I sign in, it redirects to my production URL with the google code URL param instead of my Vercel deployment URL.

This is happening because the following expression will always evaluate to the NEXT_PUBLIC_SITE_URL environment variable if it’s available.

 process?.env?.NEXT_PUBLIC_SITE_URL ?? // Set this to your site URL in production env.
    process?.env?.NEXT_PUBLIC_VERCEL_URL ?? // Automatically set by Vercel.
    'http://localhost:3000/';

If you are using a specific branch for testing then I’d recommend using the VERCEL_BRANCH_URL instead of the VERCEL_URL, which will solve the wildcard url for the Google Console as well.

For the NEXT_PUBLIC_SITE_URL environment variable, you should restrict it only to the production environment.

[lucksp]

@anshumanb

VERCEL_BRANCH_URL

Unfortunately, the VERCEL_BRANCH_URL didn’t make any difference, as the domains for Preview branches are not recognized:

Here’s my google oAuth authorized origin URLs:

And my supabase Redirect URls - which I believe is the source of issue.

If I hardcode the above Vercel domain, to the Supabase redirect URL, then it’s fine

any ideas?

[anshumanb (Anshuman Bhardwaj)]

Hi @lucksp, you can use NEXT_PUBLIC_VERCEL_BRANCH_URL when the variable is used on the client side (as it seems in your case).

[lucksp]

OK, got it finally, I think - adding https://*-lucksps-projects.vercel.app/** to my redirect URL appears to have solved the issue