Vue Google Identity

Overview

Google Sign-in is set to be deprecated after March 31, 2023. It is now replaced by Google Identity separate in two libraries for web Authentification and Authorization

Feedback are much welcomed.

Local development consideration

• Add both http://localhost and http://localhost:<port_number>.

Migration guide

Authentification

If you don't need scope (or using only email, profile, and openid) and you were previously using gapi.auth2.authorize id_token, you will need to use Authentification Google Sign-in Button that now return a credential (instead of id_token (wrapped here in <GoogleSignIn />)).

Authorization

If you need any other scope you probably will need to implement one of the 2 following flows:

1. OAuth 2.0 authorization code flow (or Code Model)

Your server calls Google APIs on a user's behalf. You were sending a offlineCode to your backend. You will need to use initCodeClient (wrapped here in method requestCode) that returns a code.

2. OAuth 2.0 implicit grant flow (or Token Model)

The browser calls Google APIs. No backend were needed. You will need to use initTokenClient (wrapped here in method requestAccessToken) that returns an access_token.

Installation

npm install -S vue-google-identity

Setup

Register plugin

Add GoogleIdentity plugin to your App in main.js file, it will:

• Load the Google Identity client https://accounts.google.com/gsi/client;
• Register a component GoogleSignIn component that display a Authentification Google Sign-in Button. You will need to specify your Google API Client ID, mind to use .env

import GoogleIdentity from 'vue-google-identity'

app.use(GoogleIdentity, {
  clientId: process.env.VUE_APP_GOOGLE_CLIENT_ID,
})

Usage

You can use callback prop to access the response's credential.

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

<script>
export default {
  setup() {
    const callback = (response) => {
      console.log(response.credential)
    }
    return { callback }
  }
}
</script>

Methods

Sign out

To sign out you can use onSignout function.

import { onSignout } from 'vue-google-identity'

onSignout()

Request code

To request code, you can use requestCode that wraps initCodeClient function.

import { requestCode } from 'vue-google-identity'

const response = await requestCode();
if (response.code) {
  logged.value = true
}

Request access token

To request code, you can use requestAccessToken that wraps initTokenClient function.

import { requestAccessToken } from 'vue-google-identity'

const response = await requestAccessToken();
if (response.access_token) {
  logged.value = true
}

Roadmap

• Loading client
• Loaded callback
• Sign in
• Sign out
• One tap prompt
• Custom Button Configuration
• Custom Identity Configuration
• Custom GoogleSignIn Button layout (under consideration)
• Implicit flow
• Authorization code flow
• Authorization model handling errors
• Migration guide