useAuth

反应式 Firebase 身份验证 结合。它提供了反应式 user 和 isAuthenticated，因此你可以轻松地对用户身份验证状态的变化做出反应。

¥Reactive Firebase Auth binding. It provides a reactive user and isAuthenticated so you can easily react to changes in the users' authentication status. Available in the @vueuse/firebase add-on.

用法

¥Usage

<script setup lang="ts">
import { initializeApp } from 'firebase/app'
import { GoogleAuthProvider, getAuth, signInWithPopup } from 'firebase/auth'
import { useAuth } from '@vueuse/firebase/useAuth'

const app = initializeApp({ /* config */ })
const auth = getAuth(app)
const { isAuthenticated, user } = useAuth(auth)

const signIn = () => signInWithPopup(auth, new GoogleAuthProvider())
</script>

<template>
  <pre v-if="isAuthenticated">{{ user }}</pre>
  <div v-else>
    <button @click="signIn">
      Sign In with Google
    </button>
  </div>
</template>

类型声明

显示类型声明

export interface UseFirebaseAuthOptions {
  isAuthenticated: ComputedRef<boolean>
  user: Ref<User | null>
}
/**
 * Reactive Firebase Auth binding
 *
 * @see https://vueuse.org/useAuth
 */
export declare function useAuth(auth: Auth): {
  isAuthenticated: ComputedRef<boolean>
  user: Ref<{
    readonly emailVerified: boolean
    readonly isAnonymous: boolean
    readonly metadata: {
      readonly creationTime?: string | undefined
      readonly lastSignInTime?: string | undefined
    }
    readonly providerData: {
      readonly displayName: string | null
      readonly email: string | null
      readonly phoneNumber: string | null
      readonly photoURL: string | null
      readonly providerId: string
      readonly uid: string
    }[]
    readonly refreshToken: string
    readonly tenantId: string | null
    delete: () => Promise<void>
    getIdToken: (forceRefresh?: boolean) => Promise<string>
    getIdTokenResult: (forceRefresh?: boolean) => Promise<IdTokenResult>
    reload: () => Promise<void>
    toJSON: () => object
    readonly displayName: string | null
    readonly email: string | null
    readonly phoneNumber: string | null
    readonly photoURL: string | null
    readonly providerId: string
    readonly uid: string
  } | null>
}

源代码

源代码 • 文档

变更日志

No recent changes