ReactFire reference docs

• ReactFireError

• AuthCheckProps
• ClaimCheckErrors
• ClaimsCheckProps
• ClaimsValidator
• FirebaseAppProviderProps
• ObservableStatusError
• ObservableStatusLoading
• ObservableStatusSuccess
• ReactFireOptions
• SignInCheckOptionsBasic
• SignInCheckOptionsClaimsObject
• SignInCheckOptionsClaimsValidator
• SuspensePerfProps

• ObservableStatus
• ReactFireGlobals
• SigninCheckResult
• StorageImageProps

• AnalyticsSdkContext
• AppCheckSdkContext
• AuthSdkContext
• DatabaseSdkContext
• FirestoreSdkContext
• FunctionsSdkContext
• PerformanceSdkContext
• RemoteConfigSdkContext
• StorageSdkContext
• version

• AnalyticsProvider
• AppCheckProvider
• AuthCheck
• AuthProvider
• ClaimsCheck
• DatabaseProvider
• FirebaseAppProvider
• FirestoreProvider
• FunctionsProvider
• PerformanceProvider
• RemoteConfigProvider
• StorageImage
• StorageProvider
• SuspenseWithPerf
• checkIdField
• checkOptions
• checkinitialData
• preloadFirestoreDoc
• preloadObservable
• preloadUser
• useAnalytics
• useAppCheck
• useAuth
• useCallableFunctionResponse
• useDatabase
• useDatabaseList
• useDatabaseListData
• useDatabaseObject
• useDatabaseObjectData
• useFirebaseApp
• useFirestore
• useFirestoreCollection
• useFirestoreCollectionData
• useFirestoreDoc
• useFirestoreDocData
• useFirestoreDocDataOnce
• useFirestoreDocOnce
• useFunctions
• useIdTokenResult
• useInitAnalytics
• useInitAppCheck
• useInitAuth
• useInitDatabase
• useInitFirestore
• useInitFunctions
• useInitPerformance
• useInitRemoteConfig
• useInitStorage
• useIsSuspenseEnabled
• useObservable
• usePerformance
• useRemoteConfig
• useRemoteConfigAll
• useRemoteConfigBoolean
• useRemoteConfigNumber
• useRemoteConfigString
• useRemoteConfigValue
• useSigninCheck
• useStorage
• useStorageDownloadURL
• useStorageTask
• useSuspenseEnabledFromConfigAndContext
• useUser

Ƭ ObservableStatus<T>: ObservableStatusLoading<T> | ObservableStatusError<T> | ObservableStatusSuccess<T>

src/useObservable.ts:84

Ƭ ReactFireGlobals: Object

src/index.ts:6

Ƭ SigninCheckResult: { errors: {} ; hasRequiredClaims: false ; signedIn: false ; user: null } | { errors: ClaimCheckErrors ; hasRequiredClaims: boolean ; signedIn: true ; user: User }

src/auth.tsx:59

Ƭ StorageImageProps: Object

src/storage.tsx:36

• Const AnalyticsSdkContext: Context<undefined | Analytics>

src/sdk.tsx:20

• Const AppCheckSdkContext: Context<undefined | AppCheck>

src/sdk.tsx:18

• Const AuthSdkContext: Context<undefined | Auth>

src/sdk.tsx:19

• Const DatabaseSdkContext: Context<undefined | Database>

src/sdk.tsx:21

• Const FirestoreSdkContext: Context<undefined | Firestore>

src/sdk.tsx:22

• Const FunctionsSdkContext: Context<undefined | Functions>

src/sdk.tsx:23

• Const PerformanceSdkContext: Context<undefined | FirebasePerformance>

src/sdk.tsx:25

• Const RemoteConfigSdkContext: Context<undefined | RemoteConfig>

src/sdk.tsx:26

• Const StorageSdkContext: Context<undefined | FirebaseStorage>

src/sdk.tsx:24

• Const version: string

src/firebaseApp.tsx:20

▸ AnalyticsProvider(props): Element

Element

src/sdk.tsx:31

▸ AppCheckProvider(props): Element

Element

src/sdk.tsx:31

▸ AuthCheck(«destructured»): JSX.Element

Deprecated

Use useSigninCheck instead

Conditionally render children based on signed-in status and custom claims.

Meant for Concurrent mode only (<FirebaseAppProvider suspense=true />). More detail.

JSX.Element

src/auth.tsx:247

▸ AuthProvider(props): Element

Element

src/sdk.tsx:31

▸ ClaimsCheck(«destructured»): Element

Deprecated

Use useSigninCheck instead

Conditionally render children based on custom claims.

Meant for Concurrent mode only (<FirebaseAppProvider suspense=true />). More detail.

Element

src/auth.tsx:203

