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>
Hi @Daewon25 , once you get back the response from the callback, you'd need to pass it to backend for handling. However, if you want to extract the user details from the token you receive in the frontend itself and pass them to the backend, you can do that using jwt-decode.
For example: