Notifier never calls the authorization listener

Expected Behavior

Clear documentation that shows how to handle the callback with code

[REQUIRED] Describe expected behavior

It will be nice to show what happens when the (web)app is redirected to the callback URL with the code

Describe the problem

I’ve configured and started the SSO flow. My app gets redirected to the callback URL /auth?code=jsDWmM6u8ebY1wtDM.... From this point it is not clear what should happen. The library does nothing, it doesn’t exchange the code for tokens, the authorization listener gets never called. Can I make a request to exchange the code? How do I get the verifier? From the electron sample the verifier is taken from the request in the listener.

 AuthorizationServiceConfiguration.fetchFromIssuer('/oauth')
            .then(response => {
                this.configuration = response;
                this.showMessage('Completed fetching configuration');
            })
            .catch(error => {
                console.log('Something bad happened', error);
                this.showMessage(`Something bad happened ${error}`);
            });
        this.authorizationHandler.setAuthorizationNotifier(this.notifier);
        this.notifier.setAuthorizationListener((request, response, error) => {
            log('Authorization request complete ', request, response, error);
            if (response) {
                this.code = response.code;
                this.showMessage(`Authorization Code ${response.code}`);
            }
        });

[REQUIRED] Environment

• AppAuth-JS version: 1.3.1
• AppAuth-JS Environment (Node, Browser (UserAgent), …): Browser (Firefox)
• Source code snippts (inline or JSBin)

[tracplus-hpaterson]

This issue could depend on what framework you’re suing, and how it generates query strings. We found AppAuth’s default query string handler assumes a # is present in the URL for routing, Angular style. Other frameworks, such as React, may omit this, confusing the parser so it won’t pick up the OAuth response from the query string.

You can work around this by extending the BasicQueryStringUtils from AppAuth to assume a hash is never present:

/**
 * @class NoHashQueryStringUtils
 *
 * `NoHashQueryStringUtils` extends AppAuth.js' default query string parser
 * (designed for Angular) to never assume `#`s are used for internal routing.
 *
 * This works around a bug where React URLs feature no hash, and so the parser
 * never detects the query string and OAuth parameters.
 */
class NoHashQueryStringUtils extends BasicQueryStringUtils {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  parse(input, useHash) {
    return super.parse(input, false);
  }
}

const ssoAuthHandler = new RedirectRequestHandler(new LocalStorageBackend(), new NoHashQueryStringUtils(), window.location, new DefaultCrypto());

[thardyman]

This issue could depend on what framework you’re suing, and how it generates query strings. We found AppAuth’s default query string handler assumes a # is present in the URL for routing, Angular style. Other frameworks, such as React, may omit this, confusing the parser so it won’t pick up the OAuth response from the query string.

You can work around this by extending the BasicQueryStringUtils from AppAuth to assume a hash is never present:

/**
 * @class NoHashQueryStringUtils
 *
 * `NoHashQueryStringUtils` extends AppAuth.js' default query string parser
 * (designed for Angular) to never assume `#`s are used for internal routing.
 *
 * This works around a bug where React URLs feature no hash, and so the parser
 * never detects the query string and OAuth parameters.
 */
class NoHashQueryStringUtils extends BasicQueryStringUtils {
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  parse(input, useHash) {
    return super.parse(input, false);
  }
}

const ssoAuthHandler = new RedirectRequestHandler(new LocalStorageBackend(), new NoHashQueryStringUtils(), window.location, new DefaultCrypto());

I feel like this should be in the documentation, or even better, add the NoHashQueryStringUtils to the core library.