Integrate Google Sign-in (Popup method) with Nuxt.js - Works in Incognito mode as well
Nuxt 3 version here.
export default {
...
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>
<template>
<div id="googleButton"></div>
</template>
<script>
export default {
mounted() {
// initialize Google Sign in
google.accounts.id.initialize({
client_id: 'YOUR_CLIENT_ID',
callback: this.handleCredentialResponse, //method to run after user clicks the Google sign in button
context: 'signin'
})
// render button
google.accounts.id.renderButton(
document.getElementById('googleButton'),
{
type: 'standard',
size: 'large',
text: 'signin_with',
shape: 'rectangular',
logo_alignment: 'center',
width: 250
}
)
},
methods: {
handleCredentialResponse(response) {
// call your backend API here
// the token can be accessed as: response.credential
}
}
}
</script>
If you also want the Google One-tap sign in, use the following inside the component or page you want to display one-tap.
<template>
...
</template>
<script>
export default {
mounted() {
google.accounts.id.initialize({
client_id: 'YOUR_CLIENT_ID',
callback: this.handleCredentialResponse,
context: 'signin',
})
google.accounts.id.prompt()
},
methods: {
handleCredentialResponse(response) {
// handle API calls same as above
}
}
}
</script>
This is because you're trying to access the "google" property before it's injected and accessible. You need to wait for Google SDK to load so the "google" property is injected into the window object.
Can you include a screenshot of your implementation or create a reproduction in StackBlitz or Codepen?