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

本關目標

不會寫程式也沒關係。這篇文章完整記錄了我幫 aicoding.tw 從零裝上 Google 登入、Magic Link、學員儀表板的全過程——用 Claude Code 代工，我只負責想清楚要什麼。

需要裝備

AI TOOLKIT

掉落獎勵

下一個清楚動作

CHECKPOINT 01SAVE POINT // 1 OF 27

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

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

CHECKPOINT 02SAVE POINT // 2 OF 27

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

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

CHECKPOINT 03SAVE POINT // 3 OF 27

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

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

CHECKPOINT 04SAVE POINT // 4 OF 27

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

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

CHECKPOINT 05SAVE POINT // 5 OF 27

你只需要在終端機輸入：

npm install better-auth

CHECKPOINT 06SAVE POINT // 6 OF 27

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

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

CHECKPOINT 07SAVE POINT // 7 OF 27

每一筆學員記錄長這樣：

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

CHECKPOINT 08SAVE POINT // 8 OF 27

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

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

CHECKPOINT 09SAVE POINT // 9 OF 27

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

npx @better-auth/cli generate -y

CHECKPOINT 10SAVE POINT // 10 OF 27

npx @better-auth/cli migrate -y

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

CHECKPOINT 11SAVE POINT // 11 OF 27

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

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

CHECKPOINT 12SAVE POINT // 12 OF 27

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

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

CHECKPOINT 13SAVE POINT // 13 OF 27

GOOGLE_CLIENT_ID="你的 Client ID"

GOOGLE_CLIENT_SECRET="你的 Client Secret"

CHECKPOINT 14SAVE POINT // 14 OF 27

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

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

CHECKPOINT 15SAVE POINT // 15 OF 27

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

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

CHECKPOINT 16SAVE POINT // 16 OF 27

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

You're about to delete user table with 1 items

CHECKPOINT 17SAVE POINT // 17 OF 27

You're about to delete session table with 1 items

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

CHECKPOINT 18SAVE POINT // 18 OF 27

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

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

CHECKPOINT 19SAVE POINT // 19 OF 27

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

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

CHECKPOINT 20SAVE POINT // 20 OF 27

PAYLOAD_DATABASE_PUSH=false

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

CHECKPOINT 21SAVE POINT // 21 OF 27

Claude Code 幫我建了兩個頁面：

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

CHECKPOINT 22SAVE POINT // 22 OF 27

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

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

CHECKPOINT 23SAVE POINT // 23 OF 27

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

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

CHECKPOINT 24SAVE POINT // 24 OF 27

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

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

CHECKPOINT 25SAVE POINT // 25 OF 27

全部 pass。

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

CHECKPOINT 26SAVE POINT // 26 OF 27

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

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

CHECKPOINT 27SAVE POINT // 27 OF 27

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

CLEAR CHECKLIST

通關前，先完成這 3 件小事

抓出這篇的核心觀念

選一個今天能做的小動作

把結果存成你的 build 記錄