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