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 want to log in by using one account – be it Google, Facebook, Twitter, or GitHub account. And there are many websites that have implemented a one-click sign-in function, so it is not an innovation, it’s becoming a necessity. Every bigger website nowadays had to 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 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, at least for us). But of course, if the user logs into 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 into the 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 a one-click login function all by yourself.

Both approaches have advantages and disadvantages. While the 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 vary 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 with the code quality, I can assure you that it is good as it consists only of 43 lines of code.

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

The first step is to get Google client ID

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

Before diving into coding, we need to make 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, requests will be made to Google, and the Google server will respond with an 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 on 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 a Google account will be needed. Also, 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 personal Google account.

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

After this, you will be asked for the product name. Just enter the name and click next. Afterward, there will come an 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 the “Web browser” from the dropdown list.

You will be asked to enter the URI of your application. Because using Google sign-in on the localhost has its own nuances, for the purpose of the example, lets use Netlify. If you are willing to follow along with 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:

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 the 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:

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. If you are developing the functionality for an existing app, the 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 a message with an id token to the console. If you get a console.log error while trying to run the app, check this for a solution.

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. The most frequent reason for this occurring is because of the bad configuration of URI. Let’s analyze 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 the 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. The reason for this is the same – configuration in Google service.

How can you fix it? Try using local IP instead of the public. In Google Developers API go to OAuth client and change both Authorized JavaScript origins and Authorized 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 help, try this method I found on Stackoverflow.