认证

在React中使用Supabase身份验证

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


1

创建新的Supabase项目

Supabase控制面板启动新项目

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

SQL_EDITOR
1
select * from auth.users;
2

创建React应用

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

Terminal
1
npx create-react-app my-app
3

安装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
4

设置登录组件

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>) } }
5
Terminal
1
npm start