我用 Claude Code 幫網站裝上 Google 登入：12 歲也能按表操作的完整攻略

這篇文章我要講一件很現實的事：

如果你的網站沒有「登入功能」，你就永遠不知道誰在用它。

訪客來了又走，你不認識他們，他們也不認識你。等於你在路邊擺攤，客人拿了試吃就走，連名字都留不到。

我決定幫 aicoding.tw 裝上登入功能。不是因為我會寫程式——我不會。而是因為我有 Claude Code，還有一個很清楚的目標：讓學員可以登入、看訂閱狀態、解鎖課程。

這篇是整個過程的真實記錄。從「完全沒有登入功能」到「Google 一鍵登入 + 學員儀表板」，全程 Claude Code 代工，我負責想清楚要什麼。

在請 Claude Code 動手之前，我先想好了三件事：

1. 登入方式：Google 一鍵登入（最簡單，不用記密碼）+ Magic Link（輸入 Email 就能登入）
2. 會員資料：每個學員有 Email、名稱、訂閱狀態（有付費 / 沒付費）、訂閱到期日
3. 介面：一個登入頁、一個學員儀表板（顯示你是誰、有沒有訂閱）

這三件事想清楚，Claude Code 才知道要幫你蓋什麼。不然就像你跟師傅說「幫我裝個東西」，師傅也不知道你要裝什麼。

Claude Code 建議用一個叫做 better-auth 的套件來處理登入這件事。它幫你搞定 Google OAuth、Magic Link、把使用者資料存進資料庫這些複雜的事情。

你只需要在終端機輸入：

npm install better-auth

然後 Claude Code 會幫你建立三個檔案：

• src/lib/auth.ts — 告訴程式：Google 登入怎麼設定、Magic Link 怎麼發信、新用戶登入後要做什麼
• src/lib/auth-client.ts — 前端的登入工具箱（按下 Google 登入按鈕時用這個）
• app/api/auth/[...all]/route.ts — 一個 API 路由，所有登入請求都從這裡進來

你的網站需要一個地方記錄學員資料。我在 Payload CMS 裡新增了一個叫做 students 的集合（你可以想成是 Excel 裡的一個工作表）。

每一筆學員記錄長這樣：

• Email — 學員的信箱（也是帳號 ID）
• 名稱 — 學員的名字
• 訂閱狀態 — active（訂閱中）或 inactive（未訂閱）
• 訂閱到期日 — 什麼時候到期
• 訂閱 ID — 留給未來金流系統用（現在先空著）

最酷的是：設定好之後，每次有新人第一次登入，系統會「自動」幫他建立學員記錄，不需要你手動新增。這就是「databaseHooks」的魔法——新用戶登入 → 自動同步到學員名單。

這一步很多人會跳過，然後卡住。

better-auth 除了你的 students 表格之外，它自己還需要四個表格來記錄登入狀態：

• user — 記錄帳號資料
• session — 記錄目前登入的 session
• account — 記錄 Google 帳號關聯
• verification — 記錄 Magic Link 的驗證碼

執行這個指令讓它自動建立：

npx @better-auth/cli generate -y

npx @better-auth/cli migrate -y

⚠️ 踩坑提醒：migrate 指令有時候說「成功」但其實沒有真的建立表格（CLI 的 bug）。確認方式：登入試試看，如果出現「relation verification does not exist」的錯誤，就是沒建成功，要手動執行 SQL。Claude Code 知道怎麼處理，直接告訴它就好。

這是最重要的一步，也是我第一次踩坑的地方。

一開始我把 aicoding.tw 和另一個網站 aiart.tw 用了同一個 Google 登入設定。結果點下去登入，跑去 aiart.tw 了。

教訓：每個網站都要有自己專屬的 Google 登入憑證。

怎麼申請？

1. 前往 Google Cloud Console（在 Google 搜尋「Google Cloud Console」）
2. 左側點「Google Auth Platform」→「用戶端」→「建立用戶端」
3. 類型選「網頁應用程式」
4. 名稱填你的網站名稱（例如：aicoding.tw）
5. 已授權的 JavaScript 來源：加入 https://你的網站.tw 和 http://localhost:3000
6. 已授權的重新導向 URI：加入 https://你的網站.tw/api/auth/callback/google 和 http://localhost:3000/api/auth/callback/google
7. 點儲存，複製 Client ID 和 Client Secret

