Google One-Tap Sign In (YOLO)

google_signin_onetap.js

// <script src="https://smartlock.google.com/client"></script>

googleyolo.hint({
  supportedAuthMethods: [
    'https://accounts.google.com'
  ],
  supportedIdTokenProviders: [{
    uri: 'https://accounts.google.com',
    clientId: 'CLIENT ID'
  }]
}).then((credential) => {
  console.log(credential)
}, (error) => {
  console.log(error.type)
})

// Credential
// authDomain: "http://localhost:8080"
// authMethod: "https://accounts.google.com"
// displayName: "Yoga Hanggara"
// id: "[email protected]"
// idToken: "jwt-token-here"
// profilePicture: "https://lh3.googleusercontent.com/a-/AAuE7mBXjbrYa93a0xjUw4bTgS5GJh9YphkAym2VsFwSLHA=s96-c"

{
  "iss": "https://accounts.google.com",
  "nbf": 1575397759,
  "aud": "xxx.apps.googleusercontent.com",
  "sub": "",
  "email": "[email protected]",
  "email_verified": true,
  "azp": "xxx.apps.googleusercontent.com",
  "name": "Yoga Hanggara",
  "picture": "https://lh3.googleusercontent.com/a-/AAuE7mBXjbrYa93a0xjUw4bTgS5GJh9YphkAym2VsFwSLHA=s96-c",
  "given_name": "Yoga",
  "family_name": "Hanggara",
  "iat": 1575398059,
  "exp": 1575401659,
  "jti": "f9661a21d27c915ec87f95f93471f9fc0980eefa"
}

google_signin_onetap_firebase.js

import firebase from 'firebase'

export default {
  created () {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        console.log(user)
      } else {
        console.log('not signed in')
        this.initOneTap()
      }
    })
  },

  methods: {
    initOneTap () {
      window.googleyolo.hint({
        supportedAuthMethods: [
          'https://accounts.google.com'
        ],
        supportedIdTokenProviders: [{
          uri: 'https://accounts.google.com',
          clientId: 'CLIENT ID'
        }]
      }).then((credential) => {
        console.log(credential)

        // Build Firebase credential with the Google ID token.
        const googleCredential = firebase.auth.GoogleAuthProvider.credential(credential.idToken)

        // Sign in with credential from the Google user.
        firebase.auth().signInWithCredential(googleCredential)
      }, (error) => {
        console.log(error.type)
      })
    },

    signIn () {
      const provider = new firebase.auth.GoogleAuthProvider()

      firebase.auth().signInWithPopup(provider).then(function (result) {
        // This gives you a Google Access Token. You can use it to access the Google API.
        const token = result.credential.accessToken
        console.log(token)
        // The signed-in user info.
        const user = result.user
        console.log(user)
        // ...
      })
    },

    signOut () {
      firebase.auth().signOut()
    }
  }
}