htmlgoogle-signinsveltesveltekit

New google sign in disappears after refreshing page

I followed the guidelines that provided by google to integrate new google sign in. I created HTML using Code generator that provided by Google.

Here I have attached 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 fine for the first time render of the page. enter image description here

When we are refreshing the page using Command+R or by clicking reload icon from the browser, Sign in button disappears. enter image description here

Solution

  • A hard reload is server-side rendered when using SvelteKit. The code is probably incompatible with that or the execution order is wrong.

    Check the console for errors and move code that has to run on the client to onMount. You can also turn off server-side rendering for specific pages using the ssr page option as a last resort.