vue3-google-login/dist/index.esm.js

Add a Login with Google feature to your Vue 3 application using Google Identity Services

import{reactive as e,watch as t,defineComponent as o,useSlots as i,ref as n,onMounted as l,openBlock as c,createElementBlock as r,unref as a,createCommentVNode as d,renderSlot as p}from"vue";var u=Object.freeze({__proto__:null});var s={library:"https://accounts.google.com/gsi/client",defaultButtonConfig:{theme:"outline",size:"large"},scopes:"email profile openid",ssrError:"vue3-google-login cannot be executed on the server side. See here for more info https://devbaji.github.io/vue3-google-login/#no-ssr-support"};const g=e({clientId:null,popupType:"CODE",prompt:!1,autoLogin:!1,idConfiguration:null,buttonConfig:s.defaultButtonConfig,callback:()=>{},error:null}),f=e({apiLoaded:!1,apiLoadIntitited:!1}),b=e=>{try{const t=e.split(".")[1].replace(/-/g,"+").replace(/_/g,"/"),o=decodeURIComponent(atob(t).split("").map((function(e){return"%"+("00"+e.charCodeAt(0).toString(16)).slice(-2)})).join(""));return JSON.parse(o)}catch(e){throw"JWT provided is invalid"}},h=()=>new Promise(((e,t)=>{if("undefined"!=typeof window){if(!f.apiLoadIntitited){const o=document.createElement("script");f.apiLoadIntitited=!0,o.addEventListener("load",(()=>{f.apiLoaded=!0,e(window.google)})),o.addEventListener("error",(()=>{t("Failed to load the Google 3P Authorization JavaScript Library.")})),o.src=s.library,o.async=!0,o.defer=!0,document.head.appendChild(o)}}else t(s.ssrError)})),w=e=>{f.apiLoadIntitited?f.apiLoaded?e(window.google):t((()=>f.apiLoaded),(t=>{t&&e(window.google)})):h().then((t=>{e(t)})).catch((e=>{throw e}))},m=(e,t,o,i)=>{if(!e.client_id)throw new Error("Prop client id required since plugin is not initialized with a client id");w((()=>{((e,t,o,i,n)=>{if(n){const t=e.callback;e.callback=e=>{e.credential?t&&t(e):n(e)}}window.google.accounts.id.initialize(e);const l=t.value;l&&!i&&window.google.accounts.id.renderButton(l,o)})(e,t,o.buttonConfig,i,o.error),o.prompt&&y({clientId:o.clientId,callback:o.callback,error:o.error,autoLogin:o.autoLogin})}))},I=e=>new Promise(((t,o)=>{w((i=>{if(!(e&&e.clientId||g.clientId))throw new Error("clientId is required since the plugin is not initialized with a Client Id");i.accounts.oauth2.initCodeClient({client_id:e&&e.clientId||g.clientId||"",scope:s.scopes,ux_mode:"popup",callback:e=>{e.code?t(e):o(e)},error_callback:e=>{o(e)}}).requestCode()}))})),_=e=>new Promise(((t,o)=>{w((i=>{if(!(e&&e.clientId||g.clientId))throw new Error("clientId is required since the plugin is not initialized with a Client Id");i.accounts.oauth2.initTokenClient({client_id:e&&e.clientId||g.clientId||"",scope:s.scopes,callback:e=>{e.access_token?t(e):o(e)},error_callback:e=>{o(e)}}).requestAccessToken()}))})),y=e=>{if(!e&&(e={}),!e.clientId&&!g.clientId)throw new Error("clientId is required");const t={use_fedcm_for_prompt:!0};return e.clientId&&(t.client_id=e.clientId),!e.clientId&&g.clientId&&(t.client_id=g.clientId),e.context&&(t.context=e.context),null!=e.autoLogin&&(t.auto_select=e.autoLogin),null!=e.cancelOnTapOutside&&(t.cancel_on_tap_outside=e.cancelOnTapOutside),new Promise(((o,i)=>{t.callback=t=>{e&&e.callback&&e.callback(t),t.credential?o(t):i(t)},w((e=>{e.accounts.id.initialize(t),e.accounts.id.prompt()}))}))},k=()=>{w((e=>{e.accounts.id.disableAutoSelect()}))};var C=o({__name:"GoogleLogin",props:{clientId:{type:String,required:!1},prompt:{type:Boolean,required:!1,default:!1},autoLogin:{type:Boolean,required:!1,default:!1},popupType:{type:String,required:!1},idConfiguration:{type:Object,required:!1},buttonConfig:{type:Object,required:!1},callback:{type:Function,required:!1},error:{type:Function,required:!1}},setup(e){if(!("undefined"!=typeof window))throw new Error(s.ssrError);const t=!!i().default,o=e,u=((e,t)=>{const o={...e};for(const e in t)void 0!==t[e]&&null!==t[e]&&(o[e]=t[e]);return o})(g,o),f={client_id:u.clientId||null,auto_select:u.autoLogin||!1,callback:u.callback,...u.idConfiguration},b=n();return l((()=>{m(f,b,u,t),o.popupType&&!t&&console.warn("Option 'popupType' is ignored since a slot which act as a custom login button was not found!!!")})),(e,o)=>(c(),r("div",{class:"g-btn-wrapper",onClick:o[0]||(o[0]=e=>a(t)&&void("TOKEN"===a(u).popupType?_({clientId:u.clientId}).then((e=>{u.callback&&u.callback(e)})).catch((e=>{u.error&&u.error(e)})):I({clientId:u.clientId}).then((e=>{u.callback&&u.callback(e)})).catch((e=>{u.error&&u.error(e)}))))},[a(t)?d("v-if",!0):(c(),r("span",{key:0,ref_key:"buttonRef",ref:b,class:"g-btn"},null,512)),p(e.$slots,"default")]))}});!function(e,t){void 0===t&&(t={});var o=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.g-btn-wrapper[data-v-5e610566] {\n  display: inline-block;\n}\n"),C.__scopeId="data-v-5e610566",C.__file="src/plugin/GoogleLogin.vue";var L={install:(e,t)=>{t&&(e=>{e.clientId&&(g.clientId=e.clientId),e.popupType&&(g.popupType=e.popupType),null!=e.prompt&&(g.prompt=e.prompt),null!=e.autoLogin&&(g.autoLogin=e.autoLogin),e.idConfiguration&&(g.idConfiguration=e.idConfiguration),e.buttonConfig&&(g.buttonConfig=e.buttonConfig),e.callback&&(g.callback=e.callback)})(t),h().then((()=>{if(t.clientId){const e={client_id:t.clientId,auto_select:!0===t.autoLogin,callback:t.callback,use_fedcm_for_prompt:!0,...t.idConfiguration};window.google.accounts.id.initialize(e),t.prompt&&window.google.accounts.id.prompt()}})).catch((e=>{if(!t.error)throw e;t.error(e)})),e.component("GoogleLogin",C)}};export{u as CallbackTypes,C as GoogleLogin,b as decodeCredential,L as default,I as googleAuthCodeLogin,k as googleLogout,y as googleOneTap,w as googleSdkLoaded,_ as googleTokenLogin};