fargo
1a822493ba
963 markdown files reformatted with the repository's pinned prettier so pnpm format:check covers the folded tree like every other repo file. The formatter's embedded-language pass also normalized code fences (TS semicolons, closed HTML tags in examples, lowercased CSS hex colors, one renumbered list that skipped an index). Alphanumeric token deltas vs the fold commit were audited file-by-file; all are formatter-equivalent markup normalizations plus the four sanitized skills.
3.3 KiB
3.3 KiB
category
| category |
|---|
| @Firebase |
useAuth
Reactive Firebase Auth binding. It provides a reactive user and isAuthenticated so you
can easily react to changes in the users' authentication status.
Usage
<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({
/* 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
export interface UseFirebaseAuthOptions {
isAuthenticated: ComputedRef<boolean>;
user: Ref<User | null>;
}
/**
* Reactive Firebase Auth binding
*
* @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
>;
};