Google oAuth redirect URL with Vercel Preview URLs & Supabase

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?

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.

https://vercel.com/docs/projects/domains/troubleshooting

You can also use v0 to narrow down the possibilities.

Vercel Staff

Hi , welcome to the Vercel Community!

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.

Production only environment variable

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?

Vercel Staff

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

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

This topic is closed. It no longer accepts new replies.

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; };

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); } }