拿到這兩串代碼之後，存進 .env.local 檔案：

GOOGLE_CLIENT_ID="你的 Client ID"

GOOGLE_CLIENT_SECRET="你的 Client Secret"

環境變數就像是網站的「私人設定頁」，放你不能公開的機密資訊。

本機開發（.env.local）需要加這幾個：

• BETTER_AUTH_SECRET — 一組隨機密碼，用來加密登入資料（執行 openssl rand -hex 32 產生）
• BETTER_AUTH_URL — 本機填 http://localhost:3000
• GOOGLE_CLIENT_ID / GOOGLE_CLIENT_SECRET — 剛剛從 Google 拿到的
• EMAIL_PROVIDER — 先填 none，這樣 Magic Link 會印在終端機方便測試
• PAYLOAD_DATABASE_PUSH — 填 false（重要！下面解釋為什麼）

部署到 Vercel 時，BETTER_AUTH_URL 要改成 https://你的正式網址。

這是這次開發最驚險的一刻。

當我跑某個管理工具時，終端機突然出現：

You're about to delete user table with 1 items

You're about to delete session table with 1 items

DATA LOSS WARNING: Possible data loss detected if schema is pushed.

翻譯：「你確定要刪掉 user 資料表嗎？」

怎麼回事？Payload CMS 在啟動時，會自動掃描資料庫，然後想把它「不認識」的表格刪掉——而 better-auth 的 user、session 這些表格，Payload 確實不認識。

幸好預設選項是「N（不刪除）」，資料沒事。

但這個問題每次啟動都會出現，很煩。解法是：在資料庫設定檔裡加一行，讓 Payload 不要自動去動資料庫結構：

PAYLOAD_DATABASE_PUSH=false

加了這個設定之後，Payload 就只讀資料、不亂改結構，better-auth 的資料表就安全了。

Claude Code 幫我建了兩個頁面：

• /auth/login — 登入頁，有 Google 一鍵登入按鈕和 Magic Link 表單
• /dashboard — 學員儀表板，顯示你是誰、訂閱狀態、到期日，還有「立即訂閱」的引導

設計風格延續 aicoding.tw 的 Brutalist 黑紅風格——0 圓角、強陰影、終端機語感，不走圓潤可愛路線。

一個重要的邏輯：儀表板頁面是「Server Component」，意思是伺服器端就先確認你有沒有登入。沒登入？直接跳回 /auth/login。不需要在瀏覽器做這件事，更快、更安全。

最後一步：讓每個訪客都能看到登入入口。

我在導覽列右側加了兩個按鈕：

• 「登入」— 黑框，給已有帳號的學員
• 「註冊」— 紅底，給第一次來的訪客

已登入的學員看到的是：頭像縮寫 + 「學員專區」按鈕，點進去就是儀表板。

按鈕用 Client Component 寫，在瀏覽器端判斷登入狀態，所以切換很即時。

全部設定完之後，我跑了一遍完整流程：

1. 開瀏覽器，進 /auth/login，確認頁面正常
2. 點「Google 帳號一鍵登入」，選帳號
3. 成功跳轉到 /dashboard，看到我的名字和訂閱狀態（未訂閱）
4. 確認 students 資料表自動新增了我的帳號記錄
5. 試試 /dashboard（未登入狀態），確認自動跳回 /auth/login

全部 pass。

從想清楚架構到部署上線，一個晚上完成。

如果你也想幫自己的網站裝上登入功能，按照這個流程走：

1. 把這篇文章給 Claude Code 看，說「幫我照這個流程幫我的網站加登入」
2. Claude Code 會問你幾個問題，你把答案告訴它
3. 跟著它給的指示做（主要是 Google Cloud Console 的設定，那部分要人工點）
4. 測試、部署

你不需要看懂每一行程式碼。你需要的是：想清楚你要什麼，然後讓 AI 去做。

這就是 I Dream. AI Works. 的意思。

• better-auth v1 — 處理登入邏輯
• Payload CMS v3 — 存學員資料
• Neon Postgres — 雲端資料庫（免費方案就夠用）
• Google Cloud Console — 申請 OAuth 憑證（免費）
• Vercel — 部署（免費方案就夠用）
• Claude Code — 寫了 99% 的程式碼