在React中使用Supabase身份验证
学习如何在React.js中使用Supabase身份验证功能
1
SQL_EDITOR
1select * from auth.users;
2
创建React应用
使用create-react-app
命令创建React应用。
Terminal
1npx create-react-app my-app
3
安装Supabase客户端库
最快捷的入门方式是使用Supabase的auth-ui-react
库,它提供了从React应用操作Supabase Auth的便捷接口。
导航至React应用并安装Supabase库。
Terminal
1cd my-app && npm install @supabase/supabase-js @supabase/auth-ui-react @supabase/auth-ui-shared
4
src/App.js
1234567891011121314151617181920212223242526272829303132import './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>) } }