Integrate Google Sign-in with Nuxt 3.

nuxt-3-gsi.md

Integrate Google Sign-in (Popup method) with Nuxt.js 3 - Works in Incognito mode as well

Add GSI client in your nuxt.config.ts

export default defineNuxtConfig({
  ...
  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)

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

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

<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("googleButton"),
      { 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>

google is not defined this error is populating , when I used this code.

google is not defined this error is populating , when I used this code.

Hi @sarbjit-rnd , if you're using Nuxt 3, you might want to install @types/google.accounts by doing npm i @types/google.accounts first and then use it in your component as /// <reference types='google.accounts' />

example:

<script lang="ts" setup>
/// <reference types='google.accounts' />

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("googleButton"),
      { theme: "outline", size: "large" } // customization attributes
    );
    google.accounts.id.prompt(); // also display the One Tap dialog
  }
})

const handleCredentialResponse = (response) => {
  // call your backend API here
  // the token can be accessed as: response.credential
}
</script>

I hope this helps.

thanks for Reply.

…

On Tue, Mar 14, 2023 at 12:00 PM Raj Kumar Shrestha < ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ google is not defined this error is populating , when I used this code. Hi @sarbjit-rnd <https://github.com/sarbjit-rnd> , if you're using Nuxt 3, you might want to install @types/google.accounts by doing npm i @types/google.accounts first and then use it in your component as /// <reference types='google.accounts' /> example: <script lang="ts" setup>/// <reference types='google.accounts' />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("googleButton"), { theme: "outline", size: "large" } // customization attributes ); google.accounts.id.prompt(); // also display the One Tap dialog }})const handleCredentialResponse = (response) => { // call your backend API here // the token can be accessed as: response.credential}</script> I hope this helps. — Reply to this email directly, view it on GitHub <https://gist.github.com/eed9d2f199ac4024e029e3012ff2829b#gistcomment-4501867> or unsubscribe <https://github.com/notifications/unsubscribe-auth/AH35NLDLBL4MLNM6TOJ37NTW4AGAVBFKMF2HI4TJMJ2XIZLTSKBKK5TBNR2WLJDHNFZXJJDOMFWWLK3UNBZGKYLEL52HS4DFQKSXMYLMOVS2I5DSOVS2I3TBNVS3W5DIOJSWCZC7OBQXE5DJMNUXAYLOORPWCY3UNF3GS5DZVRZXKYTKMVRXIX3UPFYGLK2HNFZXIQ3PNVWWK3TUUZ2G64DJMNZZDAVEOR4XAZNEM5UXG5FFOZQWY5LFVEYTCOBWHEYTQMZSU52HE2LHM5SXFJTDOJSWC5DF> . You are receiving this email because you were mentioned. Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> .

google is not defined this error is populating , when I used this code.

Hi @sarbjit-rnd , if you're using Nuxt 3, you might want to install @types/google.accounts by doing npm i @types/google.accounts first and then use it in your component as /// <reference types='google.accounts' />

example:

<script lang="ts" setup>
/// <reference types='google.accounts' />

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("googleButton"),
      { theme: "outline", size: "large" } // customization attributes
    );
    google.accounts.id.prompt(); // also display the One Tap dialog
  }
})

const handleCredentialResponse = (response) => {
  // call your backend API here
  // the token can be accessed as: response.credential
}
</script>

I hope this helps.

The solution does not render the button. I suspect it is because the window object is not present on the client side.

const googleCallback = (response) => {
  const { credential } = response;
  emit("signedIn", credential);
};

watchEffect(() => {
  if (process.client) {
    if (window?.google) {
      window.google.accounts.id.initialize({
        client_id: config.public.GOOGLE_CLIENT_ID,
        callback: googleCallback,
      });

      window.google.accounts.id.renderButton(
        document.getElementById("buttonDiv"),
        {
          theme: "outline",
          size: "large",
          width: "384",
          text: props.text,
        }
      );
      window.google.accounts.id.prompt();
    }
  }
});

I think the code can also be written inside onMounted without the window object. Something I've implemented myself in one of my codes.

<script lang="ts" setup>
  /// <reference types='google.accounts' />
  onMounted(() => {
    google.accounts.id.initialize({
      client_id: GOOGLE_CLIENT_ID,
      callback: handleCredentialResponse,
      context: 'signin'
    })
    google.accounts.id.renderButton(
      document.getElementById("googleButton"), {
      type: 'standard',
      size: 'large',
      text: 'signin_with',
      shape: 'pill',
      logo_alignment: 'left',
      width: '250'
    }
    )
  })
  const handleCredentialResponse = (res) => {
    // login function
  }
</script>

onMounted(() => {
  setTimeout(() => {
    // let gsBtn = document.getElementById("googleButton")
    // if (gsBtn == null) return
     ...
  }, 0.5);
  })

I use this workaround...