BrowserAuthError: uninitialized_public_client_application

[Christonn93]

Core Library

MSAL.js (@azure/msal-browser)

Core Library Version

3.17.0

Wrapper Library

MSAL React (@azure/msal-react)

Wrapper Library Version

2.0.19

Public or Confidential Client?

Public

Description

I'm trying to make a request to the api. And i expect to get back valid data from the api.
I have been doing requests with fetch, witch have been working fine, but when im moving over to axios it throw me errors.

I'm moving over to axios because when using fetch i encountered issues with token expiering, I had to create a function to make sure that tokens are updated and fresh, but this is running every time a user is updating the page, witch is fine when its only testing, but when over 100 people will use the application after testing this will cause the application to be slow.

Also, the maintainability of the application is a mess, by using axios I can maintain the application better.

Here is the "hack" i have made to check and ensure token is valid:

import { msalConfig } from './authConfig';
import { PublicClientApplication, InteractionRequiredAuthError } from '@azure/msal-browser';

export const msalInstance = new PublicClientApplication(msalConfig);

// Function to check if the token is expired
function isTokenExpired(tokenInfo) {
  const currentTime = Math.floor(Date.now() / 1000);
  const expiresOn = parseInt(tokenInfo.expiresOn, 10);
  return currentTime > expiresOn;
}

export async function acquireTokenSilently(account, scopes) {
  const request = {
    account: account,
    scopes: scopes,
  };

  try {
    const response = await msalInstance.acquireTokenSilent(request);
    return response;
  } catch (error) {
    if (error instanceof InteractionRequiredAuthError) {
      return msalInstance.acquireTokenPopup(request);
    } else {
      console.error('Silent token acquisition failed:', error);
      throw error;
    }
  }
}

const ensureValidToken = async () => {
  const keys = [
    '****-login.windows.net-accesstoken-****-api://****/****.search--',
    '****-login.windows.net-accesstoken-****-api://****/read--',
  ];

  for (const key of keys) {
    const item = sessionStorage.getItem(key);
    if (item) {
      try {
        const tokenInfo = JSON.parse(item);
        if (isTokenExpired(tokenInfo)) {
          console.log(`Token expired for ${key}. Requesting new token...`);

          // Extract necessary information for refreshing the token
          const account = msalInstance.getAccountByHomeId(tokenInfo.homeAccountId);
          const scopes = [tokenInfo.target]; // Assuming the target is the scope

          // Acquire new token silently
          const response = await acquireTokenSilently(account, scopes);
          console.log(`New token received for ${key}:`, response.accessToken);

          // Update session storage with the new token information
          const newTokenInfo = {
            cachedAt: Math.floor(Date.now() / 1000).toString(),
            clientId: response.clientId,
            credentialType: 'AccessToken',
            environment: 'login.windows.net',
            expiresOn: Math.floor(response.expiresOn / 1000).toString(), // Convert milliseconds to seconds
            extendedExpiresOn: Math.floor(response.extendedExpiresOn / 1000).toString(), // Convert milliseconds to seconds
            homeAccountId: tokenInfo.homeAccountId,
            realm: tokenInfo.realm,
            secret: response.accessToken,
            target: scopes[0],
            tokenType: 'Bearer',
          };

          sessionStorage.setItem(key, JSON.stringify(newTokenInfo));
        } else {
          console.log(`Token valid for ${key}`);
        }
      } catch (error) {
        console.error(`Error parsing item for ${key}:`, error);
      }
    } else {
      console.warn(`Item not found for key: ${key}`);
    }
  }
};

export default ensureValidToken;

Error Message

