RedirectRequestHandler performAuthorizationRequest method - How to safely pass base64 encoded string as query parameter value?

[jbdoster]

Expected Behavior

Given a key/value pair preselectedExternalProvider: "YmFzZTY0IHN0cmluZyB2YWx1ZQ==" is passed into the extras scope of the AuthorizationRequest constructor When the RedirectRequestHandler calls buildRequestUrl Then the query parameter in the URL is &preselectedExternalProvider=YmFzZTY0IHN0cmluZyB2YWx1ZQ==

[REQUIRED] Describe expected behavior

I expect base64 strings to be passed as query parameters safely (without special character encoding)

Describe the problem

The == delimiter is being encoded in the authorization request URL created by buildRequestUrl within the performAuthorizationRequest call

[REQUIRED] Actual Behavior

Given a key/value pair preselectedExternalProvider: "YmFzZTY0IHN0cmluZyB2YWx1ZQ==" is passed into the extras scope of the AuthorizationRequest constructor When the RedirectRequestHandler calls buildRequestUrl Then the query parameter in the URL is &preselectedExternalProvider=YmFzZTY0IHN0cmluZyB2YWx1ZQ%3D%3D

[REQUIRED] Steps to reproduce the behavior

1. Construct the authorization request using the AuthorizationRequest constructor a. add this key/value pair in the extras scope: preselectedExternalProvider: "YmFzZTY0IHN0cmluZyB2YWx1ZQ=="
2. Use this request and call performAuthorizationRequest
3. Check the preselectedExternalProvider query parameter's value in the network tab after being redirected

[REQUIRED] Environment

• AppAuth-JS version: 1.3.1
• AppAuth-JS Environment (Node, Browser (UserAgent), ...): Browser (React)

• Source code snippts (inline or JSBin)

  let request = new AuthorizationRequest({
    client_id: config.client_id,
    redirect_uri: config.redirect_uri,
    scope: config.scope,
    response_type: AuthorizationRequest.RESPONSE_TYPE_CODE,
    state: undefined,
    extras: {
      access_type: "offline",
      prompt: "consent",
      grant_type: GRANT_TYPE_AUTHORIZATION_CODE,
      preselectedExternalProvider: config.preselectedExternalProvider,
    },
  });
  
  if (this.configuration) {
    this.authorizationHandler.performAuthorizationRequest(
      this.configuration,
      request
    );
  } else {
    console.log(
      "Fetch Authorization Service configuration, before you make the authorization request."
    );
  }

[jbdoster]

I guess really it would be part of this util: https://github.com/openid/AppAuth-JS/blob/39a21adacf2184629f326e36372ccf1990267e7e/src/query_string_utils.ts#L55

We could first test if the string value input[key] is base64 encoded, and if so, assign the value without encoding