VueJS SPA. Question about the authorization listener.

Expected Behaviour

The authorization_code should be intercepted by the AuthorizationNotifier.

Describe the problem

I am trying to implement an authorization_code flow within a web SPA, with vue.

When I load the app, I start the whole process of login and consent, I am then redirected back to the app. However, the authorization_code is in the URL, like this:

http://localhost:8080/dashboard?code=u4XrDgPK8ANvn...PJYqC7v0&scope=admin&state=GAomHd00kF

From the examples, I understand that the response should be intercepted by AppAuth, but I am actually leaving the app to a external login page, I cannot expect that behaviour to work, as far as I know, I am actually starting the whole auth process again when I’m redirected back to the app.

My question is, how Is the notifier supposed to work, when I’m reloading the page?

I cannot wrap my head around this, I’m sure I’m missing something obvious.

Environment

• AppAuth-JS version: 1.2.0
• AppAuth-JS Environment (Node, Browser (UserAgent), …): Browser
• Source code snippts (inline or JSBin) The code I used is almost the same as in the examples.

constructor() {
        this.notifier = new AuthorizationNotifier();
        this.authorizationHandler = new RedirectRequestHandler();

        this.notifier.setAuthorizationListener((request, response, error) => {
        // I am never reaching this step
            if (response) {
                this.code = response.code;
            }
        });

        this.authorizationHandler.setAuthorizationNotifier(this.notifier);
    }

    startAuthorizationFlow(authConfig) {
        this._fetchServiceConfiguration(authConfig.openIdProvider).then(() => {
            this._makeAuthorizationRequest(authConfig.clientConfig);
        });
    }

    _fetchServiceConfiguration(openIdProvider)
    {
      return AuthorizationServiceConfiguration.fetchFromIssuer(openIdProvider)
        .then(response => {
            this.configuration = response;
        })
    }

    _makeAuthorizationRequest(clientConfig)
    {
        let request = new AuthorizationRequest({
            client_id: clientConfig.clientId,
            redirect_uri: clientConfig.redirectUri,
            response_type: AuthorizationRequest.RESPONSE_TYPE_CODE,
            state: undefined,
            scope: '',
            extras: {
                'prompt': 'consent',
                'access_type': 'offline'
            }
        });

        this.authorizationHandler.performAuthorizationRequest(this.configuration, request);
    }

[SterlingAr]

I have tried that and it worked perfectly, wonderful library, exactly what I needed.

Thank you for the explanation.

[tikurahul]

So you can use your own query string parser. In the past when I have encountered situations like this, this is what I did:

class NoHashQueryStringUtils extends BasicQueryStringUtils {
  parse(input: LocationLike, useHash?: boolean): StringMap {
    return super.parse(input, false /* never use hash */);
  }
}

I can now construct an instance of RedirectRequestHandler with an instance of NoHashQueryStringUtils. Something along the lines of:

this.authorizationHandler = new RedirectRequestHandler(
  new LocalStorageBackend(),
  new NoHashQueryStringUtils(), 
  window.location,
  new DefaultCrypto()); // null if your provider does not support PKCE