我有一个NextJS应用程序,它使用Auth 0进行身份验证。我有两个Auth 0租户,我想将它们用于两个独立的注册和登录功能。我知道我可以在一个租户中创建角色,但只能使用一个,但这不是一个选项。我在[... nextauth].ts文件中添加了两个Auth 0提供程序,如下所示。基本上,我想要的是有两个登录按钮,一个具有Auth 0租户1的Auth 0提供程序,另一个具有Auth 0租户2的Auth 0提供程序。我使用next-auth/react进行登录(“auth 0”),并且我希望能够指定应使用哪个Auth 0提供程序来处理此操作。下面是我拥有的代码:
[...下一次].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)
下面是我的登录按钮代码:
// 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
正如您所看到的,我在[... nextauth].ts文件中实现了两个Auth 0 Providers。这样,当我单击登录按钮时,它总是选择顶部的提供者。我需要一种方法来指定应该使用哪个提供者。
谢谢!
1条答案
按热度按时间cbeh67ev1#
必须为每个提供程序指定唯一的
id
:然后使用要登录的提供程序的ID调用
signIn()
方法: