认证界面组件

截至2024年2月7日，此代码库不再由Supabase团队维护。目前团队没有足够资源为该代码库提供预期的维护水平。我们未来可能会重新审视Auth UI项目，但很遗憾目前不得不暂停维护，以便专注于其他优先事项，例如改进服务器端渲染(SSR)包和高级Auth原语。

作为替代方案，您可以使用Supabase UI组件库，其中包含可直接用于项目的认证模块。

Auth UI是一个预构建的React组件，用于用户身份验证。它支持自定义主题和可扩展样式，以匹配您的品牌和视觉风格。

设置Auth UI

安装最新版本的supabase-js和Auth UI包：

1
npm install @supabase/supabase-js @supabase/auth-ui-react @supabase/auth-ui-shared

导入 Auth 组件

将来自 @supabase/supabase-js 的 supabaseClient 作为 prop 传递给组件。

1
2
3
4
5
6
import { createClient } from '@supabase/supabase-js'import { Auth } from '@supabase/auth-ui-react'const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')const App = () => <Auth supabaseClient={supabase} />

这会渲染出无样式的 Auth 组件。我们建议使用预定义的主题来设置 UI 样式。导入您想要使用的主题并将其传递给 appearance.theme prop。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Auth } from '@supabase/auth-ui-react'import {  // 导入预定义主题  ThemeSupa,} from '@supabase/auth-ui-shared'const supabase = createClient(  '<INSERT PROJECT URL>',  '<INSERT PROJECT ANON API KEY>')const App = () => (  <Auth    supabaseClient={supabase}    {/* 应用预定义主题 */}    appearance={{ theme: ThemeSupa }}  />)

社交登录提供商

Auth 组件也支持通过官方社交提供商登录。

1
2
3
4
5
6
7
8
9
10
11
12
13
import { createClient } from '@supabase/supabase-js'import { Auth } from '@supabase/auth-ui-react'import { ThemeSupa } from '@supabase/auth-ui-shared'const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')const App = () => (  <Auth    supabaseClient={supabase}    appearance={{ theme: ThemeSupa }}    providers={['google', 'facebook', 'twitter']}  />)

配置选项

可通过 queryParams 设置选项：

1
2
3
4
5
6
7
8
9
10
<Auth  supabaseClient={supabase}  providers={['google']}  queryParams={{    access_type: 'offline',    prompt: 'consent',    hd: 'domain.com',  }}  onlyThirdPartyProviders/>

提供者作用域

可以通过 providerScope 请求提供者作用域：

1
2
3
4
5
6
7
8
9
10
11
12
<Auth  supabaseClient={supabase}  providers={['google']}  queryParams={{    access_type: 'offline',    prompt: 'consent',    hd: 'domain.com',  }}  providerScopes={{    google: 'https://www.googleapis.com/auth/calendar.readonly',  }}/>

支持的视图

Auth 组件目前包含以下视图：

邮箱登录
魔法链接登录
社交登录
更新密码
忘记密码

我们计划在未来添加更多视图。请关注该仓库。

自定义

有多种方式可以自定义 Auth UI：

使用 Auth UI 提供的预定义主题
通过覆盖主题变量来扩展主题
创建自定义主题
使用自定义 CSS 类
使用内联样式
使用自定义标签

预定义主题

Auth UI 提供了多个主题来定制外观。每个预定义主题至少包含两种变体：default 和 dark。您可以使用 theme 属性在这些主题之间切换。导入您想要使用的主题并将其传递给 appearance.theme 属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { createClient } from '@supabase/supabase-js'import { Auth } from '@supabase/auth-ui-react'import { ThemeSupa } from '@supabase/auth-ui-shared'const supabase = createClient(  '<INSERT PROJECT URL>',  '<INSERT PROJECT ANON API KEY>')const App = () => (  <Auth    supabaseClient={supabase}    {/* 应用预定义主题 */}    appearance={{ theme: ThemeSupa }}  />)

目前仅有一个预定义主题可用，但我们计划添加更多主题。

切换主题变体

Auth UI 提供两种主题变体：default（默认）和 dark（暗黑）。您可以通过 theme 属性在这些主题之间切换。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { createClient } from '@supabase/supabase-js'import { Auth } from '@supabase/auth-ui-react'import { ThemeSupa } from '@supabase/auth-ui-shared'const supabase = createClient(  '<INSERT PROJECT URL>',  '<INSERT PROJECT ANON API KEY>')const App = () => (  <Auth    supabaseClient={supabase}    appearance={{ theme: ThemeSupa }}    {/* 设置为暗黑主题 */}    theme="dark"  />)

如果不为 theme 传递值，则使用 "default" 主题。您可以传递 "dark" 来切换至暗黑主题。如果您的主题有其他变体，请在此属性中使用变体名称。

覆盖主题

Auth UI 主题可以通过变量令牌进行覆盖。请参阅变量令牌列表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { createClient } from '@supabase/supabase-js'import { Auth } from '@supabase/auth-ui-react'import { ThemeSupa } from '@supabase/auth-ui-shared'const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')const App = () => (  <Auth    supabaseClient={supabase}    appearance={{      theme: ThemeSupa,      variables: {        default: {          colors: {            brand: 'red',            brandAccent: 'darkred',          },        },      },    }}  />)

如果您创建了自己的主题，可能不需要覆盖任何现有主题。

创建自定义主题

您可以通过在 appearance.theme 属性中遵循相同的结构来创建自己的主题。查看主题中的令牌列表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import { createClient } from '@supabase/supabase-js'import { Auth } from '@supabase/auth-ui-react'const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')const customTheme = {  default: {    colors: {      brand: 'hsl(153 60.0% 53.0%)',      brandAccent: 'hsl(154 54.8% 45.1%)',      brandButtonText: 'white',      // ..    },  },  dark: {    colors: {      brandButtonText: 'white',      defaultButtonBackground: '#2e2e2e',      defaultButtonBackgroundHover: '#3e3e3e',      //..    },  },  // 您还可以添加更多具有不同名称的主题变体  evenDarker: {    colors: {      brandButtonText: 'white',      defaultButtonBackground: '#1e1e1e',      defaultButtonBackgroundHover: '#2e2e2e',      //..    },  },}const App = () => (  <Auth    supabaseClient={supabase}    theme="default" // 也可以是 "dark" 或 "evenDarker"    appearance={{ theme: customTheme }}  />)

您可以使用"theme"属性在不同主题变体之间切换。

自定义 CSS 类

您可以为以下元素使用自定义 CSS 类： "button"（按钮）、"container"（容器）、"anchor"（锚点）、"divider"（分隔线）、"label"（标签）、"input"（输入框）、"loader"（加载器）、"message"（消息）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { createClient } from '@supabase/supabase-js'import { Auth } from '@supabase/auth-ui-react'const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')const App = () => (  <Auth    supabaseClient={supabase}    appearance={{      // 如果想扩展默认样式而非覆盖，请将此设为 true      extend: false,      // 您的自定义类      className: {        anchor: 'my-awesome-anchor',        button: 'my-awesome-button',        //..      },    }}  />)

自定义内联 CSS

您可以为以下元素使用自定义内联 CSS 样式： "button"（按钮）、"container"（容器）、"anchor"（锚点）、"divider"（分隔线）、"label"（标签）、"input"（输入框）、"loader"（加载器）、"message"（消息）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { createClient } from '@supabase/supabase-js'import { Auth } from '@supabase/auth-ui-react'const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')const App = () => (  <Auth    supabaseClient={supabase}    appearance={{      style: {        button: { background: 'red', color: 'white' },        anchor: { color: 'blue' },        //..      },    }}  />)

自定义标签

您可以通过 localization.variables 使用自定义标签，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { createClient } from '@supabase/supabase-js'import { Auth } from '@supabase/auth-ui-react'const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')const App = () => (  <Auth    supabaseClient={supabase}    localization={{      variables: {        sign_in: {          email_label: '您的电子邮箱地址',          password_label: '您的强密码',        },      },    }}  />)

以下是所有可用的变量列表：

标签标识符	默认标签
`email_label`	电子邮箱地址
`password_label`	创建密码
`email_input_placeholder`	您的电子邮箱地址
`password_input_placeholder`	您的密码
`button_label`	注册
`loading_button_label`	正在注册...
`social_provider_text`	通过 `{{provider}}` 登录
`link_text`	没有账号？立即注册
`confirmation_text`	请查收邮件中的确认链接

目前不支持翻译错误消息（例如"无效凭证"）。请查看相关issue

隐藏链接

您可以通过将 showLinks 属性设置为 false 来隐藏链接

1
2
3
4
5
6
import { createClient } from '@supabase/supabase-js'import { Auth } from '@supabase/auth-ui-react'const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')const App = () => <Auth supabaseClient={supabase} showLinks={false} />

将 showLinks 设为 false 会隐藏以下链接：

没有账户？立即注册
已有账户？立即登录
发送魔法链接邮件
忘记密码？

登录与注册视图

使用 view 属性添加 sign_in 或 sign_up 视图：

1
2
3
4
<Auth  supabaseClient={supabase}  view="sign_up"/>

认证界面组件

设置Auth UI#

导入 Auth 组件#