I'm trying to authorize some Google APIs using the new Google Identity Services JavaScript SDK in my Vue / Quasar / TypeScript app.
According to the documentation, I have loaded the Google 3P Authorization JavaScript library in the header of the index.template.HTML
file as follows:
<script src="https://accounts.google.com/gsi/client" onload="console.log('TODO: add onload function')"> </script>
Now in the Vue component I have this:
<template> <v-btn class="q-ma-md" design="alpha" label="Connect Google Calendar" @click="handleGoogleCalendarConnect" /> </template> <script setup lang="ts"> import VBtn from 'src/components/VBtn.vue'; const client = google.accounts.oauth2.initCodeClient({ // <-- TypeScript Error Here client_id: 'MY_CLIENT_API_KEY_GOES_HERE', scope: 'https://www.googleapis.com/auth/calendar.readonly', ux_mode: 'popup', callback: (response: any) => { const xhr = new XMLHttpRequest(); xhr.open('POST', code_receiver_uri, true); xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Set custom header for CRSF xhr.setRequestHeader('X-Requested-With', 'XmlHttpRequest'); xhr.onload = function () { console.log('Auth code response: ' + xhr.responseText); }; xhr.send('code=' + code); }, }); const handleGoogleCalendarConnect = () => { client.requestCode(); }; </script>
But I'm getting a TypeScript error on "google" that reads: Cannot find name 'google'. ts(2304)
Maybe it's because I'm missing a type from the Google Identity Services JavaScript SDK? If so, where can I find them?
Or the problem could be something else?
Find the correct type of package:
npm me@types/google.accounts
This will eliminate the error.