Use Supabase Auth with React

Learn how to use 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.

SQL_EDITOR


_10 select * from auth.users;

Create a React app

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

Terminal


_10npx 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.

Terminal


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

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()

src/index.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  }

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


_10npm start