How to leverage SSO in nextjs-auth0?

  • Which SDK this is regarding: nextjs-auth0
  • SDK Version: 1.5.0
  • Platform Version: NodeJS

Hi,

I’m a paying customer (on my startup account) and I am looking to migrate our create-react-app using the React Auth0 Library to NextJS using nextjs-auth0 library instead.

We have multiple apps using SSO, (where signing on/off one SPA would affect the user’s sessions in the other apps we have). But… I can’t seem to get SSO easily set up and connected with the NextJS migration we’re planning to have.

The goal is that if I’m signed in another SPA (for example), then the user proceeding to my NextJS website should already be automatically authenticated with a session cookie. This is assuming the user goes directly to the landing home page (base “/”) which is SSG.

My solution (although seems wonky) to work around this, is doing the following using Vercel + NextJS:

/pages/api/silent-auth.js (serverless function)

import {
  handleLogin,
} from '@auth0/nextjs-auth0';

export default async function silentAuth(req, res) {
  try {
    await handleLogin(req, res, {
      authorizationParams: {
        prompt: 'none',
      },
    });
  } catch (error) {
    console.error(error);
    res.status(error.status || 500).end(error.message);
  }
}

and then in one of my top level components such as my Header component:

  const {
    user, isLoading, checkSession,
  } = useUser();

  useEffect(() => {
    (async () => {
      if (!user && !isLoading) {
        await fetch('/api/silent-auth', { mode: 'no-cors' });
        checkSession();
      }
    })();
  }, [user, isLoading]);

Is this the ideal way to get this done? Is there any other way?

Another idea is updating that SDK call to ‘/me’ endpoint to attempt performing silent authentication beforehand?