After refreshing the page, the new Google login option disappears

Question

I followed the guidelines provided by Google to integrate the new Google login. I created the HTML using the code generator provided by Google.

Here I attach the complete code

<svelte:head>
    <title>Home</title>
    <meta name="description" content="Svelte demo app" />
</svelte:head>

<section>
    <div class="h-screen">
        <div
            id="g_id_onload"
            data-client_id="534101779287-bm07dc8v4ln4kulqbql61nsglcku74vg.apps.googleusercontent.com"
            data-context="use"
            data-ux_mode="redirect"
            data-login_uri="http://localhost:5173/auth/callback"
        />
        <div class="bg-red-300 h-80">
            <div
                class="g_id_signin"
                data-type="standard"
                data-shape="rectangular"
                data-theme="outline"
                data-text="signin_with"
                data-size="medium"
                data-logo_alignment="left"
                data-width="180"
            />
        </div>
    </div>
</section>

It works great the first time the page is rendered.

When we refresh the page using Command R or click the reload icon in the browser, the login button disappears.

Answer 1

Now I created the component using Javascript and here I added the answer.

I declared google as a global variable in app.d.ts

// See https://kit.svelte.dev/docs/types#app
    // for information about these interfaces
    declare global {
        const google: any;
        namespace App {
        }
    }
export {};

I created a svelte file to create the svelte component for the login button

let canvas: any; //Created a variable to optain a reference to rendered div element
    

In onMount

onMount(async () => {   
    google.accounts.id.initialize({
                client_id: "534101779287-bm07dc8v4ln4kulqbql61nsglcku74vg.apps.googleusercontent.com",
                ux_mode: "redirect",
                context: "use",
                login_uri: "http://localhost:5173/auth/callback"
            });
            google.accounts.id.renderButton(canvas, {
                width: '220',      
                theme: 'outline',
                size: 'large',
                type: 'standard',
                text: 'signin_with',
                shape: 'rectangular',
                logo_alignment: 'left',
                  
            });

    });

This code will work in initial render, hard reload (Command shift R) and reload (Command R)

Answer 2

When using SvelteKit, hard reloading is rendered server-side. The code might be incompatible with this or be executed in the wrong order.

Check the console for errors and move the code that must run on the client to onMount< /a>. You can also use ssr Page Options Turn off server-side rendering for specific pages as a last resort.