@charmr/oauth-button-web/dist/index.mjs

A lightweight, framework-agnostic OAuth login button as a custom Web Component. Easily drop it into any HTML, React, Angular, or Vue project.

function c(t, e) {
  return `https://www.facebook.com/v12.0/dialog/oauth?${new URLSearchParams({
    client_id: t,
    redirect_uri: e,
    response_type: "token",
    scope: "email public_profile"
  }).toString()}`;
}
function a({ clientId: t, redirectUri: e, onError: r }) {
  return { startLogin: () => {
    try {
      const o = c(t, e);
      window.location.href = o;
    } catch (o) {
      r && o instanceof Error && r({ message: o.message });
    }
  } };
}
function u(t, e) {
  return `https://github.com/login/oauth/authorize?${new URLSearchParams({
    client_id: t,
    redirect_uri: e,
    scope: "read:user user:email",
    allow_signup: "true"
  }).toString()}`;
}
function l({ clientId: t, redirectUri: e, onError: r }) {
  return { startLogin: () => {
    try {
      const o = u(t, e);
      window.location.href = o;
    } catch (o) {
      r && o instanceof Error && r({ message: o.message });
    }
  } };
}
function h(t, e) {
  return `https://accounts.google.com/o/oauth2/v2/auth?${new URLSearchParams({
    response_type: "token",
    client_id: t,
    redirect_uri: e,
    scope: "email profile"
  }).toString()}`;
}
function d({ clientId: t, redirectUri: e, onError: r }) {
  return { startLogin: () => {
    try {
      const o = h(t, e);
      window.location.href = o;
    } catch (o) {
      r && o instanceof Error && r(o);
    }
  } };
}
function g(t) {
  switch (t.provider) {
    case "google":
      return d(t);
    case "facebook":
      return a(t);
    case "github":
      return l(t);
    default:
      throw new Error(`Unsupported provider: ${t.provider}`);
  }
}
const b = ["google", "github", "facebook"];
function p(t) {
  return typeof t == "string" && b.includes(t);
}
class m extends HTMLElement {
  static get observedAttributes() {
    return ["provider", "client-id", "redirect-uri", "button-text", "store-provider"];
  }
  button;
  startLogin = () => {
  };
  getProps() {
    return {
      provider: this.getAttribute("provider"),
      clientId: this.getAttribute("client-id") || "",
      redirectUri: this.getAttribute("redirect-uri") || "",
      buttonText: this.getAttribute("button-text"),
      inlineStyle: this.getAttribute("style")
    };
  }
  constructor() {
    super(), this.button = document.createElement("button"), this.appendChild(this.button);
  }
  connectedCallback() {
    this.attachEvents(), this.updateController(), this.render();
  }
  attributeChangedCallback() {
    this.updateController(), this.render();
  }
  attachEvents() {
    this.button.addEventListener("click", () => {
      const e = this.getAttribute("provider"), r = this.hasAttribute("store-provider");
      e && r && this.rememberProvider(e), this.startLogin();
    });
  }
  rememberProvider(e) {
    sessionStorage.setItem("oauth_provider", e);
  }
  updateController() {
    const { provider: e, clientId: r, redirectUri: i } = this.getProps();
    if (p(e)) {
      const { startLogin: o } = g({
        provider: e,
        clientId: r,
        redirectUri: i,
        onError: (s) => {
          this.dispatchEvent(new CustomEvent("oauth-error", { detail: s }));
        }
      });
      this.startLogin = o;
    } else
      console.error(`OAuthLoginButtonWeb: "${e}" is not a valid provider`);
  }
  render() {
    const { provider: e, buttonText: r, inlineStyle: i } = this.getProps();
    this.button.textContent = r || `Continue with ${e || "OAuth"}`, this.button.className = this.className || "", this.button.style.cssText = `${i || ""}; width: 100%; height: 100%; display: block;`;
  }
}
const n = "@charmr-OAuthButtonWeb";
function f(t = "oauth-login-button", e) {
  try {
    customElements.get(t) ? e?.log && console.info(`${n} Custom element <${t}> already registered`) : (customElements.define(t, m), e?.log && console.info(`${n} Registered custom element: <${t}>`));
  } catch (r) {
    console.error(`${n} Failed to register <${t}>:`, r);
  }
}
export {
  m as OAuthLoginButtonWeb,
  f as register
};