重定向 URL

使用 Supabase Auth 设置重定向 URL。

概述#

Supabase Auth 允许您控制应用程序如何处理 用户会话。

在使用 无密码登录或 第三方提供商时，Supabase 客户端库提供了一个 redirectTo 参数，用于指定在身份验证后将用户重定向到哪里。redirectTo 中的 URL 应与 重定向 URL 列表配置匹配。

要配置允许的重定向 URL，请转到 URL 配置页面。添加必要的 URL 后，您可以在 redirectTo 参数中使用您希望用户重定向到的 URL。

在 URL 配置中，站点 URL 定义了在代码中未指定 redirectTo 时的默认重定向 URL。将其从 https://:3000 更改为您的生产 URL（例如，https://example.com）。此设置对于电子邮件确认和密码重置至关重要。

在使用 使用 Web3 登录时，Web3 钱包应用程序中用户签名的消息将指示签名发生时的 URL。Supabase Auth 将拒绝为不在允许列表中的 URL 签名的消息。

在本地开发或自托管项目中使用 配置文件。有关在 Vercel 或 Netlify 上部署时配置 SITE_URL 的更多信息，请参阅下文。

在重定向 URL 中使用通配符#

Supabase 允许您在将重定向 URL 添加到 允许列表时指定通配符。您可以使用通配符匹配模式来支持来自 Netlify 和 Vercel 等提供商的预览 URL。

URL 中的分隔符定义为 . 和 /。使用 此工具来测试您的模式。

带有通配符的重定向 URL 示例#

Netlify 预览 URL#

对于使用 Netlify 部署，将 SITE_URL 设置为您的官方站点 URL。添加以下其他重定向 URL 用于本地开发和部署预览

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

Vercel 预览 URL#

对于使用 Vercel 部署，将 SITE_URL 设置为您的官方站点 URL。添加以下其他重定向 URL 用于本地开发和部署预览

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

Vercel 提供了一个环境变量，用于部署的 URL，称为 NEXT_PUBLIC_VERCEL_URL。有关更多详细信息，请参阅 Vercel 文档。您可以使用此变量根据环境动态重定向。您还应设置名为 NEXT_PUBLIC_SITE_URL 的环境变量的值，在生产环境中应将其设置为您的站点 URL，以确保重定向正常工作。

1
const getURL = () => {
2
  let url =
3
    process?.env?.NEXT_PUBLIC_SITE_URL ?? // Set this to your site URL in production env.
4
    process?.env?.NEXT_PUBLIC_VERCEL_URL ?? // Automatically set by Vercel.
5
    'https://:3000/'
6
  // Make sure to include `https://` when not localhost.
7
  url = url.startsWith('http') ? url : `https://${url}`
8
  // Make sure to include a trailing `/`.
9
  url = url.endsWith('/') ? url : `${url}/`
10
  return url
11
}
12
13
const { data, error } = await supabase.auth.signInWithOAuth({
14
  provider: 'github',
15
  options: {
16
    redirectTo: getURL(),
17
  },
18
})

使用 redirectTo 时的电子邮件模板#

在使用 redirectTo 选项时，您可能需要在电子邮件模板中将 {{ .SiteURL }} 替换为 {{ .RedirectTo }}。有关更多信息，请参阅 电子邮件模板指南。

例如，更改以下内容

1
<!-- Old -->
2
<a href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email">Confirm your mail</a>
3
4
<!-- New -->
5
<a href="{{ .RedirectTo }}/auth/confirm?token_hash={{ .TokenHash }}&type=email"
6
  >Confirm your mail</a
7
>

移动深度链接 URI#

对于移动应用程序，您可以使用深度链接 URI。例如，对于您的 SITE_URL，您可以指定类似 com.supabase://login-callback/ 的内容，如果需要，可以为其他重定向 URL 指定类似 com.supabase.staging://login-callback/ 的内容。

在此处了解有关深度链接的更多信息，并查找不同框架的代码示例。

错误处理#

身份验证失败时，用户仍然会被重定向到提供的重定向 URL。但是，错误详细信息将作为 URL 中的查询片段返回。您可以解析这些查询片段并向用户显示自定义错误消息。例如

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