身份验证UI

Auth UI是用于验证用户的预构建React组件。 它支持定制主题和可扩展样式，以符合您的品牌和审美。

设置身份验证UI#

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

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

导入Auth组件#

将 @supabase/supabase-js 中的 supabaseClient 作为属性传递给组件。

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

这将在没有任何样式的情况下渲染Auth组件。 我们建议使用预定义的主题之一来设置UI的样式。 导入要使用的主题并将其传递给appearence.theme属性。

/src/index.js
1import {
2  Auth,
3  // Import predefined theme
4  ThemeSupa,
5} from '@supabase/auth-ui-react'
6
7const App = () => (
8  <Auth
9    supabaseClient={supabase}
10    {/* Apply predefined theme */}
11    appearance={{ theme: ThemeSupa }}
12  />
13)

自定义

有几种自定义身份验证UI的方法：

预定义主题

AuthUI提供了几个主题来自定义外观。每个预定义主题至少有两种变体，一种是default变体，另一种则是dark变体。您可以使用theme属性在这些主题之间切换。导入要使用的主题并将其传递给appearence.theme属性。

/src/index.js
1import { createClient } from '@supabase/supabase-js'
2import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
3
4const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')
5
6const App = () => (
7  <Auth
8    supabaseClient={supabase}
9    {/* Apply predefined theme */}
10    appearance={{ theme: ThemeSupa }}
11  />
12)

info

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

切换主题变体

Auth UI有两种主题变体：default和dark。您可以使用theme属性在这些主题之间切换。

/src/index.js
1import { createClient } from '@supabase/supabase-js'
2import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
3
4const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')
5
6const App = () => (
7  <Auth
8    supabaseClient={supabase}
9    appearance={{ theme: ThemeSupa }}
10    {/* Set theme to dark */}
11    theme="dark"
12  />
13)

如果不向theme传递值，它将使用"default"主题。您可以将"dark"传递给主题道具以切换到 dark主题。如果主题有其他变体，请使用此道具中变体的名称。

覆盖主题

可以使用变量令牌重写身份验证UI主题。参见变量标记列表.

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

若您创建了自己的主题，则可能不需要覆盖任何主题。

创建自己的主题 {#create-theme}#

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

/src/index.js
1import { createClient } from '@supabase/supabase-js'
2import { Auth } from '@supabase/auth-ui-react'
3
4const supabase = createClient(
5  '<INSERT PROJECT URL>',
6  '<INSERT PROJECT ANON API KEY>'
7)
8
9const customTheme = {
10  default: {
11    colors: {
12      brand: 'hsl(153 60.0% 53.0%)',
13      brandAccent: 'hsl(154 54.8% 45.1%)',
14      brandButtonText: 'white',
15      // ..
16  },
17  dark: {
18    colors: {
19      brandButtonText: 'white',
20      defaultButtonBackground: '#2e2e2e',
21      defaultButtonBackgroundHover: '#3e3e3e',
22      //..
23    },
24  },
25  // You can also add more theme variations with different names.
26  evenDarker: {
27    colors: {
28      brandButtonText: 'white',
29      defaultButtonBackground: '#1e1e1e',
30      defaultButtonBackgroundHover: '#2e2e2e',
31      //..
32    },
33  },
34}
35
36const App = () => (
37  <Auth
38    supabaseClient={supabase}
39    theme="default" // can also be "dark" or "evenDarker"
40    appearance={{ theme: customTheme}}
41  />
42)

您可以使用theme prop在主题的不同变体之间切换。

自定义CSS类 {#custom-css-classes}#

您可以为以下元素使用自定义CSS类： "button", "container", "anchor", "divider", "label", "input", "loader", "message".

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

自定义内联CSS {#custom-inline-styles}#

您可以为以下元素使用自定义CSS内联样式： "button", "container", "anchor", "divider", "label", "input", "loader", "message".

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

自定义标签 {#custom-labels}#

您可以将自定义标签与localization.variables一起使用。 参见标签列表 

/src/index.js
1import { createClient } from '@supabase/supabase-js'
2import { Auth } from '@supabase/auth-ui-react'
3
4const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')
5
6const App = () => (
7  <Auth
8    supabaseClient={supabase}
9    //highlight-start
10    localization={{
11      variables: {
12        sign_in: {
13          email_label: 'Your email address',
14          password_label: 'Your strong password',
15        },
16      },
17    }}
18    //highlight-end
19  />
20)