Migrate from @auth0/auth0-react to @auth0/nextjs-auth0

Help
,
1

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 pages/auth.tsx.

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.

Option 1: Keep both libraries during the migration

  1. add the API route pages/api/auth/[...auth0].tsx
  2. users continue to return to /auth and the Auth0Provider from @auth0/auth0-react handles the login
  3. change the callback URL to /api/auth/...
  4. users now return to /api/auth/login and the Auth0Provider from @auth0/nextjs-auth0 handles 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

  1. change pages/auth.tsx to define a getServerSideProps that calls a handler from @auth0/nextjs-auth0 then passes the return-to URL to the page via server-side props
  2. change pages/auth.tsx to 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).