▸ DatabaseProvider(props): Element

Element

src/sdk.tsx:31

▸ FirebaseAppProvider(props): Element

Element

src/firebaseApp.tsx:24

▸ FirestoreProvider(props): Element

Element

src/sdk.tsx:31

▸ FunctionsProvider(props): Element

Element

src/sdk.tsx:31

▸ PerformanceProvider(props): Element

Element

src/sdk.tsx:31

▸ RemoteConfigProvider(props): Element

Element

src/sdk.tsx:31

▸ StorageImage(props): Element

Element

src/storage.tsx:78

▸ StorageProvider(props): Element

Element

src/sdk.tsx:31

▸ SuspenseWithPerf(«destructured»): JSX.Element

JSX.Element

src/performance.tsx:9

▸ checkIdField(options): any

any

src/index.ts:47

▸ checkOptions(options, field): any

any

src/index.ts:34

▸ checkinitialData(options): any

any

src/index.ts:43

▸ preloadFirestoreDoc(refProvider): Promise<SuspenseSubject<DocumentSnapshot<DocumentData>>>

Preload a subscription to a Firestore document reference.

Use this to warm up useFirestoreDoc for a specific document

Promise<SuspenseSubject<DocumentSnapshot<DocumentData>>>

src/firestore.tsx:28

▸ preloadObservable<T>(source, id, suspenseEnabled?): SuspenseSubject<T>

SuspenseSubject<T>

src/useObservable.ts:20

▸ preloadUser(authResolver): Promise<undefined | null | User>

Promise<undefined | null | User>

src/auth.tsx:11

▸ useAnalytics(): Analytics

Analytics

src/sdk.tsx:84

▸ useAppCheck(): AppCheck

AppCheck

src/sdk.tsx:82

▸ useAuth(): Auth

Auth

src/sdk.tsx:83

▸ useCallableFunctionResponse<RequestData, ResponseData>(functionName, options?): ObservableStatus<ResponseData>

Calls a callable function.

ObservableStatus<ResponseData>

src/functions.tsx:13

▸ useDatabase(): Database

Database

src/sdk.tsx:85

▸ useDatabaseList<T>(ref, options?): ObservableStatus<QueryChange[] | T[]>

Subscribe to a Realtime Database list

ObservableStatus<QueryChange[] | T[]>

src/database.tsx:48

▸ useDatabaseListData<T>(ref, options?): ObservableStatus<T[] | null>

ObservableStatus<T[] | null>

src/database.tsx:58

▸ useDatabaseObject<T>(ref, options?): ObservableStatus<QueryChange | T>

Subscribe to a Realtime Database object

ObservableStatus<QueryChange | T>

src/database.tsx:27

▸ useDatabaseObjectData<T>(ref, options?): ObservableStatus<T>

ObservableStatus<T>

src/database.tsx:34

▸ useFirebaseApp(): FirebaseApp

FirebaseApp

src/firebaseApp.tsx:78

▸ useFirestore(): Firestore

Firestore

src/sdk.tsx:86

▸ useFirestoreCollection<T>(query, options?): ObservableStatus<QuerySnapshot<T>>

Subscribe to a Firestore collection

ObservableStatus<QuerySnapshot<T>>

src/firestore.tsx:86

▸ useFirestoreCollectionData<T>(query, options?): ObservableStatus<T[]>

Subscribe to a Firestore collection and unwrap the snapshot into an array.

ObservableStatus<T[]>

src/firestore.tsx:96

▸ useFirestoreDoc<T>(ref, options?): ObservableStatus<DocumentSnapshot<T>>

Subscribe to Firestore Document changes

You can preload data for this hook by calling preloadFirestoreDoc

ObservableStatus<DocumentSnapshot<T>>

src/firestore.tsx:42

▸ useFirestoreDocData<T>(ref, options?): ObservableStatus<T>

Subscribe to Firestore Document changes and unwrap the document into a plain object

ObservableStatus<T>

src/firestore.tsx:62

▸ useFirestoreDocDataOnce<T>(ref, options?): ObservableStatus<T>

Get a Firestore document, unwrap the document into a plain object, and don't subscribe to changes

ObservableStatus<T>

src/firestore.tsx:74

▸ useFirestoreDocOnce<T>(ref, options?): ObservableStatus<DocumentSnapshot<T>>

Get a firestore document and don't subscribe to changes

ObservableStatus<DocumentSnapshot<T>>

src/firestore.tsx:52

▸ useFunctions(): Functions

Functions

src/sdk.tsx:87

▸ useIdTokenResult(user, forceRefresh?, options?): ObservableStatus<IdTokenResult>

ObservableStatus<IdTokenResult>

src/auth.tsx:31

