useAuth

Usage

html

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

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

Type Declarations

Show Type Declarations

typescript

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 | undefined) => Promise<string>
    getIdTokenResult: (
      forceRefresh?: boolean | undefined
    ) => 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>
}

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 | undefined) => Promise<string>
    getIdTokenResult: (
      forceRefresh?: boolean | undefined
    ) => 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>
}