Add organization ID dynamically to next.js login route

Problem statement

I’ve been prototyping some work with organizations. I am able to use the Universal Login to prompt the user to enter the name of their organization. Once they do that, I can see that Auth0 correctly presents the IdP’s for the selected organization. This is close to what we want to be able to do.

However, it is falling short in that I am unable to switch organizations for different users. The auth0 instance seems to get bound to a single organization.
Can you recommend a way to more dynamically connect an organization to an Auth0 instance to handle a login?

I want to then be able to use a different organization for a subsequent login.

Symptoms

  • Able to login correctly into one organization
  • Issue occurs when attempting to switch and log into another Organization context

Cause

  • This use case is not handled out of the box by our Next.js SDK and requires user intervention to get this working

Solution

You can pass the Organization ID dynamically to the organization authorization parameter like the following:

export default handleAuth({
 login(req, res) {
    await handleLogin(req, res, {
      authorizationParams: {
        organization: String(req.query.organization)
      }
    });
  }
});

Loading /api/auth/login?organization=org_iusydfiuys will start the Universal Login flow using the indicated organization.

Reference: https://github.com/auth0/nextjs-auth0/blob/main/src/handlers/auth.ts