Auth

Redirect URLs

Set up redirect urls with Supabase Auth.


Overview

When using passwordless sign-ins or third-party providers, the Supabase client library methods provide a redirectTo parameter to specify where to redirect the user to after authentication. By default, the user will be redirected to the SITE_URL but you can modify the SITE_URL or add additional redirect URLs to the allow list. Once you've added necessary URLs to the allow list, you can specify the URL you want the user to be redirected to in the redirectTo parameter.

To edit the allow list, go to the URL Configuration page. In local development or self-hosted projects, use the configuration file.

Use wildcards in redirect URLs

Supabase allows you to specify wildcards when adding redirect URLs to the allow list. You can use wildcard match patterns to support preview URLs from providers like Netlify and Vercel.

WildcardDescription
*matches any sequence of non-separator characters
**matches any sequence of characters
?matches any single non-separator character
cmatches character c (c != *, **, ?, \, [, {, })
\cmatches character c
[!{ character-range }]matches any sequence of characters not in the { character-range }. For example, [!a-z] will not match any characters ranging from a-z.

The separator characters in a URL are defined as . and /. Use this tool to test your patterns.

Redirect URL examples with wildcards

Redirect URLDescription
http://localhost:3000/*matches http://localhost:3000/foo, http://localhost:3000/bar but not http://localhost:3000/foo/bar or http://localhost:3000/foo/ (note the trailing slash)
http://localhost:3000/**matches http://localhost:3000/foo, http://localhost:3000/bar and http://localhost:3000/foo/bar
http://localhost:3000/?matches http://localhost:3000/a but not http://localhost:3000/foo
http://localhost:3000/[!a-z]matches http://localhost:3000/1 but not http://localhost:3000/a

Netlify preview URLs

For deployments with Netlify, set the SITE_URL to your official site URL. Add the following additional redirect URLs for local development and deployment previews:

  • http://localhost:3000/**
  • https://**--my_org.netlify.app/**

Vercel preview URLs

For deployments with Vercel, set the SITE_URL to your official site URL. Add the following additional redirect URLs for local development and deployment previews:

  • http://localhost:3000/**
  • https://*-<team-or-account-slug>.vercel.app/**

Vercel provides an environment variable for the URL of the deployment called NEXT_PUBLIC_VERCEL_URL. See the Vercel docs for more details. You can use this variable to dynamically redirect depending on the environment. You should also set the value of the environment variable called NEXT_PUBLIC_SITE_URL, this should be set to your site URL in production environment to ensure that redirects function correctly.


_18
const getURL = () => {
_18
let url =
_18
process?.env?.NEXT_PUBLIC_SITE_URL ?? // Set this to your site URL in production env.
_18
process?.env?.NEXT_PUBLIC_VERCEL_URL ?? // Automatically set by Vercel.
_18
'http://localhost:3000/'
_18
// Make sure to include `https://` when not localhost.
_18
url = url.startsWith('http') ? url : `https://${url}`
_18
// Make sure to include a trailing `/`.
_18
url = url.endsWith('/') ? url : `${url}/`
_18
return url
_18
}
_18
_18
const { data, error } = await supabase.auth.signInWithOAuth({
_18
provider: 'github',
_18
options: {
_18
redirectTo: getURL(),
_18
},
_18
})

Email templates when using redirectTo

When using a redirectTo option, you may need to replace the {{ .SiteURL }} with {{ .RedirectTo }} in your email templates. See the Email Templates guide for more information.

For example, change the following:


_10
<!-- Old -->
_10
<a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=signup">Confirm your mail</a>
_10
_10
<!-- New -->
_10
<a href="{{ .RedirectTo }}/auth/confirm?token_hash={{ .TokenHash }}&type=signup"
_10
>Confirm your mail</a
_10
>

Mobile deep linking URIs

For mobile applications you can use deep linking URIs. For example, for your SITE_URL you can specify something like com.supabase://login-callback/ and for additional redirect URLs something like com.supabase.staging://login-callback/ if needed.

Read more about deep linking and find code examples for different frameworks here.

Error Handling

When authentication fails, the user will still be redirected to the redirect URL provided. However, the error details will be returned as query fragments in the URL. You can parse these query fragments and show a custom error message to the user. For example:


_10
const params = new URLSearchParams(window.location.hash.slice())
_10
_10
if (params.get('error_code').startsWith('4')) {
_10
// show error message if error is a 4xx error
_10
window.alert(params.get('error_description'))
_10
}