Home

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:


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

Import the Auth component#

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

/src/index.js

_10
import { createClient } from '@supabase/supabase-js'
_10
import { Auth } from '@supabase/auth-ui-react'
_10
_10
const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')
_10
_10
const 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 appearance.theme prop.

/src/index.js

_18
import { Auth } from '@supabase/auth-ui-react'
_18
import {
_18
// Import predefined theme
_18
ThemeSupa,
_18
} from '@supabase/auth-ui-shared'
_18
_18
const supabase = createClient(
_18
'<INSERT PROJECT URL>',
_18
'<INSERT PROJECT ANON API KEY>'
_18
)
_18
_18
const App = () => (
_18
<Auth
_18
supabaseClient={supabase}
_18
{/* Apply predefined theme */}
_18
appearance={{ theme: ThemeSupa }}
_18
/>
_18
)

Social Providers#

The Auth component also supports login with official social providers.

/src/index.js

_13
import { createClient } from '@supabase/supabase-js'
_13
import { Auth } from '@supabase/auth-ui-react'
_13
import { ThemeSupa } from '@supabase/auth-ui-shared'
_13
_13
const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')
_13
_13
const App = () => (
_13
<Auth
_13
supabaseClient={supabase}
_13
appearance={{ theme: ThemeSupa }}
_13
providers={['google', 'facebook', 'twitter']}
_13
/>
_13
)

Options#

Options are available via queryParams:


_10
<Auth
_10
supabaseClient={supabase}
_10
providers={['google']}
_10
queryParams={{
_10
access_type: 'offline',
_10
prompt: 'consent',
_10
hd: 'domain.com',
_10
}}
_10
onlyThirdPartyProviders={true}
_10
/>

Supported Views#

The Auth component is currently shipped with the following views:

We are planning on adding more views in the future. Follow along on that repo.

Customization#

There are several ways to customize Auth UI:

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 appearance.theme prop.

/src/index.js

_16
import { createClient } from '@supabase/supabase-js'
_16
import { Auth } from '@supabase/auth-ui-react'
_16
import { ThemeSupa } from '@supabase/auth-ui-shared'
_16
_16
const supabase = createClient(
_16
'<INSERT PROJECT URL>',
_16
'<INSERT PROJECT ANON API KEY>'
_16
)
_16
_16
const App = () => (
_16
<Auth
_16
supabaseClient={supabase}
_16
{/* Apply predefined theme */}
_16
appearance={{ theme: ThemeSupa }}
_16
/>
_16
)

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

_17
import { createClient } from '@supabase/supabase-js'
_17
import { Auth } from '@supabase/auth-ui-react'
_17
import { ThemeSupa } from '@supabase/auth-ui-shared'
_17
_17
const supabase = createClient(
_17
'<INSERT PROJECT URL>',
_17
'<INSERT PROJECT ANON API KEY>'
_17
)
_17
_17
const App = () => (
_17
<Auth
_17
supabaseClient={supabase}
_17
appearance={{ theme: ThemeSupa }}
_17
{/* Set theme to dark */}
_17
theme="dark"
_17
/>
_17
)

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

_22
import { createClient } from '@supabase/supabase-js'
_22
import { Auth } from '@supabase/auth-ui-react'
_22
import { ThemeSupa } from '@supabase/auth-ui-shared'
_22
_22
const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')
_22
_22
const App = () => (
_22
<Auth
_22
supabaseClient={supabase}
_22
appearance={{
_22
theme: ThemeSupa,
_22
variables: {
_22
default: {
_22
colors: {
_22
brand: 'red',
_22
brandAccent: 'darkred',
_22
},
_22
},
_22
},
_22
}}
_22
/>
_22
)

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

_40
import { createClient } from '@supabase/supabase-js'
_40
import { Auth } from '@supabase/auth-ui-react'
_40
_40
const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')
_40
_40
const customTheme = {
_40
default: {
_40
colors: {
_40
brand: 'hsl(153 60.0% 53.0%)',
_40
brandAccent: 'hsl(154 54.8% 45.1%)',
_40
brandButtonText: 'white',
_40
// ..
_40
},
_40
},
_40
dark: {
_40
colors: {
_40
brandButtonText: 'white',
_40
defaultButtonBackground: '#2e2e2e',
_40
defaultButtonBackgroundHover: '#3e3e3e',
_40
//..
_40
},
_40
},
_40
// You can also add more theme variations with different names.
_40
evenDarker: {
_40
colors: {
_40
brandButtonText: 'white',
_40
defaultButtonBackground: '#1e1e1e',
_40
defaultButtonBackgroundHover: '#2e2e2e',
_40
//..
_40
},
_40
},
_40
}
_40
_40
const App = () => (
_40
<Auth
_40
supabaseClient={supabase}
_40
theme="default" // can also be "dark" or "evenDarker"
_40
appearance={{ theme: customTheme }}
_40
/>
_40
)

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

_20
import { createClient } from '@supabase/supabase-js'
_20
import { Auth } from '@supabase/auth-ui-react'
_20
_20
const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')
_20
_20
const App = () => (
_20
<Auth
_20
supabaseClient={supabase}
_20
appearance={{
_20
// If you want to extend the default styles instead of overriding it, set this to true
_20
extend: false,
_20
// Your custom classes
_20
className: {
_20
anchor: 'my-awesome-anchor',
_20
button: 'my-awesome-button',
_20
//..
_20
},
_20
}}
_20
/>
_20
)

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

_17
import { createClient } from '@supabase/supabase-js'
_17
import { Auth } from '@supabase/auth-ui-react'
_17
_17
const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')
_17
_17
const App = () => (
_17
<Auth
_17
supabaseClient={supabase}
_17
appearance={{
_17
style: {
_17
button: { background: 'red', color: 'white' },
_17
anchor: { color: 'blue' },
_17
//..
_17
},
_17
}}
_17
/>
_17
)

Custom labels #

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

/src/index.js

_18
import { createClient } from '@supabase/supabase-js'
_18
import { Auth } from '@supabase/auth-ui-react'
_18
_18
const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')
_18
_18
const App = () => (
_18
<Auth
_18
supabaseClient={supabase}
_18
localization={{
_18
variables: {
_18
sign_in: {
_18
email_label: 'Your email address',
_18
password_label: 'Your strong password',
_18
},
_18
},
_18
}}
_18
/>
_18
)

Currently, translating error messages (e.g. "Invalid credentials") is not supported. Check related issue.