Auth UI

Auth UI is a pre-built React component for authenticating users. It supports custom themes and extensible styles to match your brand and aesthetic.

Set up Auth UI#

Install the latest version of supabase-js and the Auth UI package:

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

Import the Auth component#

Pass supabaseClient from @supabase/supabase-js as a prop to the component.

/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} />

This renders the Auth component without any styling. We recommend using one of the predefined themes to style the UI. Import the theme you want to use and pass it to the appearence.theme prop.

/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)

Customization#

There are several ways to customize Auth UI:

Use one of the predefined themes that comes with Auth UI
Extend a theme by overriding the variable tokens in a theme
Create your own theme
Use your own CSS classes
Use inline styles
Use your own labels

Predefined themes#

Auth UI comes with several themes to customize the appearance. Each predefined theme comes with at least two variations, a default variation, and a dark variation. You can switch between these themes using the theme prop. Import the theme you want to use and pass it to the appearence.theme prop.

/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

Currently there is only one predefined theme available, but we plan to add more.

Switch theme variations#

Auth UI comes with two theme variations: default and dark. You can switch between these themes with the theme prop.

/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)

If you don't pass a value to theme it uses the "default" theme. You can pass "dark" to the theme prop to switch to the dark theme. If your theme has other variations, use the name of the variation in this prop.

Override themes#

Auth UI themes can be overridden using variable tokens. See the list of variable tokens.

/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)

If you created your own theme, you may not need to override any of the them.

Create your own theme #

You can create your own theme by following the same structure within a appearance.theme property. See the list of tokens within a 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)

You can swich between different variations of your theme with the "theme" prop.

Custom CSS classes #

You can use custom CSS classes for the following elements: "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)

Custom inline CSS #

You can use custom CSS inline styles for the following elements: "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 #

You can use custom labels with localization.variables. See the list of labels that can be overwritten.

/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)