We have a React application that’s currently using
@auth0/auth0-react in the static site approach. The auth callback is path is
/auth, rendered purely client-side by
We want to migrate to handling the authentication callbacks server-side using
@auth0/nextjs-auth0. It’s easy for me to add a new
pages/api/auth/[...auth0].tsx per the serverless approach.
The thing I’m struggling with is doing the transition with no downtime.
- add the API route
- users continue to return to
@auth0/auth0-reacthandles the login
- change the callback URL to
- users now return to
@auth0/nextjs-auth0handles the login, then redirects to the return-to URL.
The problem with this is that I would need both providers in the layout and I can’t figure out how to get them to agree on the definition of the session.
Option 2: use @auth0/nextjs-auth0 with old URL
pages/auth.tsxto define a
getServerSidePropsthat calls a handler from
@auth0/nextjs-auth0then passes the return-to URL to the page via server-side props
pages/auth.tsxto export a component that simply redirects to the return-to URL
The problem with this is that the handlers that
@auth0/nextjs-auth0 exports don’t seem to be compatible with NextJS Pages, only with API routes (or the newer App routes).