Auth

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

Provider scopes

Provider Scopes can be requested through providerScope;


_12
<Auth
_12
supabaseClient={supabase}
_12
providers={['google']}
_12
queryParams={{
_12
access_type: 'offline',
_12
prompt: 'consent',
_12
hd: 'domain.com',
_12
}}
_12
providerScopes={{
_12
google: 'https://www.googleapis.com/auth/calendar.readonly',
_12
}}
_12
/>

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
)

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 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 switch 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 like so:

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

A full list of the available variables is below:

Label TagDefault Label
email_labelEmail address
password_labelCreate a Password
email_input_placeholderYour email address
password_input_placeholderYour password
button_labelSign up
loading_button_labelSigning up ...
social_provider_textSign in with {{provider}}
link_textDon't have an account? Sign up
confirmation_textCheck your email for the confirmation link

You can hide links by setting the showLinks prop to false

/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} showLinks={false} />

Setting showLinks to false will hide the following links:

  • Don't have an account? Sign up
  • Already have an account? Sign in
  • Send a magic link email
  • Forgot your password?

Sign in and Sign up views

Add sign_in or sign_up views with the view prop:


_10
<Auth
_10
supabaseClient={supabase}
_10
view="sign_up"
_10
/>