Vue.js Firebase Google認証

firebase-google-signin.vue

<template>
  <div>
    <h1>SignIn page</h1>
    <v-avatar v-show="photoUrl">
      <img :src="photoUrl" alt="John" />
    </v-avatar>
    <v-btn @click="SignIn" color="info">Google Sign In</v-btn>
    <v-btn @click="SignOut" color="secondary">Sign Out</v-btn>
    <v-btn @click="GetProfiele" color="success">GetProfiele</v-btn>
    <p>login: {{ login }}</p>
    <p>name: {{ name }}</p>
    <p>email: {{ email }}</p>
    <p>photoUrl: {{ photoUrl }}</p>
  </div>
</template>

<script lang="ts">
import { createComponent, ref, onMounted } from '@vue/composition-api'
import firebase from 'firebase'
export default createComponent({
  setup() {
    const state = {
      name: ref(''),
      email: ref(''),
      photoUrl: ref(''),
      login: ref(false)
    }
    const methods = {
      SignIn() {
        const provider = new firebase.auth.GoogleAuthProvider()
        firebase.auth().signInWithRedirect(provider)
      },
      SignOut() {
        firebase.auth().signOut()
      },
      GetProfiele() {
        const user = firebase.auth().currentUser
        if (user != null) {
          state.name.value = user.displayName || ''
          state.email.value = user.email || ''
          state.photoUrl.value = user.photoURL || ''
        }
      }
    }
    onMounted(() => {
      firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
          state.login.value = true
          state.name.value = user.displayName || ''
          state.email.value = user.email || ''
          state.photoUrl.value = user.photoURL || ''
        } else {
          state.login.value = false
        }
      })
    })
    return { ...state, ...methods }
  }
})
</script>