全棧身份認證實作:使用 Next.js、NextAuth.js 和 MongoDB-5. 註冊與登入
Published in
Dec 13, 2023
用戶註冊和登入的實現方式,包括表單的建立和驗證。
5–1. 基礎設置
- app/(auth) 資料夾中新增 layout.tsx (AuthLayout) ,設置統一的樣式。
- app/(auth) 資料夾中建立 signup 和 signin 資料夾,各自存放對應頁面 (page.tsx)。
程式碼
5–2. 建立登入頁面
- 在 lib/validations/auth.ts 中新增 userSignInValidation 來驗證用戶輸入。使用 zod 進行表單驗證,確保用戶輸入的資料格式正確,並減少不必要的 API 調用。
- 於 components/form 資料夾建立 SignInForm 組件(signin-form.tsx),在 signin 頁面中 import SignInForm。使用表單組件的原因為維持頁面伺服器端渲染的優點,也可以達到表單組件用戶端渲染的互動功能。
- 利用表單狀態(如 pending 狀態)來提高用戶體驗,如禁用提交按鈕以防止重複提交。
程式碼
5–3. 建立註冊頁面
- 在 lib/validations/auth.ts 中新增 userSignUpValidation 來驗證用戶輸入。
- 於 components/form 資料夾建立 SignUpForm 組件(signup-form.tsx),在 signup 頁面中 import SignUpForm。
程式碼
單元重點
- 在 (auth) 資料夾建立 layout.tsx (AuthLayout) ,在此添加的組件及樣式設定會套用在 auth 資料夾下的頁面。
- (auth) 資料夾中,建立 signup 路徑內容及 signin 路徑內容,並且將當中會使用 “use client” 的表單獨立成 SignUpForm、SignInForm 組件。
參考資料
shadcn/ui (React Hook Form)-https://ui.shadcn.com/docs/components/form
Next.js (Server Actions and Mutations)-https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations