Auth UI

As of 7th Feb 2024, this repository is no longer maintained by the Supabase Team. At the moment, the team does not have capacity to give the expected level of care to this repository. We may revisit Auth UI in the future but regrettably have to leave it on hold for now as we focus on other priorities such as improving the Server-Side Rendering (SSR) package and advanced Auth primitives.

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:


_10npm 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


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


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

The Auth component also supports login with official social providers.


_13import { createClient } from '@supabase/supabase-js'
_13import { Auth } from '@supabase/auth-ui-react'
_13import { ThemeSupa } from '@supabase/auth-ui-shared'
_13
_13const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')
_13
_13const 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:

Email Login
Magic Link login
Social Login
Update password
Forgotten password

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

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


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

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.


_17import { createClient } from '@supabase/supabase-js'
_17import { Auth } from '@supabase/auth-ui-react'
_17import { ThemeSupa } from '@supabase/auth-ui-shared'
_17
_17const supabase = createClient(
_17  '<INSERT PROJECT URL>',
_17  '<INSERT PROJECT ANON API KEY>'
_17)
_17
_17const 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.


_22import { createClient } from '@supabase/supabase-js'
_22import { Auth } from '@supabase/auth-ui-react'
_22import { ThemeSupa } from '@supabase/auth-ui-shared'
_22
_22const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')
_22
_22const 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


_40import { createClient } from '@supabase/supabase-js'
_40import { Auth } from '@supabase/auth-ui-react'
_40
_40const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')
_40
_40const 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
_40const 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


_20import { createClient } from '@supabase/supabase-js'
_20import { Auth } from '@supabase/auth-ui-react'
_20
_20const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')
_20
_20const 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


_17import { createClient } from '@supabase/supabase-js'
_17import { Auth } from '@supabase/auth-ui-react'
_17
_17const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')
_17
_17const 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:


_18import { createClient } from '@supabase/supabase-js'
_18import { Auth } from '@supabase/auth-ui-react'
_18
_18const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')
_18
_18const 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 Tag	Default Label
`email_label`	Email address
`password_label`	Create a Password
`email_input_placeholder`	Your email address
`password_input_placeholder`	Your password
`button_label`	Sign up
`loading_button_label`	Signing up ...
`social_provider_text`	Sign in with `{{provider}}`
`link_text`	Don't have an account? Sign up
`confirmation_text`	Check your email for the confirmation link

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

Hiding links

You can hide links by setting the showLinks prop to false


_10import { createClient } from '@supabase/supabase-js'
_10import { Auth } from '@supabase/auth-ui-react'
_10
_10const supabase = createClient('<INSERT PROJECT URL>', '<INSERT PROJECT ANON API KEY>')
_10
_10const 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?

Add sign_in or sign_up views with the view prop:


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

Auth UI

Set up Auth UI#

Import the Auth component#

Social providers#

Options#

Provider scopes#

Supported views#

Customization#

Predefined themes#

Switch theme variations#

Override themes#

Create your own theme #

Custom CSS classes #

Custom inline CSS #

Custom labels #

Hiding links #

Sign in and sign up views#

Set up Auth UI

Import the Auth component

Social providers

Options

Provider scopes

Supported views

Customization

Predefined themes

Switch theme variations

Override themes

Create your own theme

Custom CSS classes

Custom inline CSS

Custom labels

Hiding links

Sign in and sign up views