He seguido el siguiente tutorial para integrar mi aplicación Next.js con Auth0. Puedo iniciar y cerrar sesión sin problemas, pero cuando trato de mostrar la información del usuario en la página después de iniciar sesión, no se puede devolver el objeto de user . Me he asegurado de que no haya ningún problema con la página Profile.js que representa el objeto de user o el archivo env.local con las claves secretas de mi aplicación.
Después de una inspección adicional, noté que aparece un error en la consola del navegador que dice: Failed to Load Resource ... 404 Not Found: http://localhost:3000/api/auth/me .
Este error me da la sensación de que hay una discrepancia en el mapeo entre mi aplicación next.js y Auth0, ya que modifiqué la ruta base en 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' }, } ¿Hay alguna manera de agregar mi ruta base al punto final desde el que se devuelve el objeto de user ? El resultado final sería algo como: https://localhost:3000/my_path/api/auth/me
No estoy 100 % seguro de que esto solucione mi problema con la devolución correcta del objeto de user , por lo que estoy abierto a cualquier otra sugerencia y dispuesto a agregar más contexto en torno a archivos específicos en mi aplicación.
Editar: después de mencionar este problema en los foros de Auth0 ( enlace ), me señalaron este enlace , que es otro ejemplo de la aplicación de muestra Next.js Auth0, excepto que han escrito su interfaz con TypeScript (con el que no estoy familiarizado). Están manipulando el objeto UserContext y restableciendo ProfileURL, que es lo que busco; Entonces, ¿cuál sería el JavaScript equivalente a esto?
La misma respuesta a la publicación del foro Auth0 que mencioné también incluía otro enlace a una función de ejemplo que crea una URL personalizada para el inicio de sesión. Esto está muy cerca de lo que busco ya que nuevamente, estoy tratando de crear una URL de autenticación personalizada para recuperar el objeto User y deshacerme del error 404 ... /api/auth/me not found . Debido a mi falta de experiencia con JS, mis intentos de intentar crear una función similar al ejemplo mencionado anteriormente han fallado, entonces, ¿cómo se vería esto?
Siento intensas emociones agridulces después de encontrar una solución insultantemente simple para este problema.
Encontrado en el archivo readme.md del repositorio NextJS-Auth0... Este pequeño fragmento de código solucionó todos mis problemas después de horas de buscar una solución:
// _app.js function App({ Component, pageProps }) { return ( <UserProvider loginUrl="/foo/api/auth/login" profileUrl="/foo/api/auth/me"> <Component {...pageProps} /> </UserProvider> ); }Ahora para volver a limpiar las lágrimas de mi escritorio...