全棧身份認證實作：使用 Next.js、NextAuth.js 和 MongoDB－1專案介紹

專案概述和各單元內容概要。

1–1. 專案概述

我們將使用 Next.js 13、NextAuth.js、MongoDB、TypeScript 以及 Server Actions 來構建一個全棧身份認證專案，了解如何安全地處理用戶密碼，以及如何根據用戶身分實施路由保護。此外我們將透過 MongoDB 進行數據存儲，並利用 Mongoose 來設計和操作數據模型。專案中還包含了對 shadcn/ui 組件的實際應用，基於 Tailwind CSS 的組件不僅具有高度的可客製性，還能根據需求靈活調整。專案的功能特點包含：

• OAuth：可透過 Google 進行登錄。
• 註冊功能：可用名稱、電子郵件、密碼註冊帳戶。
• 憑證登入：使用電子郵件和密碼進行登入。
• 個人資料編輯：變更用戶資料。
• 修改密碼：安全地更新密碼。
• 安全路由：僅供已登入的用戶或管理員瀏覽特定頁面。

1–2. 各單元內容概要

本系列文章包含以下主題：

第2單元：專案建立－初始化和設置 Next.js 專案，包括基本配置和套件安裝

第3單元：介面配置－配置和設計用戶界面，包括頁面佈局和組件創建

第4單元：NextAuth 設定－使用 NextAuth.js 進行身份認證，包括配置和使用者數據處理

第5單元：註冊與登入－用戶註冊和登入的實現方式，包括表單處理和驗證

第6單元：Google OAuth－整合 Google OAuth 作為登入方法，並處理第三方認證

第7單元：用戶登出－用戶登出功能的實現

第8單元：MongoDB 配置－MongoDB 數據庫的配置和整合，以及數據模型設計

第9單元：Google OAuth 與 mongoose－結合 Google OAuth 和 mongoose 管理用戶數據

第10單元：用戶資料更新－實現用戶資料的更新，包括創建表單和處理更新請求

第11單元：帳號註冊－使用電子郵件和密碼進行帳號註冊的流程

第12單元：帳號登入－使用電子郵件和密碼進行帳號登入的方法

第13單元：密碼變更－實現用戶的密碼更改功能，包括創建界面和處理密碼更新請求

第14單元：路由權限驗證－使用 Middleware 設置路由保護機制，根據用戶身份限制訪問

第15單元：深色模式切換－配置深色模式切換功能

第16單元：專案佈署－將專案佈署到線上平台(Vercel)