在nextjs中自定义Google auth操作域

Question

我已经完成了我的域的验证过程并在配置中更新了我的 authdomain。只是现在，当我尝试使用 google 登录时，url 会返回 404，因为我的 nextjs 应用程序应该处理未知页面的 404。 这是它在弹出窗口中重定向到的 URL，mydomain.com/__/auth/handler?apiKey=AIz****。我如何在 NextJs 中适应这一点

Answer 1

我有类似的问题，这是我的解决方案。在我的

next.config.mjs

中，我添加了以下内容：

rewrites: function () {
    return [
      {
        source: "/__/auth/:path*",
        destination: `<MY_ORIGINAL_FIREBASE_PROJECT_AUTH_DOMAIN>/__/auth/:path*`,
      },
    ];
  },

根据我的理解，将

/__/auth/handler

添加到域的末尾仅适用于 firebase 本身托管的项目。对于其他项目（在我的示例中，我在 vercel 上托管），这只是被视为下一步将在 app/ 或 Pages/ 目录中查找的一些路由，因此是 404。

next.config.mjs

中的重写告诉 next 代理对

<my-domain>/__/auth/*

的请求改为前往

<my_original_firebase_auth_domain>/__/auth/*

。

原始的 firebase 身份验证域，我的意思是看起来像 firebase-app-name-123.firebaseapp.com 的那个域

执行此操作之前，请确保执行文档中的步骤 3 和 4，以便弹出窗口仍显示您的自定义域。