hoppscotch/assets/js/oauth.js

const redirectUri = `${window.location.origin}/`;

// GENERAL HELPER FUNCTIONS

/**
 * Makes a POST request and parse the response as JSON
 *
 * @param {String} url - The resource
 * @param {Object} params - Configuration options
 * @returns {Object}
 */

const sendPostRequest = async (url, params) => {
  const body = Object.keys(params)
    .map(key => `${key}=${params[key]}`)
    .join("&");
  const options = {
    method: "post",
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body
  };
  try {
    const response = await fetch(url, options);
    const data = await response.json();
    return data;
  } catch (err) {
    console.error("Request failed", err);
    throw err;
  }
};

/**
 * Parse a query string into an object
 *
 * @param {String} searchQuery - The search query params
 * @returns {Object}
 */

const parseQueryString = searchQuery => {
  if (searchQuery === "") {
    return {};
  }
  const segments = searchQuery.split("&").map(s => s.split("="));
  const queryString = segments.reduce(
    (obj, el) => ({ ...obj, [el[0]]: el[1] }),
    {}
  );
  return queryString;
};

/**
 * Get OAuth configuration from OpenID Discovery endpoint
 *
 * @returns {Object}
 */

const getTokenConfiguration = async endpoint => {
  const options = {
    method: "GET",
    headers: {
      "Content-type": "application/json"
    }
  };
  try {
    const response = await fetch(endpoint, options);
    const config = await response.json();
    return config;
  } catch (err) {
    console.error("Request failed", err);
    throw err;
  }
};

// PKCE HELPER FUNCTIONS

/**
 * Generates a secure random string using the browser crypto functions
 *
 * @returns {Object}
 */

const generateRandomString = () => {
  const array = new Uint32Array(28);
  window.crypto.getRandomValues(array);
  return Array.from(array, dec => `0${dec.toString(16)}`.substr(-2)).join("");
};

/**
 * Calculate the SHA256 hash of the input text
 *
 * @returns {Promise<ArrayBuffer>}
 */

const sha256 = plain => {
  const encoder = new TextEncoder();
  const data = encoder.encode(plain);
  return window.crypto.subtle.digest("SHA-256", data);
};

/**
 * Encodes the input string into Base64 format
 *
 * @param {String} str - The string to be converted
 * @returns {Promise<ArrayBuffer>}
 */

const base64urlencode = (
  str // Converts the ArrayBuffer to string using Uint8 array to convert to what btoa accepts.
) =>
  // btoa accepts chars only within ascii 0-255 and base64 encodes them.
  // Then convert the base64 encoded to base64url encoded
  //   (replace + with -, replace / with _, trim trailing =)
  btoa(String.fromCharCode.apply(null, new Uint8Array(str)))
    .replace(/\+/g, "-")
    .replace(/\//g, "_")
    .replace(/=+$/, "");

/**
 * Return the base64-urlencoded sha256 hash for the PKCE challenge
 *
 * @param {String} v - The randomly generated string
 * @returns {String}
 */

const pkceChallengeFromVerifier = async v => {
  const hashed = await sha256(v);
  return base64urlencode(hashed);
};

// OAUTH REQUEST

/**
 * Initiates PKCE Auth Code flow when requested
 *
 * @param {Object} - The necessary params
 * @returns {Void}
 */

const tokenRequest = async ({
  oidcDiscoveryUrl,
  grantType,
  authUrl,
  accessTokenUrl,
  clientId,
  scope
}) => {
  // Check oauth configuration
  if (oidcDiscoveryUrl !== "") {
    const {
      authorization_endpoint,
      token_endpoint
    } = await getTokenConfiguration(oidcDiscoveryUrl);
    authUrl = authorization_endpoint;
    accessTokenUrl = token_endpoint;
  }

  // Store oauth information
  localStorage.setItem("token_endpoint", accessTokenUrl);
  localStorage.setItem("client_id", clientId);

  // Create and store a random state value
  const state = generateRandomString();
  localStorage.setItem("pkce_state", state);

  // Create and store a new PKCE code_verifier (the plaintext random secret)
  const code_verifier = generateRandomString();
  localStorage.setItem("pkce_code_verifier", code_verifier);

  // Hash and base64-urlencode the secret to use as the challenge
  const code_challenge = await pkceChallengeFromVerifier(code_verifier);

  // Build the authorization URL
  const buildUrl = () =>
    `${authUrl + `?response_type=${grantType}`}&client_id=${encodeURIComponent(
      clientId
    )}&state=${encodeURIComponent(state)}&scope=${encodeURIComponent(
      scope
    )}&redirect_uri=${encodeURIComponent(
      redirectUri
    )}&code_challenge=${encodeURIComponent(
      code_challenge
    )}&code_challenge_method=S256`;

  // Redirect to the authorization server
  window.location = buildUrl();
};

// OAUTH REDIRECT HANDLING

/**
 * Handle the redirect back from the authorization server and
 * get an access token from the token endpoint
 *
 * @returns {Object}
 */

const oauthRedirect = async () => {
  let tokenResponse = "";
  let q = parseQueryString(window.location.search.substring(1));
  // Check if the server returned an error string
  if (q.error) {
    alert(`Error returned from authorization server: ${q.error}`);
  }
  // If the server returned an authorization code, attempt to exchange it for an access token
  if (q.code) {
    // Verify state matches what we set at the beginning
    if (localStorage.getItem("pkce_state") != q.state) {
      alert("Invalid state");
    } else {
      try {
        // Exchange the authorization code for an access token
        tokenResponse = await sendPostRequest(
          localStorage.getItem("token_endpoint"),
          {
            grant_type: "authorization_code",
            code: q.code,
            client_id: localStorage.getItem("client_id"),
            redirect_uri: redirectUri,
            code_verifier: localStorage.getItem("pkce_code_verifier")
          }
        );
      } catch (err) {
        console.log(`${error.error}\n\n${error.error_description}`);
      }
    }
    // Clean these up since we don't need them anymore
    localStorage.removeItem("pkce_state");
    localStorage.removeItem("pkce_code_verifier");
    localStorage.removeItem("token_endpoint");
    localStorage.removeItem("client_id");
    return tokenResponse;
  }
  return tokenResponse;
};

export { tokenRequest, oauthRedirect };