▸ useInitAnalytics(initializer, options?): ObservableStatus<Analytics>

ObservableStatus<Analytics>

src/sdk.tsx:92

▸ useInitAppCheck(initializer, options?): ObservableStatus<AppCheck>

ObservableStatus<AppCheck>

src/sdk.tsx:92

▸ useInitAuth(initializer, options?): ObservableStatus<Auth>

ObservableStatus<Auth>

src/sdk.tsx:92

▸ useInitDatabase(initializer, options?): ObservableStatus<Database>

ObservableStatus<Database>

src/sdk.tsx:92

▸ useInitFirestore(initializer, options?): ObservableStatus<Firestore>

ObservableStatus<Firestore>

src/sdk.tsx:92

▸ useInitFunctions(initializer, options?): ObservableStatus<Functions>

ObservableStatus<Functions>

src/sdk.tsx:92

▸ useInitPerformance(initializer, options?): ObservableStatus<FirebasePerformance>

ObservableStatus<FirebasePerformance>

src/sdk.tsx:92

▸ useInitRemoteConfig(initializer, options?): ObservableStatus<RemoteConfig>

ObservableStatus<RemoteConfig>

src/sdk.tsx:92

▸ useInitStorage(initializer, options?): ObservableStatus<FirebaseStorage>

ObservableStatus<FirebaseStorage>

src/sdk.tsx:92

▸ useIsSuspenseEnabled(): boolean

boolean

src/firebaseApp.tsx:60

▸ useObservable<T>(observableId, source, config?): ObservableStatus<T>

ObservableStatus<T>

src/useObservable.ts:86

▸ usePerformance(): FirebasePerformance

FirebasePerformance

src/sdk.tsx:88

▸ useRemoteConfig(): RemoteConfig

RemoteConfig

src/sdk.tsx:90

▸ useRemoteConfigAll(key): ObservableStatus<AllParameters>

Convience method similar to useRemoteConfigValue. Returns allRemote Config parameters.

ObservableStatus<AllParameters>

src/remote-config.tsx:66

▸ useRemoteConfigBoolean(key): ObservableStatus<boolean>

Convience method similar to useRemoteConfigValue. Returns a boolean from a Remote Config parameter.

ObservableStatus<boolean>

src/remote-config.tsx:58

▸ useRemoteConfigNumber(key): ObservableStatus<number>

Convience method similar to useRemoteConfigValue. Returns a number from a Remote Config parameter.

ObservableStatus<number>

src/remote-config.tsx:50

▸ useRemoteConfigString(key): ObservableStatus<string>

Convience method similar to useRemoteConfigValue. Returns a string from a Remote Config parameter.

ObservableStatus<string>

src/remote-config.tsx:42

▸ useRemoteConfigValue(key): ObservableStatus<RemoteConfigValue>

Accepts a key and optionally a Remote Config instance. Returns a Remote Config Value.

ObservableStatus<RemoteConfigValue>

src/remote-config.tsx:34

▸ useSigninCheck(options?): ObservableStatus<SigninCheckResult>

Subscribe to the signed-in status of a user.

const { status, data:signInCheckResult } = useSigninCheck();

if (status === 'loading') {
  return <LoadingSpinner />}

if (signInCheckResult.signedIn === true) {
  return <ProfilePage user={signInCheckResult.user}/>
} else {
  return <SignInForm />
}

Optionally check custom claims of a user as well.

// pass in an object describing the custom claims a user must have
const {status, data: signInCheckResult} = useSigninCheck({requiredClaims: {admin: true}});

// pass in a custom claims validator function
const {status, data: signInCheckResult} = useSigninCheck({validateCustomClaims: (userClaims) => {
  // custom validation logic...
}});

// You can optionally force-refresh the token
const {status, data: signInCheckResult} = useSigninCheck({forceRefresh: true, requiredClaims: {admin: true}});

ObservableStatus<SigninCheckResult>

src/auth.tsx:124

▸ useStorage(): FirebaseStorage

FirebaseStorage

src/sdk.tsx:89

▸ useStorageDownloadURL<T>(ref, options?): ObservableStatus<string | T>

Subscribe to a storage ref's download URL

ObservableStatus<string | T>

src/storage.tsx:29

▸ useStorageTask<T>(task, ref, options?): ObservableStatus<UploadTaskSnapshot | T>

Subscribe to the progress of a storage task

ObservableStatus<UploadTaskSnapshot | T>

src/storage.tsx:16

▸ useSuspenseEnabledFromConfigAndContext(suspenseFromConfig?): boolean

boolean

src/firebaseApp.tsx:67

▸ useUser<T>(options?): ObservableStatus<User | null>

Subscribe to Firebase auth state changes, including token refresh

ObservableStatus<User | null>

src/auth.tsx:22