Supabase OAuth 踩坑：Google 登入後跳回 localhost，部署環境的 Redirect URL 設定

症狀

專案在本地開發時 Google OAuth 登入一切正常，部署到正式環境後，點擊「Google 登入」→ Google 驗證成功 → 卻被導回 http://localhost:3000，而不是部署後的正式網址。

瀏覽器網址列出現類似：

http://localhost:3000/#access_token=eyJhbGciOi...&expires_at=...&refresh_token=...&token_type=bearer
Code language: JavaScript (javascript)

Token 有拿到，但整個頁面跳到了 localhost，使用者直接看到空白頁或錯誤。

原因分析

要理解這個問題，先釐清 Supabase Google OAuth 的完整流程：

使用者點擊「Google 登入」
    ↓
前端呼叫 supabase.auth.signInWithOAuth()
    ↓ 帶上 redirectTo 參數
Supabase Auth Server 轉導到 Google
    ↓
Google 驗證完成
    ↓ 回到 Supabase
Supabase 把使用者導回 → Site URL ← 問題在這！
Code language: CSS (css)

關鍵在最後一步：Supabase 不是直接用你前端傳的 redirectTo 來決定最終跳轉位置。Supabase 會檢查 Dashboard 中設定的 Site URL 和 Redirect URLs 白名單。

如果你的 Site URL 還停留在開發時設的 http://localhost:3000，即使部署到了正式環境，Supabase 還是會把使用者送回 localhost。

解決方法

步驟一：修改 Site URL

1. 登入 Supabase Dashboard
2. 選擇你的專案
3. 左側選單 → Authentication → URL Configuration
4. 將 Site URL 改為你的正式部署網址，例如：

步驟二：設定 Redirect URLs 白名單

在同一個頁面的 Redirect URLs 區塊，新增所有需要的回調位址：

正式環境（必要）：

https://your-app.your-domain.com/auth/callback
Code language: JavaScript (javascript)

本地開發（建議保留）：

http://localhost:5173/auth/callback
http://localhost:3000/auth/callback
Code language: JavaScript (javascript)

點擊 Save 儲存。

步驟三：確認前端程式碼

確保你的 OAuth 呼叫有動態設定 redirectTo：

const { error } = await supabase.auth.signInWithOAuth({
  provider: 'google',
  options: {
    redirectTo: `${window.location.origin}/auth/callback`
  }
})
Code language: JavaScript (javascript)

使用 window.location.origin 可以讓前端自動適應不同環境，不需要硬寫網址。

步驟四：驗證

1. 開啟部署後的正式網址
2. 點擊 Google 登入
3. 確認登入後跳轉回正式網址，而非 localhost

常見疑問

Q: 為什麼本地開發沒問題？

因為本地開發時，window.location.origin 就是 http://localhost:5173，而你的 Site URL 通常也設成 localhost，所以剛好對得上。部署後 origin 變了，但 Site URL 沒跟著改，就會出問題。

Q: Site URL 和 Redirect URLs 差在哪？

• Site URL：Supabase 的「預設」跳轉目標，當找不到合適的 redirect URL 時會用這個
• Redirect URLs：白名單，列出所有「允許」被跳轉的網址。前端傳的 redirectTo 必須在這個清單中才會被採用

Q: 改了 Site URL 要重新部署嗎？

不用。Site URL 和 Redirect URLs 是 Supabase 伺服器端的設定，改完即時生效，前端程式碼不需要任何變動。

重點整理

部署後 OAuth 跳錯地方，十之八九是 Supabase Dashboard 的 Site URL 還指向 localhost。程式碼沒錯，改設定就好。