@supabase/auth-ui-solid
v0.3.8
Published
Supabase Auth UI is a collection of pre built UI components that work seamlessly with @supabase/auth-helpers.
Downloads
274
Maintainers
Keywords
Readme
Supabase Auth UI Solid.js
Supabase Auth UI is a collection of pre built UI components that work seamlessly with @supabase/auth-helpers.
The main purpose of these components is to allow developers to get working on their apps quickly, but also be able to use their own style/css.
Auth UI is kept deliberately separate from @supabase/auth-helpers so that developers can migrate away from pre-built UI components as their UI system naturally matures.
How to use?
In order to make use of the Solid.js Supabase Auth UI you'll need to have a few things ready first. Let's talk about those things step by step:
Install Supabase and the Solid.js Supabase-auth-ui
First let us install Supabase into our Solid.js project.
npm install @supabase/supabase-js @supabase/auth-ui-solid
# or
yarn add @supabase/supabase-js @supabase/auth-ui-solid
Create you Supabase client
Let's create our Supabase client
import { createClient } from '@supabase/supabase-js'
const supabase = createClient(
'<INSERT PROJECT URL>',
'<INSERT PROJECT ANON API KEY>'
)
Passing your Supabase client to the Auth component as a prop
import { createClient } from '@supabase/supabase-js'
import { Auth } from '@supabase/auth-ui-solid'
const supabase = createClient(
'<INSERT PROJECT URL>',
'<INSERT PROJECT ANON API KEY>'
)
const App = () => <Auth supabaseClient={supabase} />
And voila we're done! This will give you the bare minimum of what you'll need to get started with supabase-auth-ui. In order to add styling to your Auth component checkout our full documentation here