How to integrate Google sign-in?

I’ve been reading the Google sign-in docs but am unsure how / where exactly to integrate this into my Vue app. Of course, I want Vue to know when a user is logged in and who they are. So where exactly should I include the Google library JS file? Does anyone have links to example Vue projects that include Google auth?

Something like this should work. The idea is to implement a custom signin button to take control of what and when to render, as well as the method to hook into. I’m also using a component and $emit the event after the successful login, instead of messing up the root instance. Of course, you need a real Google Client ID for the fiddle to work (I’ve tested it successfully with mine, but I can’t share it for obvious reasons).

2 Likes

Thanks so much for the reply, and please bear with me - I’m new to Vue and even more so to Gapi…

I’m inside a nested component, not at the root like in your code. So my element could be:

    <div id="signinBtn" @done="onUserLoggedIn"/>

What would my click handler look like?

auth2.attachClickHandler(this.$refs.signinBtn....

You don’t need to touch the component at all – in fact, it could very well be turned into a plugin. Instead, just define an onUserLoggedIn (user) method in the direct parent of the component (in my case, the root instance), and you can do whatever you want from there, like passing around your app.

1 Like

OK great - got that working and my user object is being logged to the console :slight_smile:

It has a bunch of oddly-named properties (‘Zi’ etc) - I guess the next step is to send the email address and id token to my backend API for verification. What is the correct way to extract those properties from this object?

It’s a GoogleUser object, whose APIs can be found here: https://developers.google.com/identity/sign-in/web/reference#googleusergetbasicprofile

1 Like

Thanks a million for your help!

You’re welcome. FWIW, I’ve created a simple plugin/component here: https://www.npmjs.com/package/vue-google-signin-button.

2 Likes

there’s also a nice component called vue-google-oauth

hii, I have one doubt, in the attached example, you are putting the api credentials in front-end itself, but I have read at some places that anything on front-end is not safe, so is it a good way?
Also, will I be needed to send the user profile from front-end to backend? if yes, how can I be so sure about same because as per my understanding the backend request won’t be having any password match and all, the api request can be mimic. (sorry newbie questions)
please explain a bit.
Thanks

You will need to set authorized javascript origins in google dev console when creating oauth keys.
When authenticating with your backend you use a token provided by google: https://developers.google.com/identity/sign-in/web/backend-auth

1 Like

That’s awesome, but could you include how to sign out in this plugin?