Use Supabase Auth with React
Learn how to Supabase Auth with React.js.
Create a new Supabase project
Launch a new project in the Supabase Dashboard.
Your new database has a table for storing your users. You can see that this table is currently empty by running some SQL in the SQL Editor.
select * from auth.users;
Create a React app
Create a React app using the create-react-app command.
1npx create-react-app my-app
Install the Supabase client library
The fastest way to get started is to use Supabase's auth-ui-react library which provides a convenient interface for working with Supabase Auth from a React app.
Navigate to the React app and install the Supabase libraries.
1cd my-app && npm install @supabase/supabase-js @supabase/auth-ui-react
Set up your login component
In index.js, create a Supabase client using your Project URL and public API (anon) key.
You can configure the Auth component to display whenever there is no session inside supabase.auth.getSession()
import './index.css'
import { useState, useEffect } from 'react'
import { createClient } from '@supabase/supabase-js'
import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')
export default function App() {
const [session, setSession] = useState(null)
useEffect(() => {
supabase.auth.getSession().then(({ data: { session } }) => {
setSession(session)
})
const {
data: { subscription },
} = supabase.auth.onAuthStateChange((_event, session) => {
setSession(session)
})
return () => subscription.unsubscribe()
}, [])
if (!session) {
return (<Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa }} />)
}
else {
return (<div>Logged in!</div>)
}
}
Start the app
Start the app, go to http://localhost:3000 in a browser, and open the browser console and you should be able to log in.
1npm start