后端前端Web框架開(kāi)發(fā)工具【免費(fèi)下載鏈接】redwoodRedwoodGraphQL項(xiàng)目地址https://gitcode.com/gh_mirrors/re/redwood點(diǎn)擊查看免費(fèi)下載本篇技術(shù)指南以 Redwood 項(xiàng)目中的官方實(shí)戰(zhàn)手冊(cè)docs/versioned_docs/version-6.x/how-to/supabase-auth.md為核心完整講解如何將 Supabase 認(rèn)證Auth接入 Redwood 應(yīng)用從一條 CLI 命令完成配置、在管理控制臺(tái)獲取密鑰到親手實(shí)現(xiàn)注冊(cè)Sign Up頁(yè)、登錄Sign In頁(yè)、登出Sign Out按鈕以及根據(jù)認(rèn)證狀態(tài)自動(dòng)切換的導(dǎo)航鏈接。讀完后你將掌握 Redwood Auth 抽象層與 Supabase GoTrueJS 客戶端之間的協(xié)作關(guān)系并能獨(dú)立為任意 Redwood 頁(yè)面接入完整的郵箱密碼認(rèn)證閉環(huán)。為什么選擇 Supabase Auth這篇 How-to 本質(zhì)上可視為 Redwood 官方 GoTrue Auth 實(shí)戰(zhàn)手冊(cè) 的 Supabase 移植版。原因很簡(jiǎn)單Supabase 的認(rèn)證服務(wù)建立在 Netlify GoTrue 這一開(kāi)源基礎(chǔ)之上——它是一個(gè)專門處理用戶注冊(cè)與認(rèn)證的 API 服務(wù)。當(dāng)你理順這條技術(shù)脈絡(luò)后GoTrue 系的實(shí)戰(zhàn)手冊(cè)就變成了攀登認(rèn)證學(xué)習(xí)曲線的現(xiàn)成階梯。對(duì) Redwood 來(lái)說(shuō)最終使用的是 Redwood Auth 包裝層它提供了一層抽象與統(tǒng)一、簡(jiǎn)潔的 API 風(fēng)格。不過(guò)先直接與 Supabase Client 打交道一兩個(gè)小時(shí)例如跟隨 Supabase 的 React Quick Start 走一遍會(huì)對(duì)理解 Redwood 包裝層所隱藏的細(xì)節(jié)大有幫助。前置準(zhǔn)備開(kāi)始之前請(qǐng)依次完成以下步驟創(chuàng)建 Redwood 應(yīng)用注冊(cè) Supabase 賬戶并創(chuàng)建組織與項(xiàng)目完成 Supabase 的 React Quick Start先直連 Supabase Client建立直觀感受完成 Supabase 的 Redwood Quick Start觀察與純 React 用法的差異啟動(dòng)開(kāi)發(fā)服務(wù)器yarn redwood dev認(rèn)證術(shù)語(yǔ)梳理初次接觸時(shí)認(rèn)證領(lǐng)域的名詞容易讓人頭暈。這里幫你理清一條主線Redwood 的 Supabase 認(rèn)證客戶端包裝了 Supabase 的 GoTrueJS 客戶端而后者是 Netlify GoTrueJS 客戶端的分支它與 Netlify Identity 不同dbAuth 則是 Redwood 完全獨(dú)立的一種認(rèn)證方案。本教程暫不涉及 RBAC基于角色的訪問(wèn)控制。安裝與初始化一條命令搞定配置有了 Supabase Quick Start 的知識(shí)儲(chǔ)備回到我們創(chuàng)建好的 Redwood 應(yīng)用。安裝所需包并生成 Redwood Auth 的樣板代碼只需一條 CLI 命令yarn redwood setup auth supabase指定supabase作為 provider 后Redwood 會(huì)自動(dòng)向應(yīng)用寫入必要的 Supabase 配置。在 CLI 源碼中可以看到該命令在 packages/cli/src/commands/setup/auth/auth.js 中注冊(cè)為setup auth provider的子命令執(zhí)行時(shí)會(huì)動(dòng)態(tài)加載redwoodjs/auth-supabase-setup包若未安裝則自動(dòng)以與框架一致的版本yarn add -D安裝再調(diào)用其 handler 完成文件寫入與代碼修改。打開(kāi)web/src/App.[js/tsx]檢查你應(yīng)該看到import { AuthProvider } from redwoodjs/auth import { createClient } from supabase/supabase-js import { FatalErrorBoundary, RedwoodProvider } from redwoodjs/web import { RedwoodApolloProvider } from redwoodjs/web/apollo import FatalErrorPage from src/pages/FatalErrorPage import Routes from src/Routes import ./index.css const supabaseClient createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY) const App () ( FatalErrorBoundary page{FatalErrorPage} RedwoodProvider titleTemplate%PageTitle | %AppTitle AuthProvider client{supabaseClient} typesupabase RedwoodApolloProvider Routes / /RedwoodApolloProvider /AuthProvider /RedwoodProvider /FatalErrorBoundary ) export default App核心動(dòng)作是第 12 行的AuthProvider client{supabaseClient} typesupabase把用SUPABASE_URL和SUPABASE_KEY創(chuàng)建的 Supabase 客戶端實(shí)例注入到整個(gè)組件樹(shù)中供所有子組件通過(guò)useAuth鉤子訪問(wèn)。在較新版本的 Redwood 中對(duì)應(yīng)倉(cāng)庫(kù)當(dāng)前的 auth.ts.template初始化方式稍有演進(jìn)setup 會(huì)在web/src/auth.ts生成如下代碼把客戶端創(chuàng)建與AuthProvider/useAuth的裝配封裝在createAuth中頁(yè)面?zhèn)葎t統(tǒng)一從src/auth導(dǎo)入import { createClient } from supabase/supabase-js import { createAuth } from redwoodjs/auth-supabase-web const supabaseClient createClient( process.env.SUPABASE_URL || , process.env.SUPABASE_KEY || ) export const { AuthProvider, useAuth } createAuth(supabaseClient)兩種寫法的本質(zhì)相同最終都通過(guò)createAuth把 Supabase 客戶端包裝成 Redwood Auth 統(tǒng)一接口login、logout、signup、getToken等實(shí)現(xiàn)見(jiàn) packages/auth-providers/supabase/web/src/supabase.ts。環(huán)境變量配置現(xiàn)在把 Supabase 的 URL、公共 API Key 和 JWT 密鑰SUPABASE_URL、SUPABASE_KEY、SUPABASE_JWT_SECRET寫入.env文件。這些信息可在 Supabase 管理控制臺(tái)獲取Project URL 與 API keyanon / public新建項(xiàng)目后控制臺(tái)展示的項(xiàng)目 URL 和 API Key若頁(yè)面刷新錯(cuò)過(guò)可在「Connecting to your new project」區(qū)域找到。JWT Secret位于左側(cè)導(dǎo)航底部的「Project Settings齒輪圖標(biāo)」→「API」→ 向下滾動(dòng)至「JWT Settings」下的「JWT Secret」。.env示例如下# .env (in your root project directory) SUPABASE_URLhttps://replacewithyoursupabaseurl.supabase.co SUPABASE_KEYeyJhb_replace_VCJ9.eyJy_with_your_wfQ.0Abb_anon_key_teLJs SUPABASE_JWT_SECRETeyJh_replace_CJ9.eyJy_with_your_NTQwOTB9.MGNZN_JWT_secret_JgErqxj4此外還要在redwood.toml中把SUPABASE_URL和SUPABASE_KEY加入 web 側(cè)可見(jiàn)的環(huán)境變量白名單JWT Secret 僅用于 api 側(cè)校驗(yàn)不需要暴露給瀏覽器[web] # ... includeEnvironmentVariables [SUPABASE_URL, SUPABASE_KEY]至此配置基本完成。還有一個(gè)可選項(xiàng)若注冊(cè)流程不需要郵箱確認(rèn)可在 Supabase 管理控制臺(tái)Authentication Settings中關(guān)閉「Enable email confirmations」。源碼視角Redwood Auth 如何包裝 Supabase理解底層實(shí)現(xiàn)有助于排查問(wèn)題。在 supabase.ts 中createAuthImplementation返回的 auth 實(shí)現(xiàn)把 Supabase SDK 的多種登錄方式統(tǒng)一收斂到login方法通過(guò)credentials.authMethod分發(fā)到不同底層調(diào)用password→supabaseClient.auth.signInWithPassword(credentials)郵箱/手機(jī)號(hào) 密碼登錄oauth→supabaseClient.auth.signInWithOAuth(credentials)GitHub、Google 等第三方登錄otp→supabaseClient.auth.signInWithOtp(credentials)魔法鏈接或一次性密碼支持郵箱與手機(jī)sso→supabaseClient.auth.signInWithSSO(credentials)企業(yè)級(jí)單點(diǎn)登錄實(shí)驗(yàn)性id_token→supabaseClient.auth.signInWithIdToken(credentials)用受支持廠商簽發(fā)的 ID Token 登錄實(shí)驗(yàn)性其他情況返回?cái)y帶AuthError(Unsupported authentication method)的結(jié)果signup直接調(diào)用supabaseClient.auth.signUp(credentials)且若返回結(jié)果包含session即服務(wù)端開(kāi)啟了自動(dòng)確認(rèn)會(huì)同步寫入auth-providercookielogout調(diào)用supabaseClient.auth.signOut()getToken與getUserMetadata都基于supabaseClient.auth.getSession()返回會(huì)話與用戶元數(shù)據(jù)restoreAuthState則在 OAuth 或魔法鏈接回調(diào)重定向回站點(diǎn)時(shí)通過(guò)refreshSession()恢復(fù)會(huì)話并清理 URL 中的access_token、refresh_token等認(rèn)證參數(shù)。setup 同時(shí)會(huì)生成 api 側(cè)的 api/src/lib/auth.tsgetCurrentUser解析并解碼 JWT 返回用戶信息與可選角色requireAuth/hasRole/isAuthenticated供 service 層做登錄與角色校驗(yàn)未登錄拋AuthenticationError角色不符拋ForbiddenError。注意getCurrentUser的返回值會(huì)暴露給 web 端務(wù)必只返回安全的字段。注冊(cè)頁(yè)面Sign Up先生成注冊(cè)頁(yè)面yarn redwood generate page signup這會(huì)向路由文件添加一條注冊(cè)路由并創(chuàng)建SignupPage組件。在web/src/pages/SignupPage/SignupPage.[js/tsx]中導(dǎo)入 Redwood Form 組件做一個(gè)最基礎(chǔ)的表單import { Form, TextField, PasswordField, Submit } from redwoodjs/forms const SignupPage () { return ( h1Sign Up/h1 Form TextField nameemail placeholderemail / PasswordField namepassword placeholderpassword / SubmitSign Up/Submit /Form / ) } export default SignupPage想要更精致的表單樣式可參考 Redwood Form 文檔與教程的表單章節(jié)。這里聚焦功能本身——為表單添加onSubmit// ... const SignupPage () { const onSubmit (data) { // do something here } return ( h1Sign Up/h1 Form onSubmit{onSubmit} TextField nameemail placeholderemail / PasswordField namepassword placeholderpassword / SubmitSign Up/Submit /Form / ) } //...要做的事是——注冊(cè)。為此需要與AuthProvider /及其內(nèi)部包裝的 Supabase GoTrue-JS 客戶端通信這就要用到useAuth鉤子。導(dǎo)入useAuth并從中解構(gòu)出client即我們傳入的 Supabase GoTrue-JS 實(shí)例可調(diào)用其全部方法import { Form, TextField, PasswordField, Submit } from redwoodjs/forms import { useAuth } from redwoodjs/auth const SignupPage () { const { client } useAuth() const onSubmit (data) { // do something here } return ( h1Sign Up/h1 Form onSubmit{onSubmit} TextField nameemail placeholderemail / PasswordField namepassword placeholderpassword / SubmitSign Up/Submit /Form / ) } export default SignupPage在onSubmit中通過(guò)client.auth.signUp()傳入表單捕獲的email與password來(lái)創(chuàng)建新用戶import { Form, TextField, PasswordField, Submit } from redwoodjs/forms import { useAuth } from redwoodjs/auth const SignupPage () { const { client } useAuth() const onSubmit async (data) { try { const response await client.auth.signUp({ email: data.email, password: data.password }) console.log(response: , response) } catch(error) { console.log(error: , error) } } return ( h1Sign Up/h1 Form onSubmit{onSubmit} TextField nameemail placeholderemail / PasswordField namepassword placeholderpassword / SubmitSign Up/Submit /Form / ) } export default SignupPage目前注冊(cè)可用但僅把響應(yīng)打印到控制臺(tái)并不實(shí)用。接下來(lái)用React.useState()管理錯(cuò)誤狀態(tài)條件渲染錯(cuò)誤消息并在每次提交前用setError(null)重置import { Form, TextField, PasswordField, Submit } from redwoodjs/forms import { useAuth } from redwoodjs/auth const SignupPage () { const { client } useAuth() const [error, setError] React.useState(null) const onSubmit async (data) { setError(null) try { const response await client.auth.signUp({ email: data.email, password: data.password }) console.log(response: , response) response?.error?.message setError(response.error.message) } catch(error) { setError(error.message) } } return ( h1Sign Up/h1 Form onSubmit{onSubmit} {error p{error}/p} TextField nameemail placeholderemail / PasswordField namepassword placeholderpassword / SubmitSign Up/Submit /Form / ) } export default SignupPage錯(cuò)誤有兩種返回方式promise 正常兌現(xiàn)fulfillment時(shí)錯(cuò)誤位于返回對(duì)象內(nèi)的error屬性中promise 被拒絕rejection時(shí)錯(cuò)誤通過(guò) promise 本身拋出由catch塊捕獲處理。再處理成功提交的情況若關(guān)閉了郵箱確認(rèn)注冊(cè)成功即等同于登錄成功此時(shí)應(yīng)把用戶重定向回應(yīng)用首頁(yè)。先生成首頁(yè)若還沒(méi)有yarn redwood generate page home /然后從 Redwood Router 導(dǎo)入routes與navigate在注冊(cè)成功后跳轉(zhuǎn)import { Form, TextField, PasswordField, Submit } from redwoodjs/forms import { useAuth } from redwoodjs/auth import { routes, navigate } from redwoodjs/router const SignupPage () { const { client } useAuth() const [error, setError] React.useState(null) const onSubmit async (data) { setError(null) try { const response await client.auth.signUp({ email: data.email, password: data.password }) response?.error?.message ? setError(response.error.message) : navigate(routes.home()) } catch(error) { setError(error.message) } } return ( h1Sign Up/h1 Form onSubmit{onSubmit} {error p{error}/p} TextField nameemail placeholderemail / PasswordField namepassword placeholderpassword / SubmitSign Up/Submit /Form / ) } export default SignupPage注冊(cè)頁(yè)完成注冊(cè)表單、錯(cuò)誤展示、成功后跳轉(zhuǎn)首頁(yè)一應(yīng)俱全。登錄頁(yè)面Sign In先生成登錄頁(yè)yarn redwood generate page signin添加含email、password字段的基礎(chǔ)表單、錯(cuò)誤提示與空的onSubmitimport { Form, TextField, PasswordField, Submit } from redwoodjs/forms const SigninPage () { const [error, setError] React.useState(null) const onSubmit (data) { // do sign in here } return ( h1Sign In/h1 Form onSubmit{onSubmit} {error p{error}/p} TextField nameemail placeholderemail / PasswordField namepassword placeholderpassword / SubmitSign In/Submit /Form / ) } export default SigninPage導(dǎo)入useAuth并解構(gòu)出logInimport { Form, TextField, PasswordField, Submit } from redwoodjs/forms import { useAuth } from redwoodjs/auth const SigninPage () { const { logIn } useAuth() const [error, setError] React.useState(null) const onSubmit (data) { setError(null) // do sign in here } return ( h1Sign In/h1 Form onSubmit{onSubmit} {error p{error}/p} TextField nameemail placeholderemail / PasswordField namepassword placeholderpassword / SubmitSign In/Submit /Form / ) } export default SigninPage與注冊(cè)不同這次直接調(diào)用 Redwood Auth 的logIn函數(shù)而非經(jīng)由client向其傳入包含 email 與 password 的對(duì)象import { Form, TextField, PasswordField, Submit } from redwoodjs/forms import { useAuth } from redwoodjs/auth const SigninPage () { const { logIn } useAuth() const [error, setError] React.useState(null) const onSubmit async (data) { setError(null) try { const response await logIn({ email: data.email, password: data.password }) // do something } catch(error) { setError(error.message) } } return ( h1Sign In/h1 Form onSubmit{onSubmit} {error p{error}/p} TextField nameemail placeholderemail / PasswordField namepassword placeholderpassword / SubmitSign In/Submit /Form / ) } export default SigninPage登錄成功后重定向回首頁(yè)。從redwoodjs/router導(dǎo)入navigate與routes在await logIn之后使用import { Form, TextField, PasswordField, Submit } from redwoodjs/forms import { useAuth } from redwoodjs/auth import { navigate, routes } from redwoodjs/router const SigninPage () { const { logIn } useAuth() const [error, setError] React.useState(null) const onSubmit async (data) { setError(null) try { const response await logIn({ email: data.email, password: data.password }) response?.error?.message ? setError(response.error.message) : navigate(routes.home()) } catch(error) { setError(error.message) } } return ( h1Sign In/h1 Form onSubmit{onSubmit} {error p{error}/p} TextField nameemail placeholderemail / PasswordField namepassword placeholderpassword / SubmitSign In/Submit /Form / ) } export default SigninPage手冊(cè)剩余部分與 Netlify GoTrue Auth 版本一致這正體現(xiàn)了 Redwood Auth 包裝層的樂(lè)趣特定認(rèn)證方案相關(guān)的代碼只集中在上面幾個(gè)位置其余部分可統(tǒng)一使用通用的 Redwood Auth 函數(shù)。在 Redwood 中l(wèi)ogIn是統(tǒng)一入口除密碼登錄外它同樣支持 OAuth、OTP、ID Token 與 SSO 等方式只需傳入不同的authMethod對(duì)應(yīng)源碼中的credentials.authMethod分發(fā)邏輯。例如 GitHub OAuth 登錄可寫作logIn({ authMethod: oauth, provider: github })。登出按鈕Sign Out登出是最容易實(shí)現(xiàn)的——只需調(diào)用useAuth的logOut方法。先生成組件yarn redwood generate component signoutBtn在web/src/components/SignoutBtn/SignoutBtn.js中渲染按鈕并添加點(diǎn)擊處理器const SignoutBtn () { const onClick () { // do sign out here. } return button onClick{() onClick()}Sign Out/button } export default SignoutBtn導(dǎo)入useAuth解構(gòu)logOut并在onClick中調(diào)用import { useAuth } from redwoodjs/auth const SignoutBtn () { const { logOut } useAuth() const onClick () { logOut() } return button onClick{() onClick()}Sign Out/button } export default SignoutBtn這已經(jīng)能工作但用戶可能正處在受保護(hù)的頁(yè)面登出后應(yīng)將其導(dǎo)航離開(kāi)當(dāng)前頁(yè)import { useAuth } from redwoodjs/auth import { navigate, routes } from redwoodjs/router const SignoutBtn () { const { logOut } useAuth() const onClick async () { await logOut() navigate(routes.home()) } return button onClick{() onClick()}Sign Out/button } export default SignoutBtn在底層logOut調(diào)用supabaseClient.auth.signOut()清除瀏覽器會(huì)話與 localStorage并觸發(fā)SIGNED_OUT事件見(jiàn) supabase.ts 中l(wèi)ogout的實(shí)現(xiàn)。目前這個(gè)按鈕還沒(méi)有渲染到任何地方——下一步就把它接進(jìn)根據(jù)認(rèn)證狀態(tài)切換的導(dǎo)航。認(rèn)證狀態(tài)導(dǎo)航Auth Links實(shí)現(xiàn)一段根據(jù)用戶認(rèn)證狀態(tài)條件渲染的導(dǎo)航用戶未登錄時(shí)顯示Sign Up與Sign In用戶已登錄時(shí)顯示Log Out先生成導(dǎo)航組件yarn redwood generate component navigation在web/src/components/Navigation/Navigation.js中導(dǎo)入 Router 的Link組件與routes對(duì)象以及用于訂閱認(rèn)證狀態(tài)的useAuthimport { Link, routes } from redwoodjs/router import { useAuth } from redwoodjs/auth const Navigation () { return nav/nav } export default Navigation從useAuth解構(gòu)isAuthenticated并在條件語(yǔ)句中使用import { Link, routes } from redwoodjs/router import { useAuth } from redwoodjs/auth const Navigation () { const { isAuthenticated } useAuth() return ( nav {isAuthenticated ? ( // signed in - show the Sign Out button ) : ( // signed out - show the Sign Up and Sign In links )} /nav ) } export default NavigationRedwood Auth 基于 React 的 Context API 管理與廣播認(rèn)證狀態(tài)因此可以放心只要組件位于AuthProvider /之下isAuthenticated就會(huì)始終是最新的——即使認(rèn)證狀態(tài)在組件樹(shù)中的其他組件里發(fā)生變化React 也會(huì)自動(dòng)重渲染出正確的組件。把登出按鈕以及登錄、注冊(cè)鏈接放進(jìn)條件塊的對(duì)應(yīng)分支import { Link, routes } from redwoodjs/router import { useAuth } from redwoodjs/auth import SignoutBtn from src/components/SignoutBtn/SignoutBtn const Navigation () { const { isAuthenticated } useAuth() return ( nav {isAuthenticated ? ( SignoutBtn / ) : ( Link to{routes.signup()}Sign Up/Link Link to{routes.signin()}Sign In/Link / )} /nav ) } export default Navigation導(dǎo)航組件已經(jīng)可用還需要把它渲染到頁(yè)面中。先生成一個(gè)名為 GlobalLayout 的布局yarn redwood generate layout global在生成的web/src/layouts/GlobalLayout/GlobalLayout中導(dǎo)入并渲染導(dǎo)航組件import Navigation from src/components/Navigation/Navigation const GlobalLayout ({ children }) { return ( header Navigation / /header main{children}/main / ) } export default GlobalLayout最后用 Router 的Set組件把每個(gè)頁(yè)面高效地包裹進(jìn)GlobalLayout更新web/src/Routes.[js/tsx]import { Router, Route, Set } from redwoodjs/router import GlobalLayout from src/layouts/GlobalLayout/GlobalLayout const Routes () { return ( Router Set wrap{GlobalLayout} Route path/ page{HomePage} namehome / Route path/signup page{SignUpPage} namesignup / Route path/signin page{SignInPage} namesignin / /Set Route notfound page{NotFoundPage} / /Router ) } export default Routes現(xiàn)在導(dǎo)航會(huì)根據(jù)認(rèn)證狀態(tài)渲染正確的鏈接與按鈕登錄后看到Sign Out按鈕登出后看到Sign Up與Sign In鏈接。測(cè)試與驗(yàn)證認(rèn)證實(shí)現(xiàn)的正確性保障倉(cāng)庫(kù)為 Supabase 認(rèn)證實(shí)現(xiàn)提供了完整的單元測(cè)試見(jiàn) packages/auth-providers/supabase/web/src/tests/supabase.test.tsx。這些用例覆蓋了本手冊(cè)涉及的全部核心場(chǎng)景可作為自測(cè)清單登錄前isAuthenticated為false郵箱 密碼注冊(cè)含附加元數(shù)據(jù)、重定向 URL 兩種變體后認(rèn)證狀態(tài)為true且currentUser.email與userMetadata正確密碼登錄后isAuthenticated為true登出后恢復(fù)為falsehasRole支持從 Supabase 的app_metadata.roles讀取角色也支持通過(guò)useHasRole/useCurrentUser自定義鉤子覆寫默認(rèn)行為OAuth、OTP、ID Token、SSO 四種logIn方式均能正確建立認(rèn)證狀態(tài)。此外supabase.middleware.test.tsx 驗(yàn)證了流式 SSR 場(chǎng)景下中間件認(rèn)證middleware auth的行為。收尾與延伸至此我們已經(jīng)完成了用 Redwood Auth 配置 Supabase GoTrue Auth創(chuàng)建注冊(cè)頁(yè)、登錄頁(yè)與登出按鈕并把認(rèn)證鏈接接入布局。配置、注冊(cè)、登錄、登出、狀態(tài)化導(dǎo)航的完整閉環(huán)已經(jīng)跑通。后續(xù)深入時(shí)值得留意的特性未來(lái)的實(shí)戰(zhàn)手冊(cè)可以逐個(gè)深挖認(rèn)證狀態(tài)變更監(jiān)聽(tīng)可通過(guò) Supabase 客戶端的onAuthStateChange事件監(jiān)聽(tīng)SIGNED_IN、SIGNED_OUT、TOKEN_REFRESHED、USER_UPDATED、PASSWORD_RECOVERY等事件需在useEffect中調(diào)用并記得退訂。更多認(rèn)證方式Passwordless輸入郵箱獲取魔法確認(rèn)鏈接對(duì)應(yīng)authMethod: otp第三方登錄GitHub、Google 等對(duì)應(yīng)authMethod: oauth手機(jī)一次性密碼OTP使用刷新令牌refresh token登錄——JWT 是認(rèn)證實(shí)現(xiàn)的關(guān)鍵組成部分受保護(hù)頁(yè)面在 api 側(cè)通過(guò)requireAuth保護(hù) service未認(rèn)證用戶將收到AuthenticationError。相關(guān)參考資源Redwood Supabase Auth 安裝與設(shè)置文檔版本 6.x 的 Supabase 認(rèn)證專章Redwood Supabase Auth 客戶端實(shí)現(xiàn)packages/auth-providers/supabase/web/src/supabase.tsSupabase 認(rèn)證客戶端使用與配置說(shuō)明packages/auth-providers/supabase/web/README.mdsetup 命令注冊(cè)源碼packages/cli/src/commands/setup/auth/auth.js贊分享后端前端Web框架開(kāi)發(fā)工具【免費(fèi)下載鏈接】redwoodRedwoodGraphQL項(xiàng)目地址https://gitcode.com/gh_mirrors/re/redwood點(diǎn)擊查看免費(fèi)下載相關(guān)推薦Redwood Supabase Auth 實(shí)戰(zhàn)指南GoTrue 認(rèn)證接入、注冊(cè)登錄與狀態(tài)導(dǎo)航Redwood Supabase Auth 實(shí)戰(zhàn)指南GoTrue 認(rèn)證接入、注冊(cè)登錄與狀態(tài)導(dǎo)航 本文是一份基于 Redwood 官方文檔《Supabase后端前端Web框架開(kāi)發(fā)工具Redwood 接入 Supabase Auth 完整實(shí)戰(zhàn)從 setup auth 到注冊(cè)、登錄、登出與條件導(dǎo)航Redwood 接入 Supabase Auth 完整實(shí)戰(zhàn)從 setup auth 到注冊(cè)、登錄、登出與條件導(dǎo)航 本篇指南以 Redwood 官方 How t后端前端Web框架開(kāi)發(fā)工具Repomix 遠(yuǎn)端 GitHub 倉(cāng)庫(kù)處理指南從 --remote 打包到遠(yuǎn)端設(shè)定信任機(jī)制Repomix 遠(yuǎn)端 GitHub 倉(cāng)庫(kù)處理指南從 remote 打包到遠(yuǎn)端設(shè)定信任機(jī)制 Repomix 可以把整個(gè)程式碼庫(kù)打包成單一、對(duì) AI 友善的檔案后端前端Web框架開(kāi)發(fā)工具創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考