How to configure extraQueryParameters for redirect request in MSAL.js

Question

My react app uses MSAL (@azure/msal-browser) for user authentication, so I configure MSAL instance in my index.tsx using configuration object:

const config = {
  clientId: "myAppId",
  msalConfig: {
    auth: {
      authority: "signUpSignInCustomPolicyURI",
      clientId: "myAppId",
      knownAuthorities: ["myB2CTenant.b2clogin.com"],
      redirectUri: "/"
    },
    cache: {<cacheconfig>}
  },
  loginScopes: ['openid', 'offline_access'],
  authorities: {
    signUpSignIn: "signUpSignInCustomPolicyURI",
    forgotPassword: "forgotPasswordCustomPolicyURI",
  }
}
msalInstance = new PublicClientApplication(config);

Then I wrap my app component in MsalProvider component:

<MsalProvider instance={msalInstance}>
  <App/>
</MsalProvider>

and use <MsalAuthenticationTemplate> in protected components so users are prompted to login automatically.

On the other hand, we have an ability to add extra parameters to RequestRedirect like this:

const { instance } = useMsal();
const loginRedirectRequest = {
  scopes: <myLoginScopes>,
  extraQueryParameters: {
    locale: "localeId",
    theme: "themeId"
  }
};
instance.loginRedirect(loginRedirectRequest);

My question is how to configure MSAL instance so it would apply extraQueryParameters every time it redirects users automatically?

score 0 · Answer 1 · answered Jul 27 '22 at 09:36

0

Add it into the MSAL config object to start with.

const config = {
  clientId: "myAppId",
  msalConfig: {
    auth: {
      authority: "signUpSignInCustomPolicyURI",
      clientId: "myAppId",
      knownAuthorities: ["myB2CTenant.b2clogin.com"],
      redirectUri: "/"
    },
    cache: {<cacheconfig>}
  },
  loginScopes: ['openid', 'offline_access'],
  authorities: {
    signUpSignIn: "signUpSignInCustomPolicyURI",
    forgotPassword: "forgotPasswordCustomPolicyURI",
  },
  extraQueryParameters: {
    locale: "localeId",
    theme: "themeId"
  }
}
msalInstance = new PublicClientApplication(config);

answered Jul 27 '22 at 09:36

Jas Suri - MSFT

10,605
2
10
20

Just like this? Could not find anything about this here: https://azuread.github.io/microsoft-authentication-library-for-js/ref/modules/_azure_msal_browser.html#configuration Nevertheless, I tried with no luck. At the same time, I realized I need these parameters to be dynamic and depend on the current context, so I can't just configure it once and for all at the start when MSAL instance is created. Does it mean I'm ending up with ? – Svetlana Jul 27 '22 at 10:47
If it’s dynamic, then pass the loginRedirectRequest object as you already noted. – Jas Suri - MSFT Jul 28 '22 at 08:49
The question is how to pass it to if it's possible at all. – Svetlana Jul 28 '22 at 18:00

score 0 · Answer 2 · answered Feb 27 '23 at 11:37

I asked the same question recently in issues and was kindly responded to by one of the contributors.

He suggested to use the standard OAuth state property to pass and receive custom values (not extraQueryParameters which only go to the login page), and pointed me at this article:

https://learn.microsoft.com/en-us/azure/active-directory/develop/msal-js-pass-custom-state-authentication-request

How to configure extraQueryParameters for redirect request in MSAL.js

2 Answers2