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>