React SPA中Auth0 getTokenSilently()获取JWT payload为空问题

我正在开发一个用Auth0做身份认证的React单页应用，已经实现了登录和登出功能，但调用getTokenSilently()获取的Authorization JWT解码后payload是空的。本地测试环境下浏览器控制台输出的令牌示例：

eyJhbGciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIiwiaXNzIjoiaHR0cHM6Ly9kZXYtdzAxODFhcXNobGw1MDMzbC51cy5hdXRoMC5jb20vIn0..thF3uZU-GjTkcNVo.EQawZb4Ebgww3ZT-Pa73eoJ62qLQ0HSIswroGiecQZHGdZLw-953s6asccnawPD9HwSObZ3JcsbP8HAFarNf2p5Zrr2sbp4QvGxfB6RgpWZTxEK2Tntu7X7w9i_7z2Iw8c_3lUZPnHe0_4OLaHnPyetzk8_Pqm2-JcELrNIwvRPTD1QmdMsbyvz6_u9kANS181FH7wSyxtt5UP5Hu_BnQ3lmEQhB5yMvL42PjaAsoaclxEdQ0EQmcCRdnNrQVqnKadZumwvs2jQ-A-onQI9lL3rhlPEktJP8Sy-UyhRv-U_Az6MmY4D92-VRD_AjXhXLggV7iXMS8hZM9N_cDDCA5skg.Fuf3LqTHjNuCZj_fS8P8HQ

问题详情 #

• 技术栈：ReactJS + Auth0 SPA SDK
• Auth0 SDK版本：@auth0/auth0-react: ^2.1.0, @auth0/auth0-spa-js: 2.0.3
• 测试浏览器：Chrome、Safari及无痕模式
• 错误信息：无

复现步骤 #

1. 用户通过Auth0完成登录
2. React应用调用方法获取令牌
3. 应用将令牌输出到控制台用于调试

代码片段 #

auth-provider.js #

import { Auth0Provider } from '@auth0/auth0-react';
import React from 'react';

const AuthProvider = ({ children }) => {
  const domain = process.env.REACT_APP_AUTH0_DOMAIN;
  const clientId = process.env.REACT_APP_AUTH0_CLIENT_ID;
  const audience = process.env.REACT_APP_AUTH0_AUDIENCE;

  return (
    <Auth0Provider
      domain={domain}
      clientId={clientId}
      authorizationParams={{
        audience: audience,
        redirect_uri: window.location.origin,
      }}
    >
      {children}
    </Auth0Provider>
  );
};

export default AuthProvider;

app.js #

import { useAuth0 } from '@auth0/auth0-react';
import React, { useEffect } from 'react';

function App() {
  const { getTokenSilently, isAuthenticated } = useAuth0();

  useEffect(() => {
    const getToken = async () => {
      if (isAuthenticated) {
        try {
          const token = await getTokenSilently();
          console.log('Token:', token);
          // 解码逻辑示例
          // const decoded = jwtDecode(token);
          // console.log('Decoded:', decoded);
        } catch (error) {
          console.error('Error getting token:', error);
        }
      }
    };

    getToken();
  }, [getTokenSilently, isAuthenticated]);

  return (
    <div className="App">
      <h1>Auth0 Test App</h1>
    </div>
  );
}

export default App;

已尝试方案 #

• 多次登录登出，使用无痕模式排除缓存影响
• 检查Auth0控制台日志，未发现错误或异常
• 确认Auth0Client初始化时配置了Auth0控制台创建的API audience
• 查阅Auth0 SPA SDK官方文档，但作为新手可能存在配置疏漏

内容的提问来源于stack exchange，提问作者rolo-ris