svelte_component_google_button_custom.svelte

<script lang="ts">
    import {Button, ButtonGroup, Input, InputAddon, Spinner} from "flowbite-svelte";
    import {onMount} from "svelte";

    export let clientId = 'xxxxx.apps.googleusercontent.com';

    let googleButtonWrapper: any;
    let loading = false;
    export let error;


    onMount(() => {
        window.google.accounts.id.initialize({
            client_id: clientId,
            ux_mode: "popup",
            callback: googleLoginCallback,
        });

        googleButtonWrapper = createFakeGoogleWrapper();
    });

    function createFakeGoogleWrapper() {
        const googleLoginWrapper = document.createElement("div");
        googleLoginWrapper.style.display = "none";
        googleLoginWrapper.classList.add("custom-google-button");

        document.body.appendChild(googleLoginWrapper);

        google.accounts.id.renderButton(googleLoginWrapper, {
            type: "icon",
            width: "200",
        });

        return googleLoginWrapper.querySelector("div[role=button]");
    }

    function openGoogleForm(wrapper) {
        if (loading) return;

        loading = true;
        googleButtonWrapper.click();
    }

    const googleLoginCallback = async (response: any) => {
        if (!response.credential){
            loading = false;
            error = 'Une erreur est survenue';
            return;
        }

        const idToken = response.credential;

        const auth = await fetch('/oauth/google', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({idToken})
        });

        console.log(auth)
    };

</script>

<ButtonGroup class="w-full">
    <InputAddon>
        <img alt="google-icon" src="https://static-00.iconduck.com/assets.00/google-icon-2048x2048-czn3g8x8.png"
             class="h-5 w-6"/>
    </InputAddon>
    <Button class="w-full" on:click={openGoogleForm} disabled={loading}>
        {#if !loading}
            <span>Se connecter avec Google</span>
        {:else}
            <Spinner class="mr-3" size="4"/>
            Chargement...
        {/if}
    </Button>
</ButtonGroup>