vue-google-identity-login-btn

Are you using vue 3?

you can check this playground based on this project!

Simple Google Login Button for vue ( Google Identity Services ).

---

vue-google-identity-login-btn

• install
• Use
• Customize your login button
• Full example

install:

yarn:

$ yarn add vue-google-identity-login-btn

npm:

npm install --save vue-google-identity-login-btn

---

Use:

1. Import the library in your component and adds the directive, data, and methods required:

import GoogleSignInButton from 'vue-google-identity-login-btn';

export default {
  
  directives: {
    GoogleSignInButton
  },

  data() {
    return {
      clientId: 'YOUR-GOOGLE-CLIENT-ID'
    }
  },

  methods: {
    onGoogleAuthSuccess (jwtCredentials) {
      console.log(jwtCredentials);
      const profileData = JSON.parse( atob(jwtCredentials.split('.')[1]) );
      console.table(profileData);
    }
  },
}
</script>

2. Create an element with the v-google-identity-login-btn directive in your template:

<div style="display: flex; justify-content: center" 
  id="google-login-btn"
  v-google-identity-login-btn="{ clientId }">
    Continuar con google
</div>

Warning: If you are seeing this message and you have issues (the Google button is not showing and you have an error in the console), probably you need to specify the width property with an Number value ( v-google-identity-login-btn="{ clientId, width: 300 }"> ). you can see more details here

important: The container id (in this case google-login-btn) is required.

Tip: dont forget validate the jwtCredentials in yout backend

Customize your login button:

Put attention in the object from the directive:

v-google-identity-login-btn="{ clientId }"

This object can contains the attributes for the GsiButtonConfiguration that change your login button theme, lang, size, etc.

Default and required options:

attribute	status	type	default
clientId	required	string	-
type	optional	string	"standard"
shape	optional	string	"rectangular"
theme	optional	string	"outline"
text	optional	string	"continue_with"
size	optional	string	"large"
locale	optional	string	"es-419"
logo_alignment	optional	string	"center"
width	optional	string	"300px"

full example:

<template>

    <div class="btn-cont">
      <div><h2>vue-google-identity-login-btn</h2></div>
      <div id="google-login-btn" v-google-identity-login-btn="{ clientId, locale:'en' }">
          Continuar con google
      </div>
    </div>

</template>

<script>
import GoogleSignInButton from 'vue-google-identity-login-btn';

export default {
  
  directives: {
    GoogleSignInButton
  },

  data() {
    return {
      clientId: 'YOUR-CLIENT-ID'
    }
  },

  methods: {
    onGoogleAuthSuccess (jwtCredentials) {
      // console.log(jwtCredentials);
      const profileData = JSON.parse( atob(jwtCredentials.split('.')[1]) );
      const { name, picture, email } = profileData;
      console.table({ name, picture, email });
    }
  },
}
</script>

<style scoped>
.btn-cont {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 500px;
}
.btn-cont > div {
  width: 300px;
  text-align: center;
}
</style>

result: