使用Auth0指定next-auth/react的提供程序。

huangapple go评论97阅读模式
英文:

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:

  1. import NextAuth, { type NextAuthOptions } from 'next-auth'
  2. import Auth0Provider from 'next-auth/providers/auth0';
  3. export const authOptions: NextAuthOptions = {
  4. // Configure one or more authentication providers
  5. secret: process.env.AUTH0_SECRET,
  6. pages: {
  7. signIn: '/login'
  8. },
  9. providers: [
  10. Auth0Provider({
  11. clientId: process.env.AUTH0_CLIENT_ID as string,
  12. clientSecret: process.env.AUTH0_CLIENT_SECRET as string,
  13. idToken: true,
  14. issuer: process.env.AUTH0_ISSUER_BASE_URL
  15. }),
  16. Auth0Provider({
  17. clientId: process.env.AUTH0_TENANT_CLIENT_ID as string,
  18. clientSecret: process.env.AUTH0_TENANT_CLIENT_SECRET as string,
  19. idToken: true,
  20. issuer: process.env.AUTH0_TENANT_ISSUER_BASE_URL
  21. })
  22. ],
  23. callbacks: {
  24. signIn({ profile }) {
  25. return !!profile
  26. },
  27. redirect({ url, baseUrl }) {
  28. return url startsWith baseUrl ? `${baseUrl}/` : baseUrl
  29. },
  30. jwt({ token, account }) {
  31. if (account) {
  32. token.accessToken = account.access_token
  33. }
  34. return token
  35. },
  36. session({ session, token }) {
  37. return { ...session, ...token }
  38. }
  39. }
  40. }
  41. export default NextAuth(authOptions)

Here is my code for my login button:

  1. // material-ui
  2. import { Button, Grid, Typography } from '@mui/material';
  3. // assets
  4. import LockIcon from '@mui/icons-material/Lock';
  5. // func
  6. import { useLanguage } from '@/hooks/i18n/useLanguage';
  7. import { signIn } from 'next-auth/react';
  8. const LoginBtn = () => {
  9. const { t } = useLanguage();
  10. return (
  11. <Grid
  12. container
  13. spacing={0}
  14. direction="column"
  15. alignItems="center"
  16. justifyContent="center"
  17. className="h-screen"
  18. >
  19. <Button
  20. className="h-20 w-72 rounded-full bg-arealizeGreenDark text-arealizeBeigeLight hover:bg-arealizeGreenLight"
  21. onClick={() => {
  22. void signIn('auth0');
  23. }}
  24. >
  25. <Typography>{t.general.login_btn}</Typography>
  26. <LockIcon className="ml-2" />
  27. </Button>
  28. </Grid>
  29. );
  30. }
  31. 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!

英文:

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:

  1. import NextAuth, { type NextAuthOptions } from &#39;next-auth&#39;
  2. import Auth0Provider from &#39;next-auth/providers/auth0&#39;
  3. export const authOptions: NextAuthOptions = {
  4. // Configure one or more authentication providers
  5. secret: process.env.AUTH0_SECRET,
  6. pages: {
  7. signIn: &#39;/login&#39;
  8. },
  9. providers: [
  10. Auth0Provider({
  11. clientId: process.env.AUTH0_CLIENT_ID as string,
  12. clientSecret: process.env.AUTH0_CLIENT_SECRET as string,
  13. idToken: true,
  14. issuer: process.env.AUTH0_ISSUER_BASE_URL
  15. }),
  16. Auth0Provider({
  17. clientId: process.env.AUTH0_TENANT_CLIENT_ID as string,
  18. clientSecret: process.env.AUTH0_TENANT_CLIENT_SECRET as string,
  19. idToken: true,
  20. issuer: process.env.AUTH0_TENANT_ISSUER_BASE_URL
  21. })
  22. ],
  23. callbacks: {
  24. signIn({ profile }) {
  25. return !!profile
  26. },
  27. redirect({ url, baseUrl }) {
  28. return url.startsWith(baseUrl) ? `${baseUrl}/` : baseUrl
  29. },
  30. jwt({ token, account }) {
  31. if (account) {
  32. token.accessToken = account.access_token
  33. }
  34. return token
  35. },
  36. session({ session, token }) {
  37. return { ...session, ...token }
  38. }
  39. }
  40. }
  41. export default NextAuth(authOptions)

