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.
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)
Social providers
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.
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"
.
Custom inline CSS
You can use custom CSS inline styles for the following elements:
"button"
, "container"
, "anchor"
, "divider"
, "label"
, "input"
, "loader"
, "message"
.
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?
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/>