use msal to connect to Azure B2C - state parameter

Question

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.

can you provide a link for 'I saw there was an issue about the state'? — spottedmahn, Aug 18 '17 at 20:26

score 4 · Answer 1 · answered May 06 '20 at 06:59

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. 
     ...
  }
});

spottedmahn · Answer 2 · 2018-03-02T14:32:28.003

2

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);
        ...
    });
    ...
}

edited Mar 02 '18 at 14:32

answered Aug 18 '17 at 20:41

spottedmahn

14,823
13
108
178

I am curious. If library is creating the state parameter, what is the advantage of exposing it to the user? – user911 Mar 05 '18 at 22:43
1

See [this SO Post](https://stackoverflow.com/a/47546311/1851230) about using the state parameter for controlling redirects. @user911 – spottedmahn Mar 06 '18 at 15:05

score 0 · Answer 3 · answered Jun 27 '19 at 20:36

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

use msal to connect to Azure B2C - state parameter

3 Answers3