Google sign in Vue js

Making a one-click Google sign in for Vue.js application

Nowadays, simplicity is appreciated more than ever. If a simple, custom-made login system was enough years ago, today users find entering username and password too exhausting. Users wants to login by using one account – be it Google, Facebook, Twitter or GitHub account. And there are many websites that have implemented one-click sign in function, so it is not an innovation, it’s becoming a necessity. Every bigger website nowadays had implement social login function. Vue.js applications are not an exception – you should consider implementing Vue js Google sign in functionality where appropriate as it improves UX.

There is a one “security law”, that you probably already heard: the more secure system is, the less user-friendly it is. And vice versa is true – if the system is user-friendly and convenient for the user, there’s a chance that the gains are made in the account of the security. However, Google sign in is based on OAuth 2.0, so security is not a concern in this case (well, atleast for us). But of course, if user logs in to an untrustworthy website with his or her Google account, there are some security risks.

Anyway, let’s get to the business. I am gonna show you how can you implement a Vue js Google login functionality.

How can Google sign in function could be integrated in Vue.js application?

Implementing Google login for Vue.js is not that hard. There are two ways how you can create this functionality: either use an existing npm package or build one click login function all by yourself.

Both approaches have advantages and disadvantages. While prebuilt library gives you the functionality out of the box, you don’t know the quality of code. And it’s not a secret that people are bragging that Node libraries varies in quality. When there are so many community-built libraries, not all of them are good.

And if you are building any functionality by yourself, you know that the job will be done right. However, you must be experienced enough in order to know how to build it.

However, in our case there is no need to reinvent the bike, as we can get Vue.js SSO functionality with a simple node package. And if you are obsessed about the code quality, I can assure you that it is good as it consist only of 43 lines of code.

To be preciese – the quickest way to implement Google sign in directive for Vue, is to use a plugin called vue-google-signin-button-directive.

First step is to get Google client ID

The proccess of how to implement Vue js Google sign in function is pretty straigtforward:

Vue js google sign in installation

Before diving into coding, we need to make a one additional step. In order to use the Google sign in function, you need to have a Google client ID. Because Google uses OAuth, you need to get the client ID in order to use it. Without the client ID you will be getting an error from Google. You might implement the functionality in your app, but when the user clicks on the button, request will be made to Google and Google server will respond with error.

To get a Google client ID, visit this page: https://developers.google.com/identity/sign-in/web/sign-in

On the page you will find a guide how can you integrate Google sign-in. Also, there will be a button that will create a client ID for you. Just keep in mind that for this Google account will be needed. And if you are developing an application for a business, it might not be the best idea to use a client ID that was created with your own Google account.

creating Google client ID

To get an Google Client ID for Vue js application, click on Configure a project button. If you are using this for a first time, you will be asked to create a project. Enter the project name, agree with the rules and click Next.

If you want to get Google sign in, you need to configure a project

After this you will be asked for the product name. Just enter the name and click next. Afterwards there will come the important part – you will have to choose the application environment. Because we are building a Vue.js application with Google sign-in function, we will choose “Web browser” from the dropdown list.

Configuring OAuth 2.0 client

You will be asked to enter the URI of your application. Because using Google sign in on localhost has its own nuances, for the purpose of the example lets use Netlify. If you are willing to follow along this tutorial, you have to build your app in order to have a static pages app. You can find in depth explanation in this article.

So lets say I am going to upload my app to Netlify, and it will be accessible by this silly URI:

Entering URI for getting Google Client ID for Vue.js application

In your case you should enter the URI that you know your application will be accessible with. After this, click Create and you will get a Client ID and secret. For our example you will need only Client ID. You will be able to preview them anytime from Google API console, so you don’t need to memorize it, but as we are going to use it soon, copy and save Client ID. There is what you should see at the last step:

Generated Client ID and Client Secret

Second step: implementing Google sign in for Vue.js

First, we need to have an application to install the functionality to. Make sure you have the prerequisites in your machine:

  • Node
  • Npm
  • Vue CLI

Secondly we need to create an app with vue create app-name. For more detailed installation guide check this. If you are developing the functionality for an existing app, flow I am going to show you will be the same.

Now lets get the needed library:

npm install –save vue-google-signin-button-directive

If the installation went well, we can test if works. Paste the code into your App.vue file:

<template>
  <button v-google-signin-button="clientId" class="google-signin-button"> Continue with Google</button>
</template>

<script>
export default {
  data: () => ({
    clientId: 'cliend-id'
  }),
  methods: {
    OnGoogleAuthSuccess (idToken) {
      console.log(idToken)
      // Receive the idToken and make your magic with the backend
    },
    OnGoogleAuthFail (error) {
      console.log(error)
    }
  }
}
</script>

<style>
.google-signin-button {
  color: white;
  background-color: red;
  height: 50px;
  font-size: 16px;
  border-radius: 10px;
  padding: 10px 20px 25px 20px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
</style>

NOTE: in this line instead of a placeholder, insert your client iD: “clientId: ‘cliend-id'”

And also update your main.js file:

import Vue from 'vue'
import App from './App.vue'
import GoogleSignInButton from 'vue-google-signin-button-directive'

Vue.config.productionTip = false

new Vue({
  GoogleSignInButton,
  render: h => h(App),
}).$mount('#app')

So now you should be able to login with Google account. And after the successful login, you should get an message with an id token to the console. If you get console.log error while trying to run the app, check this for a solution.

Google sign in for Vue.js

That’s it, if you made everything, you should be able to login to your Vue.js application with Google sign in function.

If you are getting Error: redirect_uri_mismatch error

This not an uncommon error. Most frequent reason for this occurring is because of the bad configuration of URI. Let’s analyse the error: “The JavaScript origin in the request, X.com, does not match the ones authorized for the OAuth client.”. What does that mean? It means that current URL your project can be accessed differest from the URL you saved in the Google Developers console.

The first step would be to check it. Go to Google Developers API -> Credentials and choose OAuth client.

Now check if the URIs match your app URI. Check if the https is at the beginning of URI and make sure you are visiting your application with https. If you don’t have the URI entered as the Authorized redirect URIs, add it. However, keep in mind that it might take some time for Google to update the changes.

Google sign on local IP in Vue.js application

You might face the same error that I already mentioned when trying to run Vue.js Google sign in application locally. Reason for this is the same – configuration in Google service.

How can you fix it? Try using local IP instead of public. In Google Developers API go to OAuth client and change both Authorized JavaScript origins and Authroized redirect URIS. Different various might work, try IP addresses such as: http://localhost:8080 or http://127.0.0.1:8080, http://127.0.0.1. If that doesn’t helped, try this method I found on Stackoverflow.

Leave a Comment

Your email address will not be published. Required fields are marked *