Azure获取Access Token时遇uninitialized_public_client_application错误求助

你遇到的错误是因为创建PublicClientApplication实例后，还没完成初始化就将其传递给MsalProvider，Msal内部会在实例未就绪时尝试调用相关API，从而触发这个报错。

修复方案 #

核心思路是在App组件中完成MSAL实例的初始化后，再渲染MsalProvider，具体修改如下：

修改App.jsx

import { useState, useEffect } from 'react';
import { PublicClientApplication, MsalProvider } from '@azure/msal-react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { AppRoot } from './AppRoot';
import { Prompt } from './Prompt';

function App() {
  const [pca, setPca] = useState(null);
  const [isReady, setIsReady] = useState(false);

  const msalConfig = {
    auth: {
      clientId: '*******',
      authority: 'https://login.microsoftonline.com/***********'
    },
    cache: {
      cacheLocation: 'localStorage',
      storeAuthStateInCookie: true
    }
  };

  useEffect(() => {
    async function initMsalInstance() {
      const instance = new PublicClientApplication(msalConfig);
      await instance.initialize();
      setPca(instance);
      setIsReady(true);
    }
    initMsalInstance();
  }, []);

  // 初始化完成前显示加载提示
  if (!isReady) {
    return <div>加载中...</div>;
  }

  return (
    <div className="App">
      <MsalProvider instance={pca}>
        <BrowserRouter>
          <Routes>
            <Route element={<AppRoot />}>
              <Route path="/" element={<Prompt />} />
              <Route path="*" element={<Navigate to="/" />} />
            </Route>
          </Routes>
        </BrowserRouter>
      </MsalProvider>
    </div>
  );
}

export default App;

修改Prompt.jsx

移除多余的instance.initialize()调用，因为实例已经在App组件中完成初始化：

import { useEffect } from 'react';
import { useMsal } from '@azure/msal-react';

export const Prompt = () => {
  const { instance } = useMsal();

  useEffect(() => {
    login();
  }, []);

  const login = async () => {
    try {
      const response = await instance.loginPopup({
        scopes: ["api:********"]
      });
      console.log(response);
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div>Prompt</div>
  );
};

为什么这样能解决问题？ #

MSAL v2及以上版本要求PublicClientApplication实例必须先通过initialize()完成初始化，才能被MsalProvider或其他登录/获取令牌的API使用。原代码中，实例刚创建就传给了MsalProvider，Provider内部会立即尝试访问实例的状态，这时候实例还没初始化完成，就会抛出uninitialized_public_client_application错误。

将初始化逻辑放在App组件的useEffect中，确保实例完全就绪后再渲染Provider，就能避免这个问题。

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