Here is my code for my login button:

  1. // material-ui
  2. import { Button, Grid, Typography } from &#39;@mui/material&#39;
  3. // assets
  4. import LockIcon from &#39;@mui/icons-material/Lock&#39;
  5. // func
  6. import { useLanguage } from &#39;@/hooks/i18n/useLanguage&#39;
  7. import { signIn } from &#39;next-auth/react&#39;
  8. const LoginBtn = () =&gt; {
  9. const { t } = useLanguage()
  10. return (
  11. &lt;Grid
  12. container
  13. spacing={0}
  14. direction=&quot;column&quot;
  15. alignItems=&quot;center&quot;
  16. justifyContent=&quot;center&quot;
  17. className=&quot;h-screen&quot;&gt;
  18. &lt;Button
  19. className=&quot;h-20 w-72 rounded-full bg-arealizeGreenDark text-arealizeBeigeLight hover:bg-arealizeGreenLight&quot;
  20. onClick={() =&gt; {
  21. void signIn(&#39;auth0&#39;)
  22. }}&gt;
  23. &lt;Typography&gt;{t.general.login_btn}&lt;/Typography&gt;
  24. &lt;LockIcon className=&quot;ml-2&quot; /&gt;
  25. &lt;/Button&gt;
  26. &lt;/Grid&gt;
  27. )
  28. }
  29. 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!

答案1

得分: 1

您必须为每个提供程序指定唯一的id

  1. [
  2. Auth0Provider({
  3. id: "first", // <-- 添加此行
  4. clientId: process.env.AUTH0_CLIENT_ID as string,
  5. clientSecret: process.env.AUTH0_CLIENT_SECRET as string,
  6. idToken: true,
  7. issuer: process.env.AUTH0_ISSUER_BASE_URL,
  8. }),
  9. Auth0Provider({
  10. id: "second", // <-- 添加此行
  11. clientId: process.env.AUTH0_TENANT_CLIENT_ID as string,
  12. clientSecret: process.env.AUTH0_TENANT_CLIENT_SECRET as string,
  13. idToken: true,
  14. issuer: process.env.AUTH0_TENANT_ISSUER_BASE_URL,
  15. }),
  16. ];

然后使用提供程序的id调用signIn()方法以进行登录:

  1. signIn('first')
  2. //或
  3. signIn('second')
英文:

You have to specify an unique id for each provider:

  1. [
  2. Auth0Provider({
  3. id:&quot;first&quot;, // &lt;-- add this line
  4. clientId: process.env.AUTH0_CLIENT_ID as string,
  5. clientSecret: process.env.AUTH0_CLIENT_SECRET as string,
  6. idToken: true,
  7. issuer: process.env.AUTH0_ISSUER_BASE_URL,
  8. }),
  9. Auth0Provider({
  10. id:&quot;second&quot;, // &lt;-- add this line
  11. clientId: process.env.AUTH0_TENANT_CLIENT_ID as string,
  12. clientSecret: process.env.AUTH0_TENANT_CLIENT_SECRET as string,
  13. idToken: true,
  14. issuer: process.env.AUTH0_TENANT_ISSUER_BASE_URL,
  15. }),
  16. ];

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

  1. signIn(&#39;first&#39;)
  2. //or
  3. signIn(&#39;second&#39;)

huangapple
  • 本文由 发表于 2023年3月9日 22:36:11
  • 转载请务必保留本文链接:https://go.coder-hub.com/75686024.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定