Adventures in Svelte

• 24 March 2024
• svelte

Google Auth for Svelte #

I had lots of issues with the google button always refreshing on Svelte.
The trick is to use the google button rendering with javascript.

https://developers.google.com/identity/gsi/web/guides/display-button

Svelte Component

<script lang="ts">
  import { onMount } from 'svelte';

  let canvas: any;
  onMount(() => {
    google.accounts.id.initialize({
      client_id: "[clientId].apps.googleusercontent.com",
      callback: (response) => {
        console.log(response);
      }
    });

    google.accounts.id.renderButton(canvas, {
      width: '220',
      theme: 'outline',
      size: 'large',
      type: 'standard',
      text: 'signin_with',
      shape: 'rectangular',
      logo_alignment: 'left',
    });
  });
</script>

<svelte:head>
    <script src="https://accounts.google.com/gsi/client" ></script>
</svelte:head>

<div>
    <div class="buttonDiv"
      bind:this={canvas}>
    </div>
</div>

• Previous: AWS Stuff that I Keep Forgetting About and they Keep Biting Me