全棧身份認證實作:使用 Next.js、NextAuth.js 和 MongoDB-13. 密碼變更
Published in
Dec 13, 2023
實現用戶的密碼更改功能,包括創建界面和處理密碼更新請求。
13–1. 建立變更密碼頁面
- 在 lib/validations/auth.ts 中新增 changePasswordValidation 來確保密碼的有效性。
- 於 components/form 資料夾建立 ChangePasswordForm 組件(change-password-form.tsx)。
- app/(auth) 資料夾中建立 change-password 資料夾,存放對應頁面 (page.tsx),import ChangePasswordForm。
- 在 update-form.tsx 中添加到 change-password 頁面的鏈接,僅當用戶的登入方式為 credentials 時顯示此鏈接。
13–2. 設定用戶變更密碼功能
- 在 auth.actions.ts 中新增 changeUserPassword 以處理密碼變更請求,使用 bcrypt 驗證舊密碼並加密新密碼。
- change-password-form.tsx 修改 onSubmit function,使用 changeUserPassword 處理密碼變更,在變更成功後顯示通知,並執行登出及導向登入頁面。
程式碼
單元重點:
- (auth) 資料夾中,建立 change-password 路徑內容,並且將當中會使用到 “use client” 的表單獨立成 ChangePasswordForm 組件。
- 新增 server actions:changeUserPassword。