NextJS无src目录下OAuth Unauthorized错误排查求助

问题背景 #

在NextJS中使用auth0-js实现社交登录，app路由位于src目录内时功能正常，但将app路由移至项目根目录（无src目录）后，社交登录回调阶段出现Unauthorized(401)错误，回调URL为http://localhost:3000/api/auth/callback。已尝试删除.next文件重启项目、检查回调与重定向URL，问题仍未解决。

项目结构（无src目录）：

└── root/
    ├── app/
    │   └── (root)/
    │       └── (routes)/
    │           ├── api/
    │           │   └── auth/
    │           │       └── login/
    │           │           └── page.tsx
    │           ├── home/
    │           │   └── page.tsx
    │           ├── layout.tsx
    │           └── globals.css
    ├── public
    ├── components
    ├── lib
    ├── context/
    │   └── app-context.tsx
    └── node_modules

登录函数（上下文实现）：

function handleLogin(provider: string) {
    webAuth.authorize({
        connection: provider
    });
}

可能遗漏的配置与解决步骤 #

1. 回调API路由文件缺失或位置错误 #

NextJS App Router中，API路由需使用route.ts文件（而非page.tsx），且路径需严格匹配回调URL/api/auth/callback：

• 检查是否在app/(root)/(routes)/api/auth/callback/目录下创建了route.ts文件；
• 如果使用auth0-js自行实现回调逻辑，确保文件内正确处理Auth0返回的授权码、交换令牌等流程，示例代码参考：

  import { webAuth } from '../../../lib/auth'; // 根据实际路径调整导入
  import { NextResponse } from 'next/server';
  
  export async function GET(request: Request) {
    const url = new URL(request.url);
    const code = url.searchParams.get('code');
    const state = url.searchParams.get('state');
  
    if (!code || !state) {
      return NextResponse.json({ error: 'Missing code or state' }, { status: 400 });
    }
  
    try {
      await new Promise((resolve, reject) => {
        webAuth.exchangeCodeForToken({
          code,
          redirectUri: process.env.AUTH0_REDIRECT_URI,
        }, (err, authResult) => {
          if (err) reject(err);
          else resolve(authResult);
        });
      });
      // 认证成功后重定向到首页
      return NextResponse.redirect(new URL('/home', request.url));
    } catch (err) {
      return NextResponse.json({ error: 'Authentication failed' }, { status: 401 });
    }
  }
  

2. Auth0初始化配置错误 #

检查lib目录下的Auth0初始化代码，确保参数与当前项目结构匹配：

• 确保redirectUri严格设置为http://localhost:3000/api/auth/callback，且通过环境变量（如process.env.AUTH0_REDIRECT_URI）加载，避免硬编码；
• 初始化示例：

  import auth0 from 'auth0-js';
  
  export const webAuth = new auth0.WebAuth({
    domain: process.env.AUTH0_DOMAIN!,
    clientID: process.env.AUTH0_CLIENT_ID!,
    redirectUri: process.env.AUTH0_REDIRECT_URI!,
    responseType: 'token id_token',
    scope: 'openid profile email',
  });
  

3. Auth0控制台配置未同步 #

登录Auth0控制台，检查应用设置中的以下项：

• 允许的回调URL：确认已添加http://localhost:3000/api/auth/callback；
• 允许的Web来源：添加http://localhost:3000；
• 避免混用localhost与127.0.0.1，确保所有配置的地址与本地运行地址完全一致。

4. 环境变量加载异常 #

• 确认.env.local文件位于项目根目录，且包含正确的Auth0配置：

  AUTH0_DOMAIN=你的Auth0域名（如xxx.auth0.com）
  AUTH0_CLIENT_ID=你的客户端ID
  AUTH0_REDIRECT_URI=http://localhost:3000/api/auth/callback
  

• 重启项目时确保环境变量被正确加载，可在代码中打印process.env.AUTH0_REDIRECT_URI验证是否生效。

5. 路由导入路径错误 #

检查所有涉及Auth0逻辑的文件（如上下文、API路由），确认导入路径因目录结构变化已调整正确：

• 例如，原src/lib/auth的导入路径，现在需改为../lib/auth或对应相对路径，避免因导入失败导致认证逻辑失效。

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