如何为NextAuth/react指定对应Auth0租户实现双登录功能

要实现两个登录按钮分别对应不同Auth0租户，核心是给每个Auth0Provider设置唯一标识id，这样调用signIn时就能精准指定具体用哪个Provider。

步骤1：修改[...nextauth].ts配置 #

给两个Auth0Provider分别添加自定义id字段，用来区分不同租户：

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

export const authOptions: NextAuthOptions = {
  secret: process.env.AUTH0_SECRET,
  pages: {
    signIn: '/login'
  },
  providers: [
    Auth0Provider({
      // 给第一个租户设置唯一id
      id: "auth0-tenant1",
      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
      id: "auth0-tenant2",
      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
        // 可选：把providerId存入token，后续可区分用户来自哪个租户
        token.providerId = account.providerId
      }
      return token
    },
    session({ session, token }) {
      return { ...session, ...token }
    }
  }
}
export default NextAuth(authOptions)

步骤2：修改登录按钮组件 #

创建两个登录按钮，分别调用signIn时传入对应的provider id：

// 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={2}
      direction="column"
      alignItems="center"
      justifyContent="center"
      className="h-screen">
      {/* 对应租户1的登录按钮 */}
      <Button
        className="h-20 w-72 rounded-full bg-arealizeGreenDark text-arealizeBeigeLight hover:bg-arealizeGreenLight"
        onClick={() => {
          void signIn('auth0-tenant1')
        }}>
        <Typography>{t.general.login_btn_tenant1}</Typography>
        <LockIcon className="ml-2" />
      </Button>
      {/* 对应租户2的登录按钮 */}
      <Button
        className="h-20 w-72 rounded-full bg-arealizeBlueDark text-arealizeBeigeLight hover:bg-arealizeBlueLight"
        onClick={() => {
          void signIn('auth0-tenant2')
        }}>
        <Typography>{t.general.login_btn_tenant2}</Typography>
        <LockIcon className="ml-2" />
      </Button>
    </Grid>
  )
}

export default LoginBtn

原理说明 #

默认情况下，多个同类型的Provider（比如两个Auth0Provider）会共享同一个默认id（这里是"auth0"），所以调用signIn("auth0")时NextAuth会自动选择第一个匹配的Provider。通过给每个Provider设置唯一id，就能精准指定要使用的租户登录入口。

内容的提问来源于stack exchange，提问作者Sebastian Sole