UNPKG

vue3-google-login

Version:

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

2 lines (1 loc) 5.87 kB
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),o=Object.freeze({__proto__:null});var t={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 n=e.reactive({clientId:null,popupType:"CODE",prompt:!1,autoLogin:!1,idConfiguration:null,buttonConfig:t.defaultButtonConfig,callback:()=>{},error:null}),i=e.reactive({apiLoaded:!1,apiLoadIntitited:!1}),r=()=>new Promise(((e,o)=>{if("undefined"!=typeof window){if(!i.apiLoadIntitited){const n=document.createElement("script");i.apiLoadIntitited=!0,n.addEventListener("load",(()=>{i.apiLoaded=!0,e(window.google)})),n.addEventListener("error",(()=>{o("Failed to load the Google 3P Authorization JavaScript Library.")})),n.src=t.library,n.async=!0,n.defer=!0,document.head.appendChild(n)}}else o(t.ssrError)})),l=o=>{i.apiLoadIntitited?i.apiLoaded?o(window.google):e.watch((()=>i.apiLoaded),(e=>{e&&o(window.google)})):r().then((e=>{o(e)})).catch((e=>{throw e}))},c=(e,o,t,n)=>{if(!e.client_id)throw new Error("Prop client id required since plugin is not initialized with a client id");l((()=>{((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 r=o.value;r&&!n&&window.google.accounts.id.renderButton(r,t)})(e,o,t.buttonConfig,n,t.error),t.prompt&&p({clientId:t.clientId,callback:t.callback,error:t.error,autoLogin:t.autoLogin})}))},a=e=>new Promise(((o,i)=>{l((r=>{if(!(e&&e.clientId||n.clientId))throw new Error("clientId is required since the plugin is not initialized with a Client Id");r.accounts.oauth2.initCodeClient({client_id:e&&e.clientId||n.clientId||"",scope:t.scopes,ux_mode:"popup",callback:e=>{e.code?o(e):i(e)},error_callback:e=>{i(e)}}).requestCode()}))})),d=e=>new Promise(((o,i)=>{l((r=>{if(!(e&&e.clientId||n.clientId))throw new Error("clientId is required since the plugin is not initialized with a Client Id");r.accounts.oauth2.initTokenClient({client_id:e&&e.clientId||n.clientId||"",scope:t.scopes,callback:e=>{e.access_token?o(e):i(e)},error_callback:e=>{i(e)}}).requestAccessToken()}))})),p=e=>{if(!e&&(e={}),!e.clientId&&!n.clientId)throw new Error("clientId is required");const o={use_fedcm_for_prompt:!0};return e.clientId&&(o.client_id=e.clientId),!e.clientId&&n.clientId&&(o.client_id=n.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)},l((e=>{e.accounts.id.initialize(o),e.accounts.id.prompt()}))}))};var u=e.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(o){if(!("undefined"!=typeof window))throw new Error(t.ssrError);const i=!!e.useSlots().default,r=o,l=((e,o)=>{const t={...e};for(const e in o)void 0!==o[e]&&null!==o[e]&&(t[e]=o[e]);return t})(n,r),p={client_id:l.clientId||null,auto_select:l.autoLogin||!1,callback:l.callback,...l.idConfiguration},u=e.ref();return e.onMounted((()=>{c(p,u,l,i),r.popupType&&!i&&console.warn("Option 'popupType' is ignored since a slot which act as a custom login button was not found!!!")})),(o,t)=>(e.openBlock(),e.createElementBlock("div",{class:"g-btn-wrapper",onClick:t[0]||(t[0]=o=>e.unref(i)&&void("TOKEN"===e.unref(l).popupType?d({clientId:l.clientId}).then((e=>{l.callback&&l.callback(e)})).catch((e=>{l.error&&l.error(e)})):a({clientId:l.clientId}).then((e=>{l.callback&&l.callback(e)})).catch((e=>{l.error&&l.error(e)}))))},[e.unref(i)?e.createCommentVNode("v-if",!0):(e.openBlock(),e.createElementBlock("span",{key:0,ref_key:"buttonRef",ref:u,class:"g-btn"},null,512)),e.renderSlot(o.$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"),u.__scopeId="data-v-5e610566",u.__file="src/plugin/GoogleLogin.vue";var s={install:(e,o)=>{o&&(e=>{e.clientId&&(n.clientId=e.clientId),e.popupType&&(n.popupType=e.popupType),null!=e.prompt&&(n.prompt=e.prompt),null!=e.autoLogin&&(n.autoLogin=e.autoLogin),e.idConfiguration&&(n.idConfiguration=e.idConfiguration),e.buttonConfig&&(n.buttonConfig=e.buttonConfig),e.callback&&(n.callback=e.callback)})(o),r().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",u)}};exports.CallbackTypes=o,exports.GoogleLogin=u,exports.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"}},exports.default=s,exports.googleAuthCodeLogin=a,exports.googleLogout=()=>{l((e=>{e.accounts.id.disableAutoSelect()}))},exports.googleOneTap=p,exports.googleSdkLoaded=l,exports.googleTokenLogin=d;