Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • PDF Invoice Generator
Menu

Vue 3 OAuth2 One Tap Auto Google Login & Logout Project Using JWT & Google Identity Services System

Posted on April 18, 2023

 

 

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

 

 

TypeScript
1
2
3
4
5
6
7
8
9
10
11
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

 

 

TypeScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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>

 

 

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.

 

 

 

 

 

BUY FULL SOURCE CODE

 

Recent Posts

  • Node.js Express Project to Remove Background of Images Using Rembg & Formidable Library in Browser
  • Node.js Tutorial to Remove Background From Image Using Rembg & Sharp Library in Command Line
  • Python 3 Flask Project to Remove Background of Multiple Images Using Rembg Library in Browser
  • Python 3 Rembg Library Script to Bulk Process Multiple Images and Remove Background in Command Line
  • Python 3 Rembg Library Script to Remove Background From Image in Command Line
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme