全棧身份認證實作：使用 Next.js、NextAuth.js 和 MongoDB－6. Google OAuth

整合 Google OAuth 作為登入方法，並處理第三方認證。

參考: NextAuth.js (GoogleProvider)

6–1. Google OAuth 設定

• 於 nextauth-options.ts 添加 GoogleProvider，GoogleProvider 中的 GOOGLE_CLIENT_ID、GOOGLE_CLIENT_SECRET 存放於環境變數檔。
• 前往 Google Cloud Console 設定並取得 GOOGLE_CLIENT_ID 、 GOOGLE_CLIENT_SECRET 。步驟如下：
• Authorized JavaScript origins: http://localhost:3000
  Authorized redirect URIs: http://localhost:3000/api/auth/callback/google

中文版

英文版

• 在 component/button 資料夾中新增 Google 登入按鈕（google-signin-button.tsx），並使用 google signIn 功能，透過設定 callbackUrl，用戶在登入後能夠被重新導回原先所在的頁面。
• 在 SignInForm 組件（signin-form.tsx）中使用 GoogleSignInButton。

程式碼

點選 Sign in with Google 後出現授權畫面

6–2. 使用 Google OAuth

• 用戶 session 資料可以在客戶端（前端）和伺服器端（後端）被訪問和使用。
• useSession() React Hook — 客戶端（前端）使用，可以用於檢查用戶是否已經登入，在渲染過程中管理和訪問 session 狀態。
• 使用範例：用於構建根據用戶登入狀態而調整功能或顯示的前端組件。
• getServerSession() 方法 — 伺服器端（後端）使用，可以用於保護 API 路由，確保只有已認證的用戶才能訪問，通過解析來自客戶端的 HTTP 請求中的”Session Token”（通常存儲在 Cookie 中），來確定當前的用戶身份。
• 使用範例：在伺服器端渲染頁面時根據用戶身份變更內容，或者用於創建需要用戶身份驗證的 API 路由，如更新用戶個人信息。
• 在 lib/actions 資料夾下創建 auth.actions.ts，集中管理所有與身份驗證相關的 server actions，新增 getUserSession。
• 展示如何在前端和後端使用用戶 session 資料：UserNav 組件（user-nav.tsx）根據 session 判斷登入狀態，UserAvatar 組件（user-avatar.tsx）顯示用戶頭像。

程式碼

根據 session 判斷登入狀態 及 顯示用戶頭像

單元重點

• 於 nextauth-options.ts 添加 GoogleProvider，GoogleProvider 中的 GOOGLE_CLIENT_ID、GOOGLE_CLIENT_SECRET 存放於環境變數檔。
• 新增 Google 登入按鈕，使用 google signIn 功能。
• 於 UserNav 及 UserAvatar 組件使用 session 資料。

參考資料

NextAuth.js (GoogleProvider)－https://next-auth.js.org/providers/google

回到目錄
https://medium.com/p/3d2a3ec1d3b6