Specify provider for next-auth/react using Auth0

I have a NextJS application which uses Auth0 for authentication. I have two Auth0 tenants which I want to use for two separate register and login functionalities. I understand I can create Roles in one and only work with one, but this is not an option. I have added two Auth0 providers in my [...nextauth].ts file as shown below. Basically, what I want is to have two login buttons, one which has an Auth0 provider for Auth0 tenant 1, and one which has an Auth0 provider for Auth0 tenant 2. I am using next-auth/react for signIn("auth0"), and I want to be able to specify which Auth0 provider should be used to handle this. Here is the code I have:

[...nextauth].ts:

import NextAuth, { type NextAuthOptions } from 'next-auth'
import Auth0Provider from 'next-auth/providers/auth0'

export const authOptions: NextAuthOptions = {
  // Configure one or more authentication providers
  secret: process.env.AUTH0_SECRET,
  pages: {
    signIn: '/login'
  },
  providers: [
    Auth0Provider({
      clientId: process.env.AUTH0_CLIENT_ID as string,
      clientSecret: process.env.AUTH0_CLIENT_SECRET as string,
      idToken: true,
      issuer: process.env.AUTH0_ISSUER_BASE_URL
    }),
    Auth0Provider({
      clientId: process.env.AUTH0_TENANT_CLIENT_ID as string,
      clientSecret: process.env.AUTH0_TENANT_CLIENT_SECRET as string,
      idToken: true,
      issuer: process.env.AUTH0_TENANT_ISSUER_BASE_URL
    })
  ],
  callbacks: {
    signIn({ profile }) {
      return !!profile
    },
    redirect({ url, baseUrl }) {
      return url.startsWith(baseUrl) ? `${baseUrl}/` : baseUrl
    },
    jwt({ token, account }) {
      if (account) {
        token.accessToken = account.access_token
      }
      return token
    },
    session({ session, token }) {
      return { ...session, ...token }
    }
  }
}
export default NextAuth(authOptions)

Here is my code for my login button:

// material-ui
import { Button, Grid, Typography } from '@mui/material'

// assets
import LockIcon from '@mui/icons-material/Lock'

// func
import { useLanguage } from '@/hooks/i18n/useLanguage'
import { signIn } from 'next-auth/react'

const LoginBtn = () => {
  const { t } = useLanguage()

  return (
    <Grid
      container
      spacing={0}
      direction="column"
      alignItems="center"
      justifyContent="center"
      className="h-screen">
      <Button
        className="h-20 w-72 rounded-full bg-arealizeGreenDark text-arealizeBeigeLight hover:bg-arealizeGreenLight"
        onClick={() => {
          void signIn('auth0')
        }}>
        <Typography>{t.general.login_btn}</Typography>
        <LockIcon className="ml-2" />
      </Button>
    </Grid>
  )
}

export default LoginBtn

As you can see, I have two Auth0Providers implemented in the [...nextauth].ts file. With this, when I click the signin button, it always chooses the top provider. I want a way to specify which provider should be used.

Thanks!

You have to specify an unique id for each provider:

[
  Auth0Provider({
    id:"first", // <-- add this line
    clientId: process.env.AUTH0_CLIENT_ID as string,
    clientSecret: process.env.AUTH0_CLIENT_SECRET as string,
    idToken: true,
    issuer: process.env.AUTH0_ISSUER_BASE_URL,
  }),
  Auth0Provider({
    id:"second", // <-- add this line
    clientId: process.env.AUTH0_TENANT_CLIENT_ID as string,
    clientSecret: process.env.AUTH0_TENANT_CLIENT_SECRET as string,
    idToken: true,
    issuer: process.env.AUTH0_TENANT_ISSUER_BASE_URL,
  }),
];

Then call the signIn() method with the id of the provider you want to sign in with :

signIn('first')
//or
signIn('second')