NextAuth.js中跳过登录选择页直接跳转至OAuth登录页

一、跳过登录选择页，直接跳转至OIDC授权页 #

你只需要修改跳转的目标路径，在/api/auth/signin后拼接你的OIDC provider的ID（也就是你配置里的id: "admin-spa"），就能绕过登录选择页，直接触发对应provider的授权流程。

修改后的RootLayout代码：

export default async function RootLayout({ children }) {
  const session = await auth();
  if (!session) redirect('/api/auth/signin/admin-spa');
  
  return (
    <html lang="en">
      <body>
        {/* layout content */}
      </body>
    </html>
  );
}

原理：Auth.js的/api/auth/signin/[provider]路由会直接触发对应provider的认证流程，跳过默认的选择界面。

二、访问根URL时检查登录状态的最佳方案 #

有两种主流方案，可根据需求选择：

方案1：RootLayout中直接检查（Server Component方式） #

就是你当前使用的方法，在根布局（Server Component）中调用auth()获取会话，未登录则跳转。这种方式简单直接，适合需要在布局中渲染用户相关信息（比如导航栏用户名）的场景。

注意：确保RootLayout是Server Component（不要加'use client'指令），因为auth()仅能在服务器端执行。

方案2：使用Middleware做全局拦截（更高效） #

如果需要对整个应用的所有路由做登录保护，推荐用Next.js的Middleware，检查逻辑会在请求到达页面/布局之前执行，更高效且无需重复写检查代码。

创建middleware.ts文件：

import { withAuth } from "next-auth/middleware"

export default withAuth({
  // 未登录时直接跳转到指定的OIDC登录页
  pages: {
    signIn: '/api/auth/signin/admin-spa',
  },
})

// 配置需要保护的路径，匹配所有路径，排除登录相关API、静态资源等
export const config = {
  matcher: [
    '/((?!api/auth|_next/static|_next/image|favicon.ico).*)',
  ],
}

这种方式下，包括根URL在内的所有匹配路径，都会先经过Middleware检查登录状态，未登录直接跳转到指定的OIDC登录页。

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