CODEWITHSUNDEEP
azure-ad-b2cazure-ad-msal
Sarah Sh
Sarah Sh

Reputation: 519

use msal to connect to Azure B2C - state parameter

I am using sample from: https://github.com/Azure-Samples/active-directory-b2c-javascript-msal-singlepageapp as a base to implement B2C signup.

How do I pass the state parameter in the example? I saw there was an issue about the state, so i guess it is possible to use state in the example. But, I can't figure out how to use it and how to retrieve it after token is returned.

Upvotes: 4

Views: 4230

Answers (3)

Dustexe
Dustexe

Reputation: 123

I use state in my loginRedirect() method.. so I'll post my code here which should help you enough to make this work. I'm using MSAL in angular but the methods that I call should be the same.

In this example user clicks on a login button which calls a login method:

{
   const args: AuthenticationParameters = {
     state: "some string" //set state parameter (type: string)
   };
   this.msalService.loginRedirect(args);
}

This code will then redirect user to login.. and then back to your website (your redirectURI).. On this page you should implement handleRedirectCallback method which will be triggered after user is redirected. In this callback you will also get a response (or error) from login process which will include your state string.

this.msalService.handleRedirectCallback((authError, response) => {
  if (response) {
     const state = this.msalService.getAccountState(response.accountState);
     // you don't need to use "this.msalService.getAccountState()" I think
     ...
     do something with state. I use it to redirect back to initial page url. 
     ...
  }
});

Upvotes: 4

Tiago B
Tiago B

Reputation: 2065

You can send the state parameter on the loginRequest:

const loginRequest = {
   ...
    scopes: "your scopes",
    state: "my custom state value"
}

Then you capture it in the response on accountState, like this:

clientApplication.loginPopup(loginRequest).then(function (loginResponse) {
    if (loginResponse.account) {
        // will print: my custom state value
        console.log(loginResponse.accountState);
        ....
    }
});

You can find the documentation here: https://learn.microsoft.com/en-us/azure/active-directory/develop/msal-js-pass-custom-state-authentication-request

Upvotes: 0

spottedmahn
spottedmahn

Reputation: 16031

In reviewing the source code for MSAL.js, I don't see how you can control the value of state. AuthenticationRequestParameters is not exposed and the value of state is set to a new guid when AuthenticationRequestParameters is constructed.

Example:

In the following code of MSAL.js, we have no control over the authenticationRequest variable.

loginRedirect(scopes? : Array<string> , extraQueryParameters? : string): void {
    ...

    this.authorityInstance.ResolveEndpointsAsync()
    .then(() => {
        const authenticationRequest = new AuthenticationRequestParameters(this.authorityInstance, this.clientId, scopes, ResponseTypes.id_token, this._redirectUri);
        ...
    });
    ...
}

Upvotes: 2

Related Questions