Create Account

/**
 * Ensure the user has a Zapier account and has authorized this
 * site to access it. If not, a log in form or sign up form
 * will be shown to the user along the way.
 *
 * @param {Object} options
 * @param {String} options.clientId - The OAuth client ID
 * @param {String} options.signUpEmail - The user's email to use for pre-filling the sign up form.
 * @param {String} options.signUpFirstName - The user's first name to use for pre-filling the sign up form.
 * @param {String} options.signUpLastName - The user's last name to use for pre-filling the sign up form.
 */
export async function zapierAuthorize(options) {
  const root = "https://api.zapier.com";
  const url = new URL("/v2/authorize", root);
  const params = url.searchParams;
  params.set("client_id", options.clientId);
  params.set("redirect_uri", location.href);
  params.set("response_type", "code");
  const scopes = ["zap", "profile"];
  params.set("scope", scopes.join(" "));
  //
  // These parameters are optional but highly recommended.
  // Users will receive a prefilled sign up form,
  // allowing them to continue with a single click
  // (or edit the values).
  //
  params.set("sign_up_email", options.signUpEmail);
  params.set("sign_up_first_name", options.signUpFirstName);
  params.set("sign_up_last_name", options.signUpLastName);

  // Navigate to the /v2/authorize API, which will eventually
  // redirect back to `location.href` but with `?code=<CODE>`
  // in the URL parameters. At this point you will need to
  // exchange the OAuth code for an OAuth token.
  const popup = window.open(
    url.href,
    // If you give an opened window a name, it will prevent there
    // from being more than one window open at the same time with
    // that name. The new URL supplied to `open` will navigate
    //  existing window.
    "zapier-authorize",
    // Ensure a comfortable amount of space in the popup
    "width=1024,height=1280",
  );
  if (!popup) {
    alert("Failed to open popup window. Please allow popups and try again.");
  }
  const data = await waitForPopupClose(popup);
}

/**
 * Waits for the given popup window to close,
 * or for it to send a message that passes the `callback` function supplied.
 *
 * @param {Window} popup - The popup window created by `window.open`
 */
async function waitForPopupClose(popup) {
  return await new Promise((resolve) => {
    function onMessage(event) {
      if (
        typeof event.data === "object" &&
        event.data &&
        event.data.type === "zapier.popup.close"
      ) {
        popup.close();
        finishAndCleanUp(event.data);
      } else {
        console.warn("unhandled message event: (data)", event.data);
      }
    }
    function finishAndCleanUp() {
      resolve(undefined);
      removeEventListener("message", onMessage);
      clearInterval(interval);
    }
    // Wait for `postMessage` event
    addEventListener("message", onMessage);
    // Wait for popup to be closed if the message wasn't received
    const interval = setInterval(() => {
      if (popup.closed) {
        // The interval may have run after the popup closed and before onMessage
        // had a chance to process messages. This prevents a frequent race
        // condition in Firefox, where finishAndCleanUp was called here before
        // onMessage could call finishAndCleanUp.
        setTimeout(() => {
          finishAndCleanUp(undefined);
        });
      }
    });
  });
}

const url = new URL(request.url);
const code = url.searchParams.get("code");
const token = await EXCHANGE_CODE_FOR_TOKEN(code);
await SAVE_TOKEN_TO_DATABASE(CURRENT_USER_ID, token);