Usage with Svelte
In a Svelte store:
import { GoogleSignInController } from '@dtinth/google-sign-in-controller'
import type { UserInfo } from '@dtinth/google-sign-in-controller'
import { readable } from 'svelte/store'
export const signInController = new GoogleSignInController(
'347735770628-l928d9ddaf33p8bvsr90aos4mmmacrgq.apps.googleusercontent.com',
)
export const currentUserInfo = readable<UserInfo | null>(
signInController.getUserInfo(),
(set) => {
set(signInController.getUserInfo())
return signInController.onCurrentUserChanged(() => {
set(signInController.getUserInfo())
})
},
)
Object.assign(window, { signInController })
In a Svelte component:
<script lang="ts">
import { signInController, currentUserInfo } from './GoogleSignIn'
</script>
<main class="p-6">
{#if $currentUserInfo}
<button on:click={() => confirm('Sign out?') && signInController.signOut()}>
{$currentUserInfo.name}
</button>
{:else}
<button on:click={() => signInController.signIn()}>
Sign in with Google
</button>
{/if}
</main>