React+Node.js集成Auth0时遇Invalid Compact JWS错误求助

我在Auth0社区和Stack Overflow查阅过类似问题但未解决，特此求助：

• 自定义API real-estate-api 是在Auth0的Applications->APIs下创建的，作为API受众
• React项目使用SPA类型的Client ID
• 通过Postman调用接口时持续收到Invalid Compact JWS错误，操作步骤为在Headers中添加Authorization字段，值为Bearer {从React控制台复制的token}
• 已在jwt.io验证token的sub、aud、iss字段均正常，且使用了最新版本的Auth0 React库和Node.js的oauth2相关依赖

相关代码 #

React 代码 #

import { Auth0Provider, useAuth0 } from "@auth0/auth0-react";

function LoginButton() {
  const { loginWithRedirect } = useAuth0();
  return (
    <button
      onClick={() =>
        loginWithRedirect({
          authorizationParams: {
            scope: "read:current_user email",
            screen_hint: "signin",
          },
        })
      }
    >
      Log In
    </button>
  );
}

function LogoutButton() {
  const { logout } = useAuth0();
  return <button onClick={() => logout()}>Log Out</button>;
}

function App() {
  const { isAuthenticated, isLoading, user, getAccessTokenSilently } =
    useAuth0();

  const getToken = async () => {
    try {
      const token = await getAccessTokenSilently({
        authorizationParams: {
          audience: "real-estate-api",
        },
      });

      console.log("Token:", token);
      return token;
    } catch (error) {
      console.error("Error getting token:", error);
    }
  };

  if (isLoading) {
    return <div>Loading...</div>;
  }

  return (
    <>
      {!isAuthenticated ? (
        <LoginButton />
      ) : (
        <div>
          <LogoutButton />
          <div>Hello, {user?.name}</div>
          <button onClick={getToken}>Get Token</button>
        </div>
      )}
    </>
  );
}

export default function AppWithAuth() {
  return (
    <Auth0Provider
      domain="dev-q8w.....uk.auth0.com"
      clientId="vbvi......"
      authorizationParams={{
        redirect_uri: window.location.origin,
      }}
    >
      <App />
    </Auth0Provider>
  );
}

Node.js 代码 #

auth.ts

import { auth } from 'express-oauth2-jwt-bearer';

export const jwtCheck = auth({
  issuerBaseURL: process.env.AUTH0_ISSUER_BASE_URL,
  audience: process.env.AUTH0_AUDIENCE,
});

authenticate.ts

import httpStatus from 'http-status';

import ApiError from '@utils/handle-api-error';
import { NextFunction, Request, Response } from 'express';
import { UserService } from '@service/user-service';
import { UserRole } from '@common/interface/enums/user.enum';
import { jwtCheck } from '@utils/config/auth';
import { Auth0Request } from '@common/interface/auth.interface';

const userService = new UserService();

export const authMiddleware = (req: Request, res: Response, next: NextFunction): void => {
  console.log('Received auth header:', req.headers.authorization);
  console.log('Auth header length:', req.headers.authorization?.length);
  jwtCheck(req as Request, res, (err: string) => {
    console.log(err);
    if (err) return next(new ApiError(httpStatus.UNAUTHORIZED, 'Unauthorized'));

    const auth = (req as unknown as Auth0Request).auth;

    const userInfo = {
      auth0Id: auth.sub,
      email: auth.email,
    };

    req.user = userInfo;
    next();
  });
};

user-route.ts

import express from 'express';

import UserController from '@controller/user-controller';

import { validate } from '@middleware/validate';
import { signupSchema, updateUserSchema } from '@utils/validations/user.validation.schema';
import { authMiddleware } from '@middleware/authenticate';

const router = express.Router();

const user = new UserController();

router.post('/register', authMiddleware, validate(signupSchema), user.register);
router.get('/me', authMiddleware, user.getUserById);
router.put('/me', authMiddleware, validate(updateUserSchema), user.updateUserInfo);

export default router;

后端 .env 配置 #

AUTH0_ISSUER_BASE_URL=https://dev-q8wet.....uk.auth0.com/
AUTH0_AUDIENCE=real-estate-api

完整错误信息 #

InvalidTokenError: Invalid Compact JWS
    at C:\Users\...\Documents\Pictures\node_modules\express-oauth2-jwt-bearer\dist\index.js:300:19
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async C:\Users\...\Documents\Pictures\node_modules\express-oauth2-jwt-bearer\dist\index.js:403:24 {
  status: 401,
  statusCode: 401,
  headers: {
    'WWW-Authenticate': 'Bearer realm="api", error="invalid_token", error_description="Invalid Compact JWS"'
  },
  code: 'invalid_token'
}

排查与解决方案 #

1. 检查Token复制完整性
   复制控制台的token时，确保没有遗漏字符、多带空格或混入其他输出内容。直接把Postman里的token粘贴到jwt.io，确认能正常解析——如果解析失败，就是复制过程出了问题。

2. 确认获取的是Access Token而非ID Token
   getAccessTokenSilently应返回Access Token，其aud字段必须是real-estate-api；ID Token的aud是你的Client ID，即便能解析也无法通过API验证。再核对jwt.io里的token类型，Access Token会包含API权限相关的scope或permissions字段。

3. 修正Auth0域名配置
   后端.env里的AUTH0_ISSUER_BASE_URL去掉末尾斜杠，改为https://dev-q8wet.....uk.auth0.com。多余的斜杠会导致express-oauth2-jwt-bearer请求JWKS密钥时路径错误，进而无法验证签名。

4. 调整中间件调用方式
   express-oauth2-jwt-bearer的auth返回的是标准Express中间件，无需手动包裹调用，改为：

// authenticate.ts
export const authMiddleware = async (req: Request, res: Response, next: NextFunction): Promise<void> => {
  try {
    await jwtCheck(req, res, next);
    const auth = (req as unknown as Auth0Request).auth;
    req.user = {
      auth0Id: auth.sub,
      email: auth.email,
    };
    next();
  } catch (err) {
    console.log(err);
    next(new ApiError(httpStatus.UNAUTHORIZED, 'Unauthorized'));
  }
};

或者更简洁的方式：在路由中先挂载jwtCheck，再处理用户信息：

// user-route.ts
router.get('/me', jwtCheck, (req, res, next) => {
  const auth = (req as unknown as Auth0Request).auth;
  req.user = { auth0Id: auth.sub, email: auth.email };
  next();
}, user.getUserById);

5. 核对Auth0 API配置
   登录Auth0后台，确认real-estate-api的标识符与代码中audience完全一致（包括大小写、特殊字符）；API的签名算法默认是RS256，确保没有被修改为HS256（代码未指定时默认使用RS256，无需额外配置）。

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