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.
Social providers
The Auth component also supports login with official social providers.
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.
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.
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.
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:
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
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/>