BUY FULL SOURCE CODE

Welcome folks today in this blog post we will be integrating one tap auto google login library in Vue 3 to integrate google oauth2 login and display profile info of user in browser. All the full source code of the application is shown below.

Get Started

In order to get started you need to make a new vue app using the below command as shown below

ng new vueapp

cd vueapp

npm i vue3-google-login

And now you will see the below directory structure of the final react.js project as shown below

And after that you need to go main.js file and copy paste the following code

main.js

import { createApp } from "vue";
import App from "./App.vue";
import vue3GoogleLogin from "vue3-google-login";
let CLIENT_ID =
  "###yourclientid###";

createApp(App)
  .use(vue3GoogleLogin, {
    clientId: CLIENT_ID,
  })
  .mount("#app");

import { createApp } from "vue";

import App from "./App.vue";

import vue3GoogleLogin from "vue3-google-login";

let CLIENT_ID =

"###yourclientid###";

createApp(App)

.use(vue3GoogleLogin, {

clientId: CLIENT_ID,

})

.mount("#app");

Here you need to replace your own details from the google cloud console dashboard as shown below

Here you need to replace the localhost:8080 url to the callback url and also to the web origin and also to the logout url also.

Now we need to go to App.vue file and copy paste the below code

App.vue

<template>
  <!-- Google Login -->
  <div v-if="loggedIn">
    <div>
      <h2>{{ user.name }}</h2>
      <h2>{{ user.email }}</h2>
      <img :src="user.picture" />
      <button @click="logout" class="btn btn-danger">Logout</button>
    </div>
  </div>
  <div v-else>
    <GoogleLogin :callback="callback" prompt auto-login />
  </div>
</template>

<script>
import { decodeCredential, googleLogout } from 'vue3-google-login'

export default {
  data() {
    return {
      loggedIn: false,
      user: null,
      callback: (response) => {
        this.loggedIn = true
        console.log("logged in")
        this.user = decodeCredential(response.credential)
        console.log("Handle the userData")
      }
    }
  },
  methods: {
    logout() {
      googleLogout()
      this.loggedIn = false
    }
  }
}
</script>

<div>

<h2>{{ user.email }}</h2>

<button @click="logout" class="btn btn-danger">Logout</button>

</div>

</div>

</template>

import { decodeCredential, googleLogout } from 'vue3-google-login'

export default {

data() {

return {

loggedIn: false,

user: null,

callback: (response) => {

this.loggedIn = true

console.log("logged in")

this.user = decodeCredential(response.credential)

console.log("Handle the userData")

}

methods: {

logout() {

googleLogout()

this.loggedIn = false

}

</script>

As you can see we are showing the profile details of the user and also we have buttons of login and logout and also we are automatically detected whether the user is currently logged in or not.