1

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

MathankumarK
  • 2,717
  • 1
  • 17
  • 34
  • You might want to include how you added any JS/scripts if you want more specific answers. – H.B. Feb 04 '23 at 08:05
  • 1
    Does this answer your question? [Why does the Sign In With Google button disappear after I render it the second time?](https://stackoverflow.com/questions/70993933/why-does-the-sign-in-with-google-button-disappear-after-i-render-it-the-second-t) – user1844933 Feb 04 '23 at 08:21
  • 1
    @user1844933 While this might be the same or a similar issue, some of the solutions are fairly React-specific. It would be nice to have a canonical solution for Svelte/SvelteKit as well. – H.B. Feb 04 '23 at 08:58

2 Answers2

5

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.

H.B.
  • 166,899
  • 29
  • 327
  • 400
  • There is no console error, for hard reload it's working fine, It's not working in reload – MathankumarK Feb 06 '23 at 10:47
  • A hard reload is what you claimed to have done, `Ctrl + R`, as opposed to a client-side load caused by navigation. – H.B. Feb 06 '23 at 11:02
  • Above code is working command + shift + R (Hard reload) working, command + R (Reload)not working, and when we create the component using Java script working for client side (all the time). Code that I shared on the question created from google html generator not working (Height is zero when we are reloading) – MathankumarK Feb 06 '23 at 11:18
  • Then you should obviously look into caching/execution order issues. Also, as I already noted on the question: Show the entirety of the code if you want better answers. – H.B. Feb 06 '23 at 11:35
  • I added an answer using Javascript code that works now – MathankumarK Feb 06 '23 at 12:00
1

For now I created component using Javascript, Here I have added the answer.

I declared google as 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 a svelte component for sign in button

let canvas: any; //Created a variable to optain a reference to rendered div element
    <div class="g_id_signin"
bind:this={canvas}/>

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)

MathankumarK
  • 2,717
  • 1
  • 17
  • 34