microsoft-authentication-library-for-js: AuthError: Unexpected error in authentication.: Hash does not contain state

@ChiragRatra-0009 Extract the IdTokenHint and pass into the AuthenticationParameters object. This should get you going.

      const someExtraQueryParameters = {
          id_token_hint: idTokenHint,
        };

const authParams: AuthenticationParameters = {
          authority,
          scopes,
          someExtraQueryParameters ,
        };

        authProvider.loginRedirect(authParams);

@ChiragRatra-0009 The root of this problem is that Msal appends certain information such as state to the request url and sets some temporary cache values used to verify the response. Due to this it expects that the /authorize request originated from msal, if it originated from somewhere else, such as an invite link, you will receive an error because the setup steps were not done. The way around this is to make the invite link point to your app and have your app include the required query parameters (such as id_token_hint) in extraQueryParameters on the msal request object.

One of the first thing Msal does when it initializes is looks for known properties in the hash of the url. If it contains some known properties but not all (such as state), you will receive an error. If you look at the /authorize request in your developer tools and you determine it contains the state property in the url but the response no longer contains that state, it’s a service issue. You can reach out to B2C support and they can help you figure out what’s going on. If the state is not included in the /authorize request double check that the request originated from Msal and if it is, please open a new bug so we can investigate.

@ChiragRatra-0009 I raised this with the Azure team after wasting hours trying to figure out the problem. Their response:

“The feedback received is that MSAL requires a “state” param that matches a cached value for browser-based apps (SPAs). This state param identifies the request and determines the original token time and is used to prevent cross-site request forgery attacks. Because of this, for SPAs, the email link should direct the user to the app, which can then redirect the user to the Azure AD B2C authentication flow. You can use query parameters in the email to app link so that your app can initiate the correct azure ad b2c authentication flow. E.g. pass the id_token_hint to your app then your app to the authentication flow. To summarize, email => app => authentication flow => app”