Auth0 端點“api/auth/me”在 Next.js 應用程序中返回 404 錯誤

Question

我已經完成了以下教程，讓我的 Next.js 應用程序與 Auth0 集成。 我可以正常登錄和注銷，但是在登錄后嘗試在頁面上顯示用戶信息時，無法返回user object 。 我已確保使用我的應用程序的密鑰呈現user object 或 env.local 文件的 Profile.js 頁面沒有任何問題。

進一步檢查后，我注意到我在瀏覽器控制台中收到一條錯誤消息： Failed to Load Resource... 404 Not Found: http://localhost:3000/api/auth/me 。

這個錯誤讓我有一種直覺，我的 next.js 應用程序和 Auth0 之間的映射存在差異，因為我修改了 next.config.js 中的基本路徑：

module.exports = {
  basePath: '/my_path',

  webpack: (config) => {
    return config
  },

  env: {
  },

  publicRuntimeConfig: {
    BACKEND_API_URL: process.env.BACKEND_API_URL,
    CONSENT_COOKIE_NAME: 'ConsentCookie'
  },
}

有沒有辦法將我的基本路徑添加到user object 從中返回的端點？ 最終結果類似於： https://localhost:3000/my_path/api/auth/me

我不是 100% 確定這會解決我的問題，讓user object 正確返回，所以我願意接受任何其他建議，並願意在我的應用程序中添加更多關於特定文件的上下文。

---

編輯：在 Auth0 論壇（ 鏈接）上提出這個問題后，我被指向了這個鏈接，這是另一個例子 Next.js Auth0 示例應用程序，除了他們用 TypeScript（我不熟悉）編寫了他們的前端。 他們正在操縱UserContext object 並重置 ProfileURL，這就是我所追求的； 那么 JavaScript 相當於什么？

我提到的對 Auth0 論壇帖子的相同回復還包括另一個指向示例 function 的鏈接，該示例為登錄創建自定義 URL。 這與我再次追求的非常接近，我正在嘗試創建自定義身份驗證 URL 以檢索User object 並消除404... /api/auth/me not found錯誤。 由於我對 JS 缺乏經驗，我試圖創建一個類似於前面所述示例的 function 的嘗試失敗了，那么這會是什么樣子呢？

Answer 1

在找到解決此問題的極其簡單的解決方案后，我感到苦樂參半。

在NextJS -Auth0 存儲庫的 readme.md 中找到...經過數小時搜索解決方案后，這段小代碼修復了我所有的問題 -

// _app.js
function App({ Component, pageProps }) {
  return (
    <UserProvider loginUrl="/foo/api/auth/login" profileUrl="/foo/api/auth/me">
      <Component {...pageProps} />
    </UserProvider>
  );
}

現在回去擦掉我桌子上的眼淚..

Answer 2

我也一直有這個問題。 我在 Vercel 上部署的 Next 應用程序發生的情況是，所有api/auth/*路由都無法在生產環境中運行，但一切都在本地運行。

我正在使用 Auth0 通用登錄體驗

// package.json
...
"dependencies": {
    "@auth0/nextjs-auth0": "^1.9.2",
}
...

我之前只有 function

// api/auth/[...auth0].ts
import { handleAuth } from "@auth0/nextjs-auth0";

export default handleAuth();

所以我所做的是在我的應用程序各自的文件中創建我需要的所有路徑。 我認為 Next.js 沒有在[...auth0].ts創建動態文件

// api/auth/callback.ts
import { handleCallback } from "@auth0/nextjs-auth0";
import { NextApiRequest, NextApiResponse } from "next";

const callbackHandler = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    await handleCallback(req, res);
  } catch (error) {
    res.status(error.status || 400).end(error.message);
  }
};

export default callbackHandler;

// api/auth/login.ts
import { handleLogin } from "@auth0/nextjs-auth0";
import { NextApiRequest, NextApiResponse } from "next";

const loginHandler = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    await handleLogin(req, res, {
      authorizationParams: {
        screen_hint: "login",
      },
    });
  } catch (error) {
    res.status(error.status || 400).end(error.message);
  }
};

export default loginHandler;

// api/auth/logout.ts
import { handleLogout } from "@auth0/nextjs-auth0";
import { NextApiRequest, NextApiResponse } from "next";

const logoutHandler = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    await handleLogout(req, res);
  } catch (error) {
    res.status(error.status || 400).end(error.message);
  }
};

export default logoutHandler;

// api/auth/me.ts
// not api/auth/profile.ts

import { handleProfile } from "@auth0/nextjs-auth0";
import { NextApiRequest, NextApiResponse } from "next";

const profileHandler = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    await handleProfile(req, res);
  } catch (error) {
    res.status(error.status || 400).end(error.message);
  }
};

export default profileHandler;

// api/auth/signup.ts

import { handleLogin } from "@auth0/nextjs-auth0";
import { NextApiRequest, NextApiResponse } from "next";

const signupHandler = async (req: NextApiRequest, res: NextApiResponse) => {
  try {
    await handleLogin(req, res, {
      authorizationParams: {
        screen_hint: "signup",
      },
    });
  } catch (error) {
    res.status(error.status || 400).end(error.message);
  }
};

export default signupHandler;