I am trying to follow Google Drive and is using this guide: https://developers.google.com/drive/api/v3/quickstart/js
But i want to implement it in Svelte, but i have a problem.
<script async defer src="https://apis.google.com/js/api.js"
onload="this.onload=function(){};handleClientLoad()"
onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
how do i use this code in Svelte?
I got it working with something like this:
<script>
import { googleClient } from '$services/google-service'
function handleClientLoad() {
gapi.load('client:auth2', googleClient)
}
</script>
<svelte:head>
<script async defer src="https://apis.google.com/js/api.js" on:load={handleClientLoad}></script>
</svelte:head>
google-service:
import { setCurrentUser } from './auth-service'
const SCOPES =
'https://www.googleapis.com/auth/fitness.activity.read https://www.googleapis.com/auth/fitness.activity.write https://www.googleapis.com/auth/fitness.nutrition.read https://www.googleapis.com/auth/fitness.nutrition.write'
export async function googleClient() {
await gapi.client.init({
apiKey: import.meta.env.VITE_GOOGLE_API_KEY as string,
clientId: import.meta.env.VITE_GOOGLE_CLIENT_ID as string,
scope: SCOPES
})
setCurrentUser(gapi.auth2.getAuthInstance().isSignedIn.get())
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen((e) => setCurrentUser(e))
}
auth-service:
import { writable } from 'svelte/store'
export interface User {
email: string
name: string
imageUrl: string
}
export const currentUser = writable<User>()
export function handelAuthIn() {
gapi.auth2.getAuthInstance().signIn()
}
export function handleSignOut() {
gapi.auth2.getAuthInstance().signOut()
}
export function setCurrentUser(isSignedIn: boolean) {
if (isSignedIn) {
const profile = gapi.auth2.getAuthInstance().currentUser.get().getBasicProfile()
currentUser.set({
email: profile.getEmail(),
name: profile.getName(),
imageUrl: profile.getImageUrl()
})
} else {
currentUser.set(undefined)
}
}