How to correctly put google sign-in code in a nuxt component - google-oauth

Question

Google provides a friendly .html code in https://developers.google.com/identity/sign-in/web
I tried this code in a .html file and it works totally fine.
After the user is signed in, onSignin would be revoked every time the page is loaded, which means user info will be logged in console
But if I use this code in a nuxt component, only the sign-in process would be run, onSignIn function is not revoked, and no errors were shown.
Here's my code:
<template>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
</template>
<script>
/* eslint-disable */
function onSignIn(googleUser) {
// Useful data for your client-side scripts:
var profile = googleUser.getBasicProfile()
console.log('ID: ' + profile.getId()) // Don't send this directly to your server!
console.log('Full Name: ' + profile.getName())
console.log('Given Name: ' + profile.getGivenName())
console.log('Family Name: ' + profile.getFamilyName())
console.log('Image URL: ' + profile.getImageUrl())
console.log('Email: ' + profile.getEmail())
// The ID token you need to pass to your backend:
var id_token = googleUser.getAuthResponse().id_token
console.log('ID Token: ' + id_token)
}
export default {
head() {
return {
meta: [
{
name: 'google-signin-scope',
content: 'profile email'
},
{
name: 'google-signin-client_id',
content: process.env.GOOGLE_CLIENT_ID
}
],
script: [
{
src: 'https://apis.google.com/js/platform.js',
defer: true,
async: true
}
]
}
}
}
</script>
I'm sure process.env.GOOGLE_CLIENT_ID is correct since I've checked dom tree when running on browser. If you know where the bug is please let me know, thank you.

Answer 1

Vue SFC's script is isolated, and you have declared onSignIn just in this scope. Yeah, this is not going to fly.
Luckily, you can simply add onSignIn function in window scope:
window.onSignIn = onSignIn
Mostly, you've got it all right. But there is even dedicated package ready for this use case: google-signin-vue. I would not recommend blindly using it though; instead look at source code and find features you'd like to have, if needed.

Answer 2

I solved this problem by myself. I checked: how to implement Google Login API in VueJS?
and use the second method the answer provided.
I moved properties in head() to nuxt.config.js like this:
// put this in script array
{
src: 'https://apis.google.com/js/platform.js?onload=renderButton',
defer: true,
async: true
}
// ...
// put this in meta array
{
name: 'google-signin-scope',
content: 'profile email'
},
{
name: 'google-signin-client_id',
content: process.env.GOOGLE_CLIENT_ID
}
in component
// template
<div id="google-signin-button"></div>
// methods
onSignIn(user) {
console.log('invoking onSignin...')
const profile = user.getBasicProfile()
console.log('ID: ' + profile.getId()) // Don't send this directly to your server!
console.log('Full Name: ' + profile.getName())
console.log('Given Name: ' + profile.getGivenName())
console.log('Family Name: ' + profile.getFamilyName())
console.log('Image URL: ' + profile.getImageUrl())
console.log('Email: ' + profile.getEmail())
// The ID token you need to pass to your backend:
var id_token = user.getAuthResponse().id_token
console.log('ID Token: ' + id_token)
}
// mounted lifecycle
mounted() {
setTimeout(() => {
gapi.signin2.render('google-signin-button', {
onsuccess: this.onSignIn
})
})
},
And it works finally. Hope this will help someone.