Skip to content

Instantly share code, notes, and snippets.

@srestraj

srestraj/nuxt-3-gsi.md

Last active September 14, 2024 10:22
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save srestraj/eed9d2f199ac4024e029e3012ff2829b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save srestraj/eed9d2f199ac4024e029e3012ff2829b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. srestraj revised this gist Oct 4, 2022. No changes.
  2. srestraj revised this gist Oct 4, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion nuxt-3-gsi.md
    View file
    Original file line number Diff line number Diff line change
    @@ -43,7 +43,7 @@ onMounted(() => {
    callback: handleCredentialResponse, //method to run after user clicks the Google sign in button
    });
    google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
    document.getElementById("googleButton"),
    { theme: "outline", size: "large" } // customization attributes
    );
    google.accounts.id.prompt(); // also display the One Tap dialog
  3. srestraj revised this gist Oct 4, 2022. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions nuxt-3-gsi.md
    View file
    Original file line number Diff line number Diff line change
    @@ -4,7 +4,7 @@ Integrate Google Sign-in (Popup method) with Nuxt.js 3 - Works in Incognito mode

    ```typescript

    export default {
    export default defineNuxtConfig({
    ...
    app: {
    head: {
    @@ -18,7 +18,7 @@ export default {
    }
    }
    ...
    }
    });

    ```

  4. srestraj created this gist Oct 4, 2022.
    58 changes: 58 additions & 0 deletions nuxt-3-gsi.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,58 @@
    Integrate Google Sign-in (Popup method) with Nuxt.js 3 - Works in Incognito mode as well

    ##### Add GSI client in your `nuxt.config.ts`

    ```typescript

    export default {
    ...
    app: {
    head: {
    ...
    script: [
    {
    src: 'https://accounts.google.com/gsi/client',
    },
    ],
    ...
    }
    }
    ...
    }

    ```

    ##### In your login page or component, add the Google Button `div` (this will be populated by the rendered button)

    ```vue
    <div id="googleButton"></div>
    ```

    ##### Inside your mounted hook, initialize the Google Sign in and render the Sign in button

    ```vue
    <template>
    <div id="googleButton"></div>
    </template>
    <script lang="ts" setup>
    onMounted(() => {
    window.onload = () => {
    google.accounts.id.initialize({
    client_id: 'YOUR_CLIENT_ID',
    callback: handleCredentialResponse, //method to run after user clicks the Google sign in button
    });
    google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
    { theme: "outline", size: "large" } // customization attributes
    );
    google.accounts.id.prompt(); // also display the One Tap dialog
    }
    })
    function handleCredentialResponse(response) {
    // call your backend API here
    // the token can be accessed as: response.credential
    }
    </script>
    ```