title: How can I pass a custom value to Azure AD B2C and need to return that parameter along with the response or with the common Redirect URI?
body: <p>I have to handle multiple login pages/applications which need to redirect to a common landing page <strong>index.html</strong> and need to access custom string to identify the requested application. The token generation endpoint is common for all login pages.</p>
  <p>Scenario :</p>
  <ul>
  <li><p>I have multiple login pages</p>
  <p>1: <strong>Login1.html</strong></p>
  <p>2: <strong>Login2.html</strong></p>
  <p>Token generation endpoint will be same for both logins page.</p>
  </li>
  <li><p>After successful authentication from Azure AD B2C application it will redirect to a common landing page <strong>'http://localhost:6420'</strong>. (This is the value I have set as redirect URL in the azure ad b2c application portal).</p>
  </li>
  <li><p>I need to pass a custom string for which I need to identify from which UI the user is currently logged in. i.e for a secondary validation if a user logged in from the login1.html page, then I need to pass 'log1' from the login1.html and need to access this value in my common landing page.</p>
  </li>
  </ul>
  <p>I have tried with both 'state' and also with 'extraQueryParameters' but not sure how these works as my requirement.</p>
  <pre><code>const loginRequest = {
          scopes: [&quot;openid&quot;, &quot;profile&quot;],
          extraQueryParameters: { campaignId: 'hawaii', ui_locales: 'es' }
        };
  </code></pre>
  <p>Any help would be highly appreciated. Thanks in advance.</p>
  <p><strong>-- app-config.ts</strong></p>
  <pre><code>    import { Configuration } from 'msal';
      import { MsalAngularConfiguration } from '@azure/msal-angular';
      
      // this checks if the app is running on IE
      export const isIE = window.navigator.userAgent.indexOf('MSIE ') &gt; -1 || window.navigator.userAgent.indexOf('Trident/') &gt; -1;
      
      export const b2cPolicies = {
          names: {
              signUpSignIn: &quot;b2c_1_susi&quot;,
              resetPassword: &quot;b2c_1_reset&quot;,
          },
          authorities: {
              signUpSignIn: {
                  authority: &quot;https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_susi&quot;
              },
              resetPassword: {
                  authority: &quot;https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/b2c_1_reset&quot;
              } 
          }
      }
      
      export const apiConfig: {b2cScopes: string[], webApi: string} = {
          b2cScopes: ['https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read'],
          webApi: 'https://fabrikamb2chello.azurewebsites.net/hello'
      };
      
      export const msalConfig: Configuration = {
          auth: {
              clientId: &quot;e760cab2-b9a1-4c0d-86fb-ff7084abd902&quot;,
              authority: b2cPolicies.authorities.signUpSignIn.authority,
              redirectUri: &quot;http://localhost:6420/&quot;,
              postLogoutRedirectUri: &quot;http://localhost:6420/&quot;,
              navigateToLoginRequestUrl: true,
              validateAuthority: false,
            },
          cache: {
              cacheLocation: &quot;localStorage&quot;,
              storeAuthStateInCookie: isIE, // Set this to &quot;true&quot; to save cache in cookies to address trusted zones limitations in IE
          },
      }
      
      export const loginRequest = {
          scopes: ['openid', 'profile'],
   extraQueryParameters: { userPage: 'Page1', ui_locales: 'es' }
      };
      
      // Scopes you enter will be used for the access token request for your web API
      export const tokenRequest: {scopes: string[]} = {
          scopes: apiConfig.b2cScopes // i.e. [https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read]
      };
      
      export const protectedResourceMap: [string, string[]][] = [
          [apiConfig.webApi, apiConfig.b2cScopes] // i.e. [https://fabrikamb2chello.azurewebsites.net/hello, ['https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read']]
      ];
      
      export const msalAngularConfig: MsalAngularConfiguration = {
          popUp: !isIE,
          consentScopes: [
              ...loginRequest.scopes,
              ...tokenRequest.scopes,
   
  
     ],
      unprotectedResources: [], // API calls to these coordinates will NOT activate MSALGuard
      protectedResourceMap,     // API calls to these coordinates will activate MSALGuard
      extraQueryParameters: { campaignId: 'hawaii', ui_locales: 'es' } 
  }
  </code></pre>
  <p><strong>-- app.component.ts</strong></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { BroadcastService, MsalService} from '@azure/msal-angular';
  import { Logger, CryptoUtils } from 'msal';
  import { isIE, b2cPolicies } from './app-config';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  export class AppComponent implements OnInit {
    title = 'Azure AD B2C';
    isIframe = false;
    loggedIn = false;
  
    constructor(private broadcastService: BroadcastService, private authService: MsalService) { }
    
    ngOnInit() {
  
      this.isIframe = window !== window.parent &amp;&amp; !window.opener;
      this.checkAccount();
  
      // event listeners for authentication status
      this.broadcastService.subscribe('msal:loginSuccess', (success) =&gt; {
  
      // We need to reject id tokens that were not issued with the default sign-in policy.
      // &quot;acr&quot; claim in the token tells us what policy is used (NOTE: for new policies (v2.0), use &quot;tfp&quot; instead of &quot;acr&quot;)
      // To learn more about b2c tokens, visit https://docs.microsoft.com/en-us/azure/active-directory-b2c/tokens-overview
        if (success.idToken.claims['acr'] !== b2cPolicies.names.signUpSignIn) {
          window.alert(&quot;Password has been reset successfully. \nPlease sign-in with your new password&quot;);
          return this.authService.logout()
        }
  
        console.log('login succeeded. id token acquired at: ' + new Date().toString());
        console.log(success);
  
        this.checkAccount();
      });
  
      this.broadcastService.subscribe('msal:loginFailure', (error) =&gt; {
        console.log('login failed');
        console.log(error);
  
          // Check for forgot password error
          // Learn more about AAD error codes at https://docs.microsoft.com/en-us/azure/active-directory/develop/reference-aadsts-error-codes
          if (error.errorMessage.indexOf('AADB2C90118') &gt; -1) {
            if (isIE) {
              this.authService.loginRedirect(b2cPolicies.authorities.resetPassword);
            } else {
              this.authService.loginPopup(b2cPolicies.authorities.resetPassword);
            }
          }
      });
  
      // redirect callback for redirect flow (IE)
      this.authService.handleRedirectCallback((authError, response) =&gt; {
        if (authError) {
          console.error('Redirect Error: ', authError.errorMessage);
          return;
        }
  
        console.log('Redirect Success: ', response);
      });
  
      this.authService.setLogger(new Logger((logLevel, message, piiEnabled) =&gt; {
        console.log('MSAL Logging: ', message);
      }, {
        correlationId: CryptoUtils.createNewGuid(),
        piiLoggingEnabled: false
      }));
    }
  
    // other methods
    checkAccount() {
      this.loggedIn = !!this.authService.getAccount();
    }
  
    login() {
      if (isIE) {
        this.authService.loginRedirect();
      } else {
        this.authService.loginPopup();
      }
    }
  
    logout() {
      this.authService.logout();
    }
  }
  </code></pre>