React Router - HashRouter

[mhnnovicell]

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?

Confidential

Description

I am using the InteractionType.Popup to try and authenticate with my login.
On localhost it works perfectly, but as soon as i go stage/production, which uses Umbraco as CMS, then i get this error in the console:

Error - Interaction type validation failed due to state_interaction_type_mismatch: Hash contains state but the interaction type does not match the caller.

And i don't know how to fix that. Can you guys help me out?

Error Message

Error - Interaction type validation failed due to state_interaction_type_mismatch: Hash contains state but the interaction type does not match the caller.

MSAL Logs

Error - Interaction type validation failed due to state_interaction_type_mismatch: Hash contains state but the interaction type does not match the caller.

Network Trace (Preferrably Fiddler)

• Sent
• Pending

MSAL Configuration

auth: {
    clientId: import.meta.env.VITE_AD_CLIENTID,
    authority: import.meta.env.VITE_AD_AUTHORITY,
    redirectUri: import.meta.env.VITE_AD_REDIRECT_URI,
    postLogoutRedirectUri: "/",
  },
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: true,
  },
  system: {
    allowRedirectInIframe: true,
    loggerOptions: {
      loggerCallback: (
        level: LogLevel,
        message: string,
        containsPii: boolean
      ): void => {
        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;
        }
      },
    },
    windowHashTimeout: 9000, // Applies just to popup calls - In milliseconds
    iframeHashTimeout: 9000, // Applies just to silent calls - In milliseconds
    loadFrameTimeout: 9000, // Applies to both silent and popup calls - In milliseconds
  }

Relevant Code Snippets

tokenService.ts

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

export const msalInstance = new PublicClientApplication(msalConfig);

export const getAccessToken = async (
  msalInstance: IPublicClientApplication
): Promise<string | undefined> => {
  const activeAccount = msalInstance.getActiveAccount();
  const accounts = msalInstance.getAllAccounts();

  // If there are no logged in accounts, do not attempt to acquire a token
  if (!activeAccount && accounts.length === 0) {
    return undefined;
  }

  const request = {
    scopes: import.meta.env.VITE_AD_SCOPES.split(" "), // Allows for multiple scope separated by spaces in the env file
    account: activeAccount || accounts[0], // Assumes that only 1 account is allowed to login at a time, which is currently the case
  };

  // Silently acquire a token, meaning that no user interaction is required
  // Only works if a user is already logged in, as logging in requires user interaction
  const authResult = await msalInstance
    .acquireTokenPopup(request)
    .then((tokenResponse) => {
      // Do something with the tokenResponse
      console.log(tokenResponse, "tokenresponse");
      return tokenResponse;
    })
    .catch(async (error) => {
      if (error instanceof InteractionRequiredAuthError) {
        console.log(error, "error");
        // fallback to interaction when silent call fails
        return msalInstance.acquireTokenPopup(request);
      }

      // handle other errors
    });

  return authResult?.accessToken;
};

Reproduction Steps

https://stage.nrgi.dk/elcon/vi-tilbyder/solcelleberegner/#/admin/tilbudsliste

Expected Behavior

Get authenticated and redirected to route containing "#"

Identity Provider

Entra ID (formerly Azure AD) / MSA

Browsers Affected (Select all that apply)

Chrome

Regression

No response

Source

External (Customer)

[tnorling]

Is this actually resulting in broken behavior or you're just seeing the log?

It's best practice to set your redirectUri for popup and silent calls to a blank page that does not run MSAL or any other logic.

[microsoft-github-policy-service]

@mhnnovicell This issue has been automatically marked as stale because it is marked as requiring author feedback but has not had any activity for 5 days. If your issue has been resolved please let us know by closing the issue. If your issue has not been resolved please leave a comment to keep this open. It will be closed automatically in 7 days if it remains stale.