如何跳过Next.js Auth0身份验证的提供商选择步骤？

完全可行，以下是两种直接实现的方法：

方法一：客户端页面自动触发跳转 #

创建自定义登录页，页面加载后直接调用Next-Auth的signIn方法指定Auth0提供商，自动完成跳转：

'use client'

import { signIn } from 'next-auth/react'
import { useEffect } from 'react'

export default function LoginPage() {
  useEffect(() => {
    const redirectToAuth0 = async () => {
      // 替换callbackUrl为你的登录后跳转地址
      await signIn('auth0', { callbackUrl: '/' })
    }
    redirectToAuth0()
  }, [])

  return <div>正在跳转到登录页面...</div>
}

接着修改Next-Auth配置，将默认登录页指向这个自定义页面：

// app/api/auth/[...nextauth]/route.js
import NextAuth from 'next-auth'
import Auth0Provider from 'next-auth/providers/auth0'

export const authOptions = {
  providers: [
    Auth0Provider({
      clientId: process.env.AUTH0_CLIENT_ID,
      clientSecret: process.env.AUTH0_CLIENT_SECRET,
      issuer: process.env.AUTH0_ISSUER_BASE_URL,
    }),
  ],
  pages: {
    signIn: '/login', // 指向自定义登录页
  },
}

const handler = NextAuth(authOptions)
export { handler as GET, handler as POST }

之后用户访问/api/auth/signin时，会先跳转到自定义登录页，再自动转向Auth0登录界面。

方法二：服务器端路由直接重定向 #

创建专属API路由，在服务器端生成Auth0授权URL并直接重定向：

// app/api/auth/redirect-to-auth0/route.js
import { signIn } from 'next-auth/react'

export async function GET(request) {
  // 生成Auth0登录URL（不跳转，仅获取地址）
  const authUrl = await signIn('auth0', { callbackUrl: '/', redirect: false })
  
  if (authUrl.url) {
    return Response.redirect(authUrl.url)
  }
  
  return new Response('Auth0提供商配置错误', { status: 400 })
}

用户访问/api/auth/redirect-to-auth0即可直接进入Auth0登录流程，无需经过选择页。

关键说明 #

直接拼接Auth0的URL会失败，因为Next-Auth需要自动生成并验证state等安全参数，必须通过signIn方法来处理这些逻辑，才能保证登录流程的安全性和正确性。

内容的提问来源于stack exchange，提问作者Illegal Operator