vue3-google-signin/dist/index.es.js

Google Sign-in for Vue3 with Google Identity Service

import { ref as m, watch as F, onMounted as Q, onUnmounted as z, readonly as w, defineComponent as W, inject as S, watchEffect as I, computed as X, createElementBlock as Y, openBlock as Z, normalizeStyle as ee, unref as c } from "vue";
const v = Symbol(), R = m(!1), C = m(!1), B = m(!1), T = m(0);
let k = null;
const te = () => {
  const e = document.createElement("script");
  return e.src = "https://accounts.google.com/gsi/client", e.async = !0, e.defer = !0, e;
}, ne = () => {
  C.value = !0, k = te(), document.head.appendChild(k), k.onload = () => {
    C.value = !1, R.value = !0;
  }, k.onerror = () => {
    C.value = !1, B.value = !0;
  };
};
F(
  () => T.value,
  (e, o) => {
    e > 0 && !R.value && !C.value && ne();
  }
);
function x() {
  return Q(() => {
    T.value++;
  }), z(() => {
    T.value--;
  }), {
    scriptLoaded: w(R),
    scriptLoadError: w(B)
  };
}
const oe = /* @__PURE__ */ W({
  __name: "GoogleSignInButton",
  props: {
    oneTap: { type: Boolean },
    autoSelect: { type: Boolean },
    loginUri: {},
    cancelOnTapOutside: { type: Boolean },
    promptParentId: {},
    nonce: {},
    context: {},
    stateCookieDomain: {},
    uxMode: {},
    allowedParentOrigin: {},
    itpSupport: { type: Boolean },
    type: {},
    theme: {},
    size: {},
    text: {},
    shape: {},
    logoAlignment: {},
    width: {},
    locale: {}
  },
  emits: ["success", "error", "intermediateIframeCloseCallback", "nativeCallback", "promptMomentNotification"],
  setup(e, { emit: o }) {
    const n = { large: 40, medium: 32, small: 20 }, t = e, i = o, l = S(v), r = m(null), { scriptLoaded: s } = x();
    I(() => {
      var a, u, f, p;
      s.value && ((a = window.google) == null || a.accounts.id.initialize({
        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
        client_id: l,
        callback: (g) => {
          if (!g.credential) {
            i("error");
            return;
          }
          i("success", g);
        },
        allowed_parent_origin: t.allowedParentOrigin,
        auto_select: t.autoSelect,
        cancel_on_tap_outside: t.cancelOnTapOutside,
        context: t.context,
        intermediate_iframe_close_callback: () => {
          i("intermediateIframeCloseCallback");
        },
        itp_support: t.itpSupport,
        login_uri: t.loginUri,
        native_callback: (g) => {
          i("nativeCallback", g);
        },
        nonce: t.nonce,
        prompt_parent_id: t.promptParentId,
        state_cookie_domain: t.stateCookieDomain,
        ux_mode: t.uxMode,
        use_fedcm_for_prompt: !0
      }), (f = window.google) == null || f.accounts.id.renderButton(r.value, {
        type: t.type,
        theme: t.theme,
        size: t.size,
        text: t.text,
        shape: t.shape,
        logo_alignment: t.logoAlignment,
        width: (u = t.width) == null ? void 0 : u.toString(),
        locale: t.locale
      }), t.oneTap && ((p = window.google) == null || p.accounts.id.prompt((g) => {
        i("promptMomentNotification", g);
      })));
    }), z(() => {
      var a;
      t.oneTap && ((a = window.google) == null || a.accounts.id.cancel());
    });
    const d = X(() => n[t.size || "large"]);
    return (a, u) => (Z(), Y("div", {
      ref_key: "targetElement",
      ref: r,
      style: ee({ display: "inline-flex", height: d.value })
    }, null, 4));
  }
});
function le(e, o, ...n) {
  var t;
  return ((t = window.google) == null ? void 0 : t.accounts.oauth2.hasGrantedAllScopes(
    e,
    o,
    ...n
  )) || !1;
}
function re(e, o, ...n) {
  var t;
  return ((t = window.google) == null ? void 0 : t.accounts.oauth2.hasGrantedAnyScope(
    e,
    o,
    ...n
  )) || !1;
}
function se(e, o) {
  var n;
  (n = window.google) == null || n.accounts.oauth2.revoke(e, () => {
    o == null || o();
  });
}
function ie(e) {
  const o = "https://accounts.google.com/o/oauth2/v2/auth", n = new URLSearchParams({
    gsiwebsdk: "3",
    client_id: e.client_id,
    scope: e.scope,
    include_granted_scopes: "true",
    access_type: "offline",
    response_type: "code",
    prompt: "consent"
  });
  return e.hint && n.append("hint", e.hint), e.hosted_domain && n.append("hosted_domain", e.hosted_domain), e.redirect_uri === void 0 ? n.append("redirect_uri", window.origin) : n.append("redirect_uri", e.redirect_uri), e.select_account === void 0 ? n.append("select_account", "false") : n.append("select_account", `${e.select_account}`), e.enable_serial_consent === void 0 ? n.append("enable_serial_consent", "false") : n.append(
    "enable_serial_consent",
    `${e.enable_serial_consent}`
  ), e.state && n.append("state", e.state), `${o}?${n.toString()}`;
}
function de(e = {}) {
  const { scope: o = "", onError: n, onSuccess: t, ...i } = e, { scriptLoaded: l } = x(), r = S(v), s = m(!1), d = m(null);
  let a;
  return I(() => {
    var g;
    if (s.value = !1, !l.value) return;
    const u = c(o), p = `openid email profile ${Array.isArray(u) ? u.join(" ") : u}`;
    d.value = ie({
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      client_id: r,
      scope: p,
      ...i
    }), a = (g = window.google) == null ? void 0 : g.accounts.oauth2.initCodeClient({
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      client_id: r,
      scope: p,
      callback: (h) => {
        if (h.error) return n == null ? void 0 : n(h);
        t == null || t(h);
      },
      ...i
    }), s.value = !0;
  }), {
    isReady: w(s),
    login: () => a == null ? void 0 : a.requestCode(),
    codeRequestRedirectUrl: w(d)
  };
}
function ue(e) {
  const {
    disableAutomaticPrompt: o = !1,
    onSuccess: n,
    onError: t,
    onPromptMomentNotification: i,
    onNativeCallback: l,
    onIntermediateIframeCloseCallback: r,
    autoSelect: s,
    loginUri: d,
    cancelOnTapOutside: a,
    promptParentId: u,
    nonce: f,
    context: p,
    stateCookieDomain: g,
    allowedParentOrigin: h,
    itpSupport: L
  } = e || {}, { scriptLoaded: P } = x(), $ = S(v), y = m(!1), q = () => {
    var b;
    return y.value && ((b = window.google) == null ? void 0 : b.accounts.id.prompt(
      (A) => i == null ? void 0 : i(A)
    ));
  };
  return I((b) => {
    var U, G;
    if (y.value = !1, !P.value) return;
    const A = !c(o), E = c(s), j = c(d), V = c(u), D = c(f), M = c(p), H = c(g), J = c(h), K = c(L), N = c(a);
    (U = window.google) == null || U.accounts.id.initialize({
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      client_id: $,
      callback: (_) => {
        if (!_.credential) {
          t == null || t();
          return;
        }
        n == null || n(_);
      },
      native_callback: (_) => {
        l == null || l(_);
      },
      intermediate_iframe_close_callback: () => {
        r == null || r();
      },
      auto_select: E,
      allowed_parent_origin: J,
      context: M,
      itp_support: K,
      login_uri: j,
      nonce: D,
      prompt_parent_id: V,
      state_cookie_domain: H,
      cancel_on_tap_outside: N,
      use_fedcm_for_prompt: !0
    }), y.value = !0, A && ((G = window.google) == null || G.accounts.id.prompt(
      (_) => i == null ? void 0 : i(_)
    )), b(() => {
      var _;
      (_ = window.google) == null || _.accounts.id.cancel();
    });
  }), { isReady: w(y), login: q };
}
function pe(e = {}) {
  const { scope: o = "", onError: n, onSuccess: t, ...i } = e, { scriptLoaded: l } = x(), r = S(v), s = m(!1);
  let d;
  return I(() => {
    var f;
    if (s.value = !1, !l.value) return;
    const a = c(o), u = Array.isArray(a) ? a.join(" ") : a;
    d = (f = window.google) == null ? void 0 : f.accounts.oauth2.initTokenClient({
      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      client_id: r,
      scope: `openid email profile ${u}`,
      callback: (p) => {
        if (p.error) return n == null ? void 0 : n(p);
        t == null || t(p);
      },
      ...i
    }), s.value = !0;
  }), {
    isReady: w(s),
    login: (a) => d == null ? void 0 : d.requestAccessToken(a)
  };
}
function ge(e, o) {
  var n;
  (n = window.google) == null || n.accounts.id.revoke(e, (t) => {
    o == null || o(t);
  });
}
function _e(e) {
  const n = e.split(".")[1].replace(/-/g, "+").replace(/_/g, "/"), t = decodeURIComponent(
    window.atob(n).split("").map((l) => `%${("00" + l.charCodeAt(0).toString(16)).slice(-2)}`).join("")
  ), i = JSON.parse(t);
  return {
    email: i.email,
    email_verified: i.email_verified,
    hd: i.hd,
    family_name: i.family_name,
    given_name: i.given_name,
    name: i.name,
    picture: i.picture,
    id: i.sub,
    iat: i.iat,
    exp: i.exp
  };
}
const ae = "GoogleSignInPlugin", O = (e) => `[${ae}]: ${e}`, me = {
  install(e, o) {
    if (!o)
      throw new Error(
        O("initialize plugin by passing an options object")
      );
    if (!o.clientId || o.clientId && o.clientId.trim().length === 0)
      throw new Error(O("clientId is required to initialize"));
    e.provide(v, o.clientId), e.component("GoogleSignInButton", oe);
  }
};
export {
  oe as GoogleSignInButton,
  ae as PLUGIN_NAME,
  ie as buildCodeRequestRedirectUrl,
  _e as decodeCredential,
  me as default,
  le as hasGrantedAllScopes,
  re as hasGrantedAnyScopes,
  ge as idRevoke,
  se as revokeAccessToken,
  de as useCodeClient,
  x as useGsiScript,
  ue as useOneTap,
  pe as useTokenClient
};