vue3-google-login
Version:
Add a Login with Google feature to your Vue 3 application using Google Identity Services
2 lines (1 loc) • 6.06 kB
JavaScript
!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("vue")):"function"==typeof define&&define.amd?define(["exports","vue"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self).Vue3GoogleLogin={},e.Vue)}(this,(function(e,o){"use strict";var t=Object.freeze({__proto__:null});var n={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 i=o.reactive({clientId:null,popupType:"CODE",prompt:!1,autoLogin:!1,idConfiguration:null,buttonConfig:n.defaultButtonConfig,callback:()=>{},error:null}),l=o.reactive({apiLoaded:!1,apiLoadIntitited:!1}),c=()=>new Promise(((e,o)=>{if("undefined"!=typeof window){if(!l.apiLoadIntitited){const t=document.createElement("script");l.apiLoadIntitited=!0,t.addEventListener("load",(()=>{l.apiLoaded=!0,e(window.google)})),t.addEventListener("error",(()=>{o("Failed to load the Google 3P Authorization JavaScript Library.")})),t.src=n.library,t.async=!0,t.defer=!0,document.head.appendChild(t)}}else o(n.ssrError)})),r=e=>{l.apiLoadIntitited?l.apiLoaded?e(window.google):o.watch((()=>l.apiLoaded),(o=>{o&&e(window.google)})):c().then((o=>{e(o)})).catch((e=>{throw e}))},a=(e,o,t,n)=>{if(!e.client_id)throw new Error("Prop client id required since plugin is not initialized with a client id");r((()=>{((e,o,t,n,i)=>{if(i){const o=e.callback;e.callback=e=>{e.credential?o&&o(e):i(e)}}window.google.accounts.id.initialize(e);const l=o.value;l&&!n&&window.google.accounts.id.renderButton(l,t)})(e,o,t.buttonConfig,n,t.error),t.prompt&&p({clientId:t.clientId,callback:t.callback,error:t.error,autoLogin:t.autoLogin})}))},d=e=>new Promise(((o,t)=>{r((l=>{if(!(e&&e.clientId||i.clientId))throw new Error("clientId is required since the plugin is not initialized with a Client Id");l.accounts.oauth2.initCodeClient({client_id:e&&e.clientId||i.clientId||"",scope:n.scopes,ux_mode:"popup",callback:e=>{e.code?o(e):t(e)},error_callback:e=>{t(e)}}).requestCode()}))})),u=e=>new Promise(((o,t)=>{r((l=>{if(!(e&&e.clientId||i.clientId))throw new Error("clientId is required since the plugin is not initialized with a Client Id");l.accounts.oauth2.initTokenClient({client_id:e&&e.clientId||i.clientId||"",scope:n.scopes,callback:e=>{e.access_token?o(e):t(e)},error_callback:e=>{t(e)}}).requestAccessToken()}))})),p=e=>{if(!e&&(e={}),!e.clientId&&!i.clientId)throw new Error("clientId is required");const o={use_fedcm_for_prompt:!0};return e.clientId&&(o.client_id=e.clientId),!e.clientId&&i.clientId&&(o.client_id=i.clientId),e.context&&(o.context=e.context),null!=e.autoLogin&&(o.auto_select=e.autoLogin),null!=e.cancelOnTapOutside&&(o.cancel_on_tap_outside=e.cancelOnTapOutside),new Promise(((t,n)=>{o.callback=o=>{e&&e.callback&&e.callback(o),o.credential?t(o):n(o)},r((e=>{e.accounts.id.initialize(o),e.accounts.id.prompt()}))}))};var s=o.defineComponent({__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(n.ssrError);const t=!!o.useSlots().default,l=e,c=((e,o)=>{const t={...e};for(const e in o)void 0!==o[e]&&null!==o[e]&&(t[e]=o[e]);return t})(i,l),r={client_id:c.clientId||null,auto_select:c.autoLogin||!1,callback:c.callback,...c.idConfiguration},p=o.ref();return o.onMounted((()=>{a(r,p,c,t),l.popupType&&!t&&console.warn("Option 'popupType' is ignored since a slot which act as a custom login button was not found!!!")})),(e,n)=>(o.openBlock(),o.createElementBlock("div",{class:"g-btn-wrapper",onClick:n[0]||(n[0]=e=>o.unref(t)&&void("TOKEN"===o.unref(c).popupType?u({clientId:c.clientId}).then((e=>{c.callback&&c.callback(e)})).catch((e=>{c.error&&c.error(e)})):d({clientId:c.clientId}).then((e=>{c.callback&&c.callback(e)})).catch((e=>{c.error&&c.error(e)}))))},[o.unref(t)?o.createCommentVNode("v-if",!0):(o.openBlock(),o.createElementBlock("span",{key:0,ref_key:"buttonRef",ref:p,class:"g-btn"},null,512)),o.renderSlot(e.$slots,"default")]))}});!function(e,o){void 0===o&&(o={});var t=o.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.g-btn-wrapper[data-v-5e610566] {\n display: inline-block;\n}\n"),s.__scopeId="data-v-5e610566",s.__file="src/plugin/GoogleLogin.vue";var g={install:(e,o)=>{o&&(e=>{e.clientId&&(i.clientId=e.clientId),e.popupType&&(i.popupType=e.popupType),null!=e.prompt&&(i.prompt=e.prompt),null!=e.autoLogin&&(i.autoLogin=e.autoLogin),e.idConfiguration&&(i.idConfiguration=e.idConfiguration),e.buttonConfig&&(i.buttonConfig=e.buttonConfig),e.callback&&(i.callback=e.callback)})(o),c().then((()=>{if(o.clientId){const e={client_id:o.clientId,auto_select:!0===o.autoLogin,callback:o.callback,use_fedcm_for_prompt:!0,...o.idConfiguration};window.google.accounts.id.initialize(e),o.prompt&&window.google.accounts.id.prompt()}})).catch((e=>{if(!o.error)throw e;o.error(e)})),e.component("GoogleLogin",s)}};e.CallbackTypes=t,e.GoogleLogin=s,e.decodeCredential=e=>{try{const o=e.split(".")[1].replace(/-/g,"+").replace(/_/g,"/"),t=decodeURIComponent(atob(o).split("").map((function(e){return"%"+("00"+e.charCodeAt(0).toString(16)).slice(-2)})).join(""));return JSON.parse(t)}catch(e){throw"JWT provided is invalid"}},e.default=g,e.googleAuthCodeLogin=d,e.googleLogout=()=>{r((e=>{e.accounts.id.disableAutoSelect()}))},e.googleOneTap=p,e.googleSdkLoaded=r,e.googleTokenLogin=u,Object.defineProperty(e,"__esModule",{value:!0})}));