Supabase 第三方登录（如 GitHub/Google）后跳转至错误 URL（如 http://localhost:3000/#access_token=...），根本原因是前端重定向地址端口（3000）与 Flask 后端实际运行端口（5000）不一致，导致 Supabase 无法正确回调至 /callback 路由。
supabase 第三方登录（如 github/google）后跳转至错误 url（如 `http://localhost:3000/#access_token=...`），根本原因是前端重定向地址端口（3000）与 flask 后端实际运行端口（5000）不一致，导致 supabase 无法正确回调至 `/callback` 路由。
该问题并非代码逻辑错误，而是 Supabase 认证流程中 redirect_to 参数配置与实际服务端口严重脱节 所致。Supabase Auth 的 OAuth 流程要求：用户授权后，认证服务器必须将 code（或 access_token）精确回传至你注册并指定的 redirect_to 地址——该地址必须与你在 Supabase 项目设置中白名单允许的「Authorized redirect URLs」完全匹配，包括协议、域名、端口和路径。
在你的代码中：
redirect_uri = url_for('callback', _external=True)
_external=True 会生成类似 http://localhost:5000/callback 的绝对 URL —— 这是 Flask 应用的真实监听地址。但 Supabase 控制台（Project Settings → Authentication → Providers）中，你很可能只配置了 http://localhost:3000/callback 或 http://localhost:3000 作为允许的重定向地址。当 Supabase 尝试将用户重定向回 https://www.php.cn/link/6eb3b83882d333b0cffebb7c0e0024d3 时，Flask 根本未在此端口监听，于是浏览器直接显示 Google/Supabase 的错误页（如 400 Bad Request 或空白页），而不会触发你的 /callback 视图函数。
✅ 解决方案：三步同步端口与配置
-
统一本地开发端口
建议将 Flask 应用固定运行在http://localhost:3000（与主流前端框架一致），修改启动代码：if __name__ == '__main__': logging.basicConfig(level=logging.INFO) app.run(debug=True, host='localhost', port=3000) # ← 关键：改为 3000 -
更新 Supabase 控制台白名单
登录 Supabase Dashboard → 进入项目 → Settings → Authentication → Providers → 在对应 Provider（如 Google）的 Authorized redirect URLs 中，添加且仅保留：http://localhost:3000/callback
（注意：不要包含尾部
/，且必须与url_for('callback', _external=True)生成的 URL 完全一致） -
验证
redirect_uri构造是否准确
确保url_for('callback', _external=True)真实输出http://localhost:3000/callback。可在/login/<provider></provider>路由中临时打印验证：@app.route('/login/<provider>') def login(provider): redirect_uri = url_for('callback', _external=True) logging.info(f"✅ Generated redirect_uri: {redirect_uri}") # 检查是否为 3000 auth_url = f"{supabase_url}/auth/v1/authorize?provider={provider}&redirect_to={redirect_uri}" return redirect(auth_url)</provider>
⚠️ 重要注意事项
- Supabase 的
redirect_to必须是完整、可访问的绝对 URL，不能是相对路径或localhost不带端口； - 生产环境务必替换为 HTTPS 域名（如
https://yourapp.com/callback），并在 Supabase 白名单中同步配置； -
supabase.auth.exchange_code_for_session(code)是服务端安全交换流程，绝不可在前端 JavaScript 中调用（避免泄露code）； - 若仍报错，请检查浏览器开发者工具 Network 标签页，确认
/callback请求是否真正到达 Flask（Status 200），还是被浏览器拦截或返回 404/500。
完成上述配置后，OAuth 流程将严格遵循：用户点击登录 → 跳转 Supabase 授权页 → 用户授权 → Supabase 302 重定向到https://www.php.cn/link/6eb3b83882d333b0cffebb7c0e0024d3→ Flask 接收 code → 调用exchange_code_for_session→ 创建 session → 跳转/dashboard`。
端口一致性是 Supabase OAuth 集成中最常见也最关键的配置前提——请始终确保“代码生成的 URL”、“Supabase 控制台配置的 URL”与“浏览器实际访问的 URL”三者完全一致。
