useAuth

类别

导出体积

160 B

依赖包

@vueuse/firebase

上次更改

2 months ago

响应式的 Firebase Auth 绑定。它提供了一个响应式的 user 和 isAuthenticated，因此你可以轻松地对用户的身份验证状态变化做出反应。 Available in the @vueuse/firebase add-on.

用法

vue

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

const app
 = initializeApp
({ /* 配置 */ })
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
">
      使用 Google 登录
    </button
>
  </div
>
</template>

类型声明

显示类型声明

export interface UseFirebaseAuthOptions {
  isAuthenticated
: ComputedRef
<boolean>
  user
: Ref
<User
 | null>
}
/**
 * 响应式 Firebase 身份验证绑定
 *
 * @see https://vueuse.org/useAuth
 *
 * @__NO_SIDE_EFFECTS__
 */
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,
    | User

    | {
        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
  >
}