ERROR
uninitialized_public_client_application: You must call and await the initialize function before attempting to call any other MSAL API. For more visit: aka.ms/msaljs/browser-errors
BrowserAuthError: uninitialized_public_client_application: You must call and await the initialize function before attempting to call any other MSAL API. For more visit: aka.ms/msaljs/browser-errors
at createBrowserAuthError (http://localhost:3000/static/js/bundle.js:91323:10)
at blockAPICallsBeforeInitialize (http://localhost:3000/static/js/bundle.js:96140:94)
at preflightCheck (http://localhost:3000/static/js/bundle.js:96155:3)
at preflightCheck (http://localhost:3000/static/js/bundle.js:89212:76)
at StandardController.acquireTokenPopup (http://localhost:3000/static/js/bundle.js:89519:7)
at PublicClientApplication.acquireTokenPopup (http://localhost:3000/static/js/bundle.js:85634:28)
at http://localhost:3000/main.b10741c45db6e546178e.hot-update.js:45:35
at Axios.request (http://localhost:3000/static/js/bundle.js:107133:41)
at async fetchCaseByCaseId (http://localhost:3000/main.e5cb28d44cffb697d41e.hot-update.js:27:7)
at async readData (http://localhost:3000/main.f1dc14bae878f949a492.hot-update.js:32:20)

MSAL Logs

[Wed, 24 Jul 2024 06:19:37 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - BrowserCrypto: modern crypto interface available
index.js:15 [Wed, 24 Jul 2024 06:19:37 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - BrowserCrypto: modern crypto interface available index.js:24
[Wed, 24 Jul 2024 06:19:37 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - Event callback registered with id: 0190e365-3041-7af7-8dcf-ef01bb68396c BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - getAllAccounts called BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - getAllAccounts called BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - Event callback registered with id: 0190e365-30c0-7988-963b-30b75cc9224d BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-react@2.0.22 : Verbose - MsalProvider - Registered event callback with id: 0190e365-30c0-7988-963b-30b75cc9224d BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - Emitting event to callback 0190e365-3041-7af7-8dcf-ef01bb68396c: msal:initializeStart BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - Emitting event to callback 0190e365-30c0-7988-963b-30b75cc9224d: msal:initializeStart BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-react@2.0.22 : Verbose - MsalProvider - Removing event callback 0190e365-30c0-7988-963b-30b75cc9224d BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - Event callback 0190e365-30c0-7988-963b-30b75cc9224d removed. BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - Event callback registered with id: 0190e365-30c3-7d67-b025-8cc4ec8bbe91 BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-react@2.0.22 : Verbose - MsalProvider - Registered event callback with id: 0190e365-30c3-7d67-b025-8cc4ec8bbe91 BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - Emitting event to callback 0190e365-3041-7af7-8dcf-ef01bb68396c: msal:initializeStart BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - Emitting event to callback 0190e365-30c3-7d67-b025-8cc4ec8bbe91: msal:initializeStart 2BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - getAllAccounts called 2BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - getAllAccounts called 2BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - Extension with id: ppnbnpeolgkicgegkbkbjmhlideopiji not installed 2axiosInstance.js:11
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - getAllAccounts called axiosInstance.js:33
[Wed, 24 Jul 2024 06:19:38 GMT] : [0190e365-30d1-774a-881d-3c34ea3d39c2] : @azure/msal-browser@3.20.0 : Verbose - acquireTokenPopup called axiosInstance.js:33
[Wed, 24 Jul 2024 06:19:38 GMT] : [0190e365-30d2-75e1-afb9-774871e22929] : @azure/msal-browser@3.20.0 : Verbose - acquireTokenPopup called BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - No extension installed BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - BrowserAuthError: native_extension_not_installed: Native extension is not installed. If you think this is a mistake call the initialize function. BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - Claims-based caching is disabled. Clearing the previous cache with claims BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - Emitting event to callback 0190e365-3041-7af7-8dcf-ef01bb68396c: msal:initializeEnd BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - Emitting event to callback 0190e365-30c3-7d67-b025-8cc4ec8bbe91: msal:initializeEnd BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - handleRedirectPromise called BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - getAllAccounts called BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - Emitting event to callback 0190e365-3041-7af7-8dcf-ef01bb68396c: msal:handleRedirectStart BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - Emitting event to callback 0190e365-30c3-7d67-b025-8cc4ec8bbe91: msal:handleRedirectStart BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [0190e365-30d4-7f1c-8b5b-a86c5c0a4b67] : msal.js.browser@3.20.0 : Verbose - initializeServerTelemetryManager called BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - handleRedirectPromise has been called for the first time, storing the promise BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - Emitting event to callback 0190e365-3041-7af7-8dcf-ef01bb68396c: msal:handleRedirectEnd BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - Emitting event to callback 0190e365-30c3-7d67-b025-8cc4ec8bbe91: msal:handleRedirectEnd BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - No extension installed BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - BrowserAuthError: native_extension_not_installed: Native extension is not installed. If you think this is a mistake call the initialize function. BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - Claims-based caching is disabled. Clearing the previous cache with claims BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - Emitting event to callback 0190e365-3041-7af7-8dcf-ef01bb68396c: msal:initializeEnd BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - Emitting event to callback 0190e365-30c3-7d67-b025-8cc4ec8bbe91: msal:initializeEnd BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - handleRedirectPromise called BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - handleRedirectPromise has been called previously, returning the result from the first call 6BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - getAllAccounts called 6BaseOperatingContext.ts:44
[Wed, 24 Jul 2024 06:19:38 GMT] : [] : @azure/msal-browser@3.20.0 : Verbose - getAllAccounts called

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

import { LogLevel } from '@azure/msal-browser';

export const msalConfig = {
  auth: {
    clientId: process.env.REACT_APP_CLIENT_ID, // This is the ONLY mandatory field that you need to supply.
    authority: process.env.REACT_APP_AUTHORITY, // Replace the placeholder with your tenant subdomain
    redirectUri: process.env.REACT_APP_REDIRECT_URI, // Points to window.location.origin. You must register this URI on Azure Portal/App Registration.
    postLogoutRedirectUri: process.env.REACT_APP_POST_LOGOUT_REDIRECT_URI, // Indicates the page to navigate after logout.
    navigateToLoginRequestUrl: true, // If "true", will navigate back to the original request location before processing the auth code response.
  },
  cache: {
    cacheLocation: 'sessionStorage', // Configures cache location. "sessionStorage" is more secure, but "localStorage" gives you SSO between tabs.
    storeAuthStateInCookie: true, // Set this to "true" if you are having issues on IE11 or Edge
  },
  system: {
    allowNativeBroker: true,
    loggerOptions: {
      loggerCallback: (level, message, containsPii) => {
        if (containsPii) {
          return;
        }
        switch (level) {
          case LogLevel.Error:
            console.error(message);
            return;
          case LogLevel.Info:
            console.info(message);
            return;
          case LogLevel.Verbose:
            console.debug(message);
            return;
          case LogLevel.Warning:
            console.warn(message);
            return;
          default:
            return;
        }
      },
    },
  },
};

export const loginRequest = {
  scopes: ['api://*************/read'],
};

export const pcdLoginRequest = {
  scopes: ['api://**********/***.search'],
};

/* I removed the links. */

Relevant Code Snippets

//requests.js
// This is where all my axios request functions is laying

import axiosInstance from './axiosInstance';

export const fetchCaseByCaseId = async (caseId) => {
  const { data } = await axiosInstance.get(
    `https://apiUrl?caseNumber=${encodeURIComponent(caseId)}`
  );
  return data;
};

// axiosInstance.js
// This is how the axios instance settup is. 

import { PublicClientApplication } from '@azure/msal-browser';
import axios from 'axios';
import { msalConfig, loginRequest, pcdLoginRequest } from './auth/authConfig';

const axiosInstance = axios.create();

const msalInstance = new PublicClientApplication(msalConfig);

axiosInstance.interceptors.request.use(
  async (config) => {
    const account = msalInstance.getAllAccounts()[0];
    // console.log('MSAL account', account);
    if (!account) throw Error('Account not found');

    let request;
    if (config.url.includes('pcd-integration-dev')) {
      request = pcdLoginRequest;
      console.log('pcd request', request);
    } else {
      request = loginRequest;
      console.log('rsa request', request);
    }

    request.account = account;

    let response;
    try {
      response = await msalInstance.acquireTokenSilent(request);
      console.log('response', response);
    } catch (error) {
      // Acquire token silently failed, fallback to interactive method
      console.error('Response error', error);
      response = await msalInstance.acquireTokenPopup(request);
    }

    config.headers['Authorization'] = `Bearer ${response.accessToken}`;
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default axiosInstance;


// CasePageForm
// This is where i make my request -  

import React, { useEffect } from 'react';
import { fetchCaseByCaseId } from '../../api/requests';

const CasePageForm = ({ registrationNumber, onSubmit }) => {
  useEffect(() => {
    async function readData() {
      const data = await fetchCaseByCaseId('03499628');
      console.log(data);
    }

    readData();
  }, []);

  return <></>;
};

export default CasePageForm;


// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { QueryClientProvider } from 'react-query';
import queryClient from './api/queryClient';
import { PublicClientApplication, EventType } from '@azure/msal-browser';
import { msalConfig } from './api/auth/authConfig';

/**
 * MSAL should be instantiated outside of the component tree to prevent it from being re-instantiated on re-renders.
 * For more, visit: https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
 */
const msalInstance = new PublicClientApplication(msalConfig);

// Default to using the first account if no account is active on page load
if (!msalInstance.getActiveAccount() && msalInstance.getAllAccounts().length > 0) {
  // Account selection logic is app dependent. Adjust as needed for different use cases.
  msalInstance.setActiveAccount(msalInstance.getActiveAccount()[0]);
}

// Listen for sign-in event and set active account
msalInstance.addEventCallback((event) => {
  if (event.eventType === EventType.LOGIN_SUCCESS && event.payload.account) {
    const account = event.payload.account;
    msalInstance.setActiveAccount(account);
  }
});

console.log(msalInstance, 'msalInstance');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <QueryClientProvider client={queryClient}>
    <React.StrictMode>
      <App msalInstance={msalInstance} />
    </React.StrictMode>
  </QueryClientProvider>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();


//App.js

import React, {useEffect, useState} from 'react';
import {BrowserRouter as Router, Route, Routes, Navigate, useLocation} from 'react-router-dom';
import { Container } from '@mui/material';
import Sidebar from './components/Sidebar';
import CasePage from './pages/case-page/CasePage';
import ReviewPage from './pages/review-page/ReviewPage';
import { MsalProvider, useMsal } from '@azure/msal-react';
import SignIn from './pages/SignInPage';

/**
 * MainContent component that handles authentication and redirection.
 */
const MainContent = ({ children }) => {
  const { instance } = useMsal();
  const [isLoading, setIsLoading] = useState(true);
  const activeAccount = instance.getActiveAccount();
  const location = useLocation();

  useEffect(() => {
    const checkAccount = async () => {
      try {
        await instance.handleRedirectPromise();
      } catch (error) {
        console.error(error);
      } finally {
        setIsLoading(false);
      }
    };

    if (!activeAccount) {
      checkAccount();
    } else {
      setIsLoading(false);
    }
  }, [activeAccount, instance]);

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

  if (!activeAccount && location.pathname !== '/signin') {
    return <Navigate to="/signin" />;
  }

  return <Container>{children}</Container>;
};

/**
 * App component that sets up the routes and authentication provider.
 */
function App({ msalInstance }) {
  return (
    <MsalProvider instance={msalInstance}>
      <Router>
        <div style={{ display: 'flex' }}>
          <Sidebar />
          <Container>
            <Routes>
              <Route path="/signin" element={<SignIn />} />
              <Route
                path="/*"
                element={
                  <MainContent>
                    <Routes>
                      <Route path="/case" element={<CasePage />} />
                      <Route path="/review" element={<ReviewPage />} />
                    </Routes>
                  </MainContent>
                }
              />
            </Routes>
          </Container>
        </div>
      </Router>
    </MsalProvider>
  );
}

export default App;

Reproduction Steps

1. The user log in
2. the user land on case page and function runs (the function will run when the user do a search, but at the moment this is the way that it is done to make sure i get data back before working on other parts of the application)

Expected Behavior

I expect the app to ensure tokens is valid to avoid that user have to log back in when token is expired, if the token is valid and the user do a search on a casenumber (later also licenceplate number) the application will give back data.

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Chrome, Edge

Regression

No response

Source

External (Customer)

[konstantin-msft]

Hi @Christonn93.

You need to initialize the instance of MSAL.js before calling any APIs. Please refer here for more details.

Also, it's against the best practices to look-up MSAL.js tokens directly from the cache as MSAL.js cache schema can change over time so your code will break at some point. I suggest you always calling acquireTokenSilent and acquireTokenPopup (or redirect) APIs to fetch tokens. acquireTokenSilent API median response time is 4ms as it heavily utilizes caching, so it won't negatively impact the performance on your app.

[Christonn93]

Also, it's against the best practices to look-up MSAL.js tokens directly from the cache as MSAL.js cache schema can change over time so your code will break at some point. I suggest you always calling acquireTokenSilent and acquireTokenPopup (or redirect) APIs to fetch tokens. acquireTokenSilent API median response time is 4ms as it heavily utilizes caching, so it won't negatively impact the performance on your app.

And how would you suggest I would do this when it needs to acquire two tokens? @konstantin-msft

[konstantin-msft]

@Christonn93 You will need to make two API calls. Once MSAL.js obtains a token from the identity provider it places it in the local or session storage (depending on the config) so the next call to acquireTokenSilent API serves the token from cache unless it's expired. Cache lookups are very fast so multiple acquireTokenSilent API calls won't impact your app performance.