Vue 3 Google Sign-In User Authentication shows deprecated warning in console

Question

I am trying to implement the Sign in using Google feature in my Vue 3 application, I found some npm packages to implement this feature, but these packages which are soon going to be deprecated (This warning is shown in console).

I like to use Google Identity Services for adding Sign in using Google feature to my web app which provides features like One-tap sign-up and Automatic sign-in, how can I easily implement this feature in Vue 3?

Answer 1

I have created a small plugin vue3-google-login which uses Google Identity Services to implement features like Sign In With Google, One-tap sign-up and Automatic sign-in.

Here is a sample code to create a simple Google Sign In Button using vue3-google-login

First initialise the plugin in main.js with your Google API client ID

import { createApp } from 'vue'
import App from './App.vue'
import vue3GoogleLogin from 'vue3-google-login'

const app = createApp(App)

app.use(vue3GoogleLogin, {
  clientId: 'YOUR_GOOGLE_CLIENT_ID'
})

app.mount('#app')

Then use GoogleLogin component like this

<script setup>
const callback = (response) => {
  console.log("Handle the response", response)
}
</script>

<template>
  <GoogleLogin :callback="callback"/>
</template>