Auth redirect and Additional Redirect URLs

[jesper-bylund]

When you set up the basic Supabase magic link Auth example you get redirected to localhost:3000, which is completely reasonable and can be changed in the supabase console under authentication / settings / "Site URL"

But it's quite likely that you will do local development while the service is later live. Which means this setting cannot be changed.
Right below that setting is the setting "Additional Redirect URLs" which seems to indicate you can add other redirect URLs.
But how are these used?
I can't find an example, or a mention in the documentation?

There must be a way to log in locally, while also having a live service?

I'm using JS/TS nextjs btw.

[cmdzro]

I'm bumping into the exact same issue. Help would be greatly appreciated.

[travishenson]

Within your supabase.auth.signIn function, you can add a second object that contains a key:value for redirectTo...

await supabase.auth.signIn({email, password}, {
   redirectTo: window.location.origin
});

You can substitute the value depending on your use case. Checking for your process.env.NODE_ENV could be useful here as well.

Source: https://supabase.com/docs/reference/javascript/auth-signin#sign-in-with-redirect

[jesper-bylund]

@travishenson I thought so as well. However this does nothing. It might be that using "localhost" is not a viable option?
Actually reading the page you linked it says "Note that the redirectTo param is only relevant for OAuth logins"

So for some reason, this doesn't work for magic link logins.

[cmdzro]

In fact it works. For me the issue was (and still is) that the redirectTo URL needs to be exactly matching what is added to the authentication / settings / "Additional Redirect URLs" setting. In my case I added a dynamic query string to the redirectTo URL. This is not supported as it can't be matched against "Additional Redirect URLs" (unless you can put all possible options in there). If you have a fixed link it should be enough to add the exact and complete URL to "Additional Redirect URLs".

However, it would be great to have support for * (wildcards) in the settings to allow dynamic URLs.

[jesper-bylund]

@cmdzro you are correct, it does work. I was having issues with string matching. Using redirectTo: window.location.origin didn't really work out. Hardcoding redirectTo: 'http://localhost:3000/' did work however. Hope this helps others to get it to work!

I also agree having a wildcard * or possibly wildcard subdomains https://*.domain.com would be a really nice addition.

[isimmons]

For anyone else taking the Mastering Nuxt 3 course and finding this discussion,

site url should be your actual netlify site url. Mine was defaulted to http://localhost:3000 because we never set it in the course.

Then in the list of allowed redirect urls you have to be specific because wild cards are only supported for a sub domain as suggested above by jesper.

So add the full url to the list

http://localhost:3000/course/chapter/2-chapter-2/lesson/1-using-typescript-with-the-options-api-in-components

So far, this is working for me so when I'm on my local dev it redirects to localhost and when I'm on my netlify app, it redirects there.

[sxhoangha]

I am using latest Supabase and this doc helps https://supabase.com/docs/guides/auth#redirect-urls-and-wildcards

[alexbache]

I spent forever trying to get this to work and managed to get it working on my project so will share and hopefully can be of some use.

I'm deploying to vercel and was having the redirect issue across development previews and production deployment.

Here's my implementation:

const { data, error } = await supabase.auth.signInWithOtp({ email: '*email address*', options: { emailRedirectTo: window.location.origin, }, });

On supabase:
Set SITE URL to the vercel URL of your deployment
In additional URLs add http://localhost:3000

Seems to be working for me so far 🤞

[Jaggler3]

See in https://supabase.com/docs/guides/auth/concepts/redirect-urls

Instead of your additional URL being http://localhost:3000/ you must add the glob to the end and make it:

http://localhost:3000/**

to match your actual auth URLs, or you can write the specific URL in place.