Я прошел через следующий руководство, чтобы интегрировать мое приложение Next.js с Auth0.
Я могу войти и выйти из системы нормально, но при попытке отобразить информацию о пользователе на странице после входа в систему, объект user
не может быть возвращен. Я убедился, что на странице Profile.js, отображающей объект user
или файл env.local с секретными ключами моего приложения, все в порядке.
После дальнейшего осмотра я заметил, что получаю сообщение об ошибке в консоли браузера: 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
? Конечный результат будет выглядеть примерно так: https://localhost:3000/my_path/api/auth/me
Я не уверен на 100%, что это решит мою проблему с правильным возвратом объекта user
, поэтому я открыт для любых других предложений и готов добавить больше контекста, окружающего определенные файлы в моем приложении.
Редактировать:
После поднятия этой проблемы на форумах Auth0 (связь) мне указали на это связь, которое является еще одним примером примера приложения Next.js Auth0, за исключением того, что они написали свой интерфейс на TypeScript (с которым я не знаком). Они манипулируют объектом UserContext
и сбрасывают ProfileURL, что мне и нужно; так что же будет эквивалентно этому в JavaScript?
Тот же самый ответ на сообщение на форуме Auth0, о котором я упоминал, также включал еще один связь в пример функции, которая создает собственный URL-адрес для входа в систему. Это очень близко к тому, что мне нужно, так как снова я пытаюсь создать собственный URL-адрес авторизации, чтобы получить объект User
и избавиться от ошибки 404 ... /api/auth/me not found
.
Из-за моей неопытности в JS мои попытки создать функцию, аналогичную приведенному выше примеру, не увенчались успехом, так как же это будет выглядеть?
Я испытываю сильные горько-сладкие эмоции после того, как нашел оскорбительно простое решение этой проблемы.
Найдено в readme.md репозитория NextJS-Auth0... Этот небольшой фрагмент кода исправил все мои проблемы после нескольких часов поиска решения -
// _app.js
function App({ Component, pageProps }) {
return (
<UserProvider loginUrl = "/foo/api/auth/login" profileUrl = "/foo/api/auth/me">
<Component {...pageProps} />
</UserProvider>
);
}
А теперь вернемся к вытиранию слез с моего стола..