Next.js13集成NextAuth与Cognito Provider返回302错误

在Next.js 13 App Router项目中，使用NextAuth集成Cognito Provider实现身份认证，点击登录按钮后出现302错误，无法加载Cognito托管UI。相同的Cognito配置在非App Router的旧版Next.js项目中可正常运行。

现有配置代码 #

/api/auth/[...nextauth]/route.ts #

import NextAuth, { NextAuthOptions } from 'next-auth';
import CognitoProvider from 'next-auth/providers/cognito';

export const authOptions: NextAuthOptions = {
  providers: [
    CognitoProvider({
      clientId: process.env.COGNITO_CLIENT_ID,
      clientSecret: process.env.COGNITO_CLIENT_SECRET,
      issuer: process.env.COGNITO_DOMAIN,
    }),
  ],
  secret: 'secret',
};

const handler: NextAuthOptions = NextAuth(authOptions);

export { handler as GET, handler as POST };

注：当前issuer设置为https://cognito-domain.auth.us-east-1.amazoncognito.com/user_pool_id格式

/provider.tsx #

'use client';
import { SessionProvider } from 'next-auth/react';
import React from 'react';

export function Providers({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}

/layout.tsx #

export default async function RootLayout({
  children,
}: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

问题排查与解决方案 #

• 修正Issuer格式
  Cognito的issuer必须是用户池的基础域名，不需要追加/user_pool_id。正确格式应为：

  https://<your-cognito-domain>.auth.<region>.amazoncognito.com
  

  旧项目可能兼容带user_pool_id的格式，但NextAuth v4+在App Router下严格遵循OIDC规范，必须使用标准issuer地址。

• 修复Handler类型错误
  当前代码中Handler的类型定义错误，NextAuth返回的是Next.js Route Handler，而非NextAuthOptions。修改为：

  const handler = NextAuth(authOptions);
  

• 确认NextAuth版本兼容性
  确保使用NextAuth v4.20.0及以上版本，该版本开始完善对Next.js 13 App Router的支持。

• 验证环境变量加载
  检查.env.local文件是否放置在项目根目录，COGNITO_CLIENT_ID、COGNITO_CLIENT_SECRET、COGNITO_DOMAIN变量名无拼写错误，且在App Router中能正常读取。

• 核对Cognito回调URL
  确保Cognito用户池的回调URL配置为http://localhost:3000/api/auth/callback/cognito（开发环境），生产环境替换为对应域名，且与项目路由完全匹配。

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