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:

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

and I set NEXT_PUBLIC_SITE_URL to my production domain.

Here is the code that runs on sign in:

1 async function signInWithGoogle() {2    setIsLoading(true);3    try {4      const redirectTo = `${getURL()}auth/callback${next ? `?next=${encodeURIComponent(next)}` : '/'}`;5      const { error } = await supabase.auth.signInWithOAuth({6        provider: 'google',7        options: {8          redirectTo: redirectTo9        }10      });11      if (error) {12        throw error;13      }14    } catch (error) {15      console.error(error);16    } finally {17      setIsLoading(false);18    }19  }

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.

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.

1 process?.env?.NEXT_PUBLIC_SITE_URL ?? // Set this to your site URL in production env.2    process?.env?.NEXT_PUBLIC_VERCEL_URL ?? // Automatically set by Vercel.3    '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?

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