在React中使用Supabase身份验证

学习如何在React.js中使用Supabase身份验证功能

创建新的Supabase项目

您的新数据库已包含用于存储用户的表。您可以通过在SQL编辑器中运行SQL语句来查看该表当前为空。

SQL_EDITOR

1
select * from auth.users;

创建React应用

使用create-react-app命令创建React应用。

Terminal

1
npx create-react-app my-app

安装Supabase客户端库

最快捷的入门方式是使用Supabase的auth-ui-react库，它提供了从React应用操作Supabase Auth的便捷接口。

导航至React应用并安装Supabase库。

Terminal

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

设置登录组件

在App.js中，使用您的项目URL和公共API(anon)密钥创建Supabase客户端。

您可以配置Auth组件在supabase.auth.getSession()没有会话时显示。

src/App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import './index.css'  import { useState, useEffect } from 'react'  import { createClient } from '@supabase/supabase-js'  import { Auth } from '@supabase/auth-ui-react'  import { ThemeSupa } from '@supabase/auth-ui-shared'  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>)    }  }

启动应用

启动应用，在浏览器中访问http://localhost:3000，打开浏览器控制台，您应该能够登录。

Terminal

1
npm start