I'm using the NextJS App Router as a Backend-for-Frontend (BFF) pattern.For authentication, I'm using the NextJS Auth0 library.My frontend is a separate application written in React.
System Workflow:
The frontend calls /api/auth/login API in the BFF to initiate login.The BFF calls handleLogin() of Auth0 and redirects back to the frontend once authenticated.This process completes successfully, and I am able to log in.Problem:
After logging in, I want to get the user session from the frontend to verify if the user is authenticated. However:
When fetching /api/session from the frontend, getSession() returns a null value.When configuring the headers to address CORS issues, the API is not called and returns a CORS error.Accessing /api/session directly from the browser returns the correct session value.getSession() also returns a value when accessed from a page inside the BFF application.It seems that Auth0 is not accepting API calls from external applications unless the call is made within the same application. However, I couldn't find any documentation supporting this conclusion.
BFF Setup:
/api/auth/[auth0]/route.ts
`import { handleAuth, handleLogin, handleLogout } from '@auth0/nextjs-auth0'export const GET = handleAuth({ login: handleLogin({ returnTo: 'http://localhost:8080' }), logout: handleLogout({ returnTo: process.env.AUTH0_BASE_URL +'/'}),})`/api/session/route.ts
`export const GET = withApiAuthRequired(async () => { const session = await getSession(); return new Response(JSON.stringify(session?.user));})`Frontend Setup:
`import React, { useEffect, useState, type ReactElement } from 'react'export default function Navigation (): ReactElement { const userSession = async () => { const profile = await fetch("http://localhost:3001/api/session", { method: 'GET', headers: {"Content-Type" : "application/json", // "Access-Control-Allow-Credentials" : "true", // If I enable these settings, it returns CORS error // "Access-Control-Allow-Origin" : "http://localhost:8080" }, // mode: 'cors', // credentials: 'include', }).then((response) => response.json()); } return (<div className="w-full h-14 pt-2 pb-14 px-3 border-b border-slate-400 flex flex-col justify-start items-end gap-3.5"><div className="flex justify-start items-start"><div className="w-46 h-12 px-10 py-3 bg-sky-600 rounded-lg flex justify-center items-center gap-1 ml-auto"><a href='http://localhost:3001/api/auth/login'>LOGIN</a> {/* <button onClick={userSession} className="text-center text-white text-base font-medium leading-normal tracking-wide" data-testid="ui-element-login">ログイン</button> */}</div><div className="w-46 h-12 px-10 py-3 bg-sky-600 rounded-lg flex justify-center items-center gap-1 ml-auto"><button onClick={userSession} className="text-center text-white text-base font-medium leading-normal tracking-wide" data-testid="ui-element-login">Get comment</button></div><div className="w-46 h-12 px-10 py-3 bg-sky-600 rounded-lg flex justify-center items-center gap-1 ml-auto"><a href='http://localhost:3001/api/auth/logout'>LOGOUT</a> {/* <button onClick={handleLogin} className="text-center text-white text-base font-medium leading-normal tracking-wide" data-testid="ui-element-login">ログイン</button> */}</div></div></div> )}`This setup returns Unauthorized error{error: 'not_authenticated', description: 'The user does not have an active session or is not authenticated'}
And when I enabled the request headers, CORS error is displayed.localhost/:1 Access to fetch at 'http://localhost:3001/api/protected' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'.
Is this approach feasible? How can I fetch the session data from an external app with Auth0? Does anyone have any idea or experience in making this work?