how to implement Google Login API in VueJS?

Question

So I was using the guide and codes from https://developers.google.com/identity/sign-in/web/

When I clicked the button, it works fine, it will redirect me to google login page, and no problem occurs during authentication.

Once finished, it redirected me back to the page (vue component) where the button is located. In theory it should call onSignIn method and print out info with console.log, but it didn't happen.

Somehow Vue was not able to excute data-onsuccess="onSignIn". I tried to change data-onsuccess to dynamic props (:data-onsuccess) or event handling (@data-onsuccess), both of these does not work either.

Does anyone countered this issue before? Or there's special way to implement it on Vue?

Please include more code. How do you define onSignIn function? Is it global function or inside Vue component? — ittus
– ittus, Commented Jun 9, 2018 at 1:38

ittus · Accepted Answer · 2018-06-10 01:46:02Z

20

data-onsuccess="onSignIn" is looking for a global onSignIn function. You need to put onSignIn outside of Vue component.

Another way is using gapi.signin2.render to render sign-in button, then you can use onSignIn inside Vue component:

<template>
  <div id="google-signin-button"></div>
</template>

<script>
export default {
  mounted() {
    gapi.signin2.render('google-signin-button', {
      onsuccess: this.onSignIn
    })
  },
  methods: {
    onSignIn (user) {
      const profile = user.getBasicProfile()
    }
  }
}
</script>

For more reference: https://developers.google.com/identity/sign-in/web/build-button

answered Jun 10, 2018 at 1:46

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Travis Su Over a year ago

it won't call the onSignIn unless I refresh the page, what's the problem in here?

Travis Su Over a year ago

Or If I wanted to put it outside the vue component, where should I put it?

ittus Over a year ago

You can put it in main.js

Ananthakrishnan Baji · Accepted Answer · 2024-05-06 12:40:46Z

8

If someone is looking for a Vue 3 plugin for using the Google Identity Services to implement features like Sign In With Google, One-tap sign-up and Automatic sign-in, you can use the plugin vue3-google-login which I recently created for one of my project.

Here is a sample code to create a simple Google Sign In Button using vue3-google-login

First initialise the plugin in main.js with your Google API client ID

import { createApp } from 'vue'
import App from './App.vue'
import vue3GoogleLogin from 'vue3-google-login'

const app = createApp(App)

app.use(vue3GoogleLogin, {
  clientId: 'YOUR_GOOGLE_CLIENT_ID'
})

app.mount('#app')

Then use GoogleLogin component like this

<script setup>
const callback = (response) => {
  console.log("Handle the response", response)
}
</script>

<template>
  <GoogleLogin :callback="callback"/>
</template>

edited May 6, 2024 at 12:40

answered May 10, 2022 at 19:31

Ananthakrishnan Baji

1,2901 gold badge9 silver badges21 bronze badges

2 Comments

Sumesh S Over a year ago

Oh this was really helpful ...👍

Fahad Javed Over a year ago

Can you suggest any other library that can be a drop-in replacement for your vue3-google-login package? My problem is that our project is built on vue 2, but one of the developers added this vue3 dependency about 9 months ago. Now when I'm trying to migrate from Vue CLI to Vite, then I'm getting errors on my auth pages.

manuelmejiaio · Accepted Answer · 2018-11-23 16:10:31Z

6

In case somebody needs a plugin to start working right away without too much setup, try this vue-google-signin-button-directive.

edited Nov 23, 2018 at 16:10

answered Nov 23, 2018 at 16:01

manuelmejiaio

7,0472 gold badges36 silver badges35 bronze badges

3 Comments

Jed Lynch Over a year ago

I am normally opposed to using libraries for something like this, but this one is the simplest by far.

Pithikos Over a year ago

don't understand why it's implemented as a directive instead of a component.

manuelmejiaio Over a year ago

Because a directive will give you more flexibility in terms of the design and props of your button. @Pithikos

Collectives™ on Stack Overflow

how to implement Google Login API in VueJS?

3 Answers 3

3 Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related