Auth

Use Supabase Auth with React

Learn how to use Supabase Auth with React.js.


1

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.

SQL_EDITOR

_10
select * from auth.users;

2

Create a React app

Create a React app using the create-react-app command.

Terminal

_10
npx create-react-app my-app

3

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.

Terminal

_10
cd my-app && npm install @supabase/supabase-js @supabase/auth-ui-react @supabase/auth-ui-shared

4

Set up your login component

In App.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()

src/App.js

_32
import './index.css'
_32
import { useState, useEffect } from 'react'
_32
import { createClient } from '@supabase/supabase-js'
_32
import { Auth } from '@supabase/auth-ui-react'
_32
import { ThemeSupa } from '@supabase/auth-ui-shared'
_32
_32
const supabase = createClient('https://<project>.supabase.co', '<your-anon-key>')
_32
_32
export default function App() {
_32
const [session, setSession] = useState(null)
_32
_32
useEffect(() => {
_32
supabase.auth.getSession().then(({ data: { session } }) => {
_32
setSession(session)
_32
})
_32
_32
const {
_32
data: { subscription },
_32
} = supabase.auth.onAuthStateChange((_event, session) => {
_32
setSession(session)
_32
})
_32
_32
return () => subscription.unsubscribe()
_32
}, [])
_32
_32
if (!session) {
_32
return (<Auth supabaseClient={supabase} appearance={{ theme: ThemeSupa }} />)
_32
}
_32
else {
_32
return (<div>Logged in!</div>)
_32
}
_32
}

5

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.

Terminal

_10
npm start