Registry / gcp / react-firebase-hooks

react-firebase-hooks

library5.1.1jsnpmunverified

React Firebase Hooks is a comprehensive library providing a collection of reusable React Hooks specifically designed for integrating with Firebase services. It aims to simplify common data fetching and state management patterns when building React applications that leverage Firebase's authentication, Firestore, Realtime Database, Cloud Functions, Storage, and Messaging. The current stable version is 5.1.1, which requires Firebase v9 (modular SDK) or higher and React 16.8.0 or later. The library maintains an active release cadence, frequently addressing bugs and introducing new features, with major version bumps typically aligning with significant Firebase SDK changes. Its primary differentiator is the idiomatic React Hooks interface, making Firebase integration more straightforward and aligned with modern React development practices compared to imperative SDK calls.

gcp web-framework

npm install react-firebase-hooks

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-FIREBASE-HOO

react-firebase-hooks

gcpjavascriptv5.1.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useAuthState

✓ import { useAuthState } from 'react-firebase-hooks/auth';

✗ const { useAuthState } = require('react-firebase-hooks/auth');

The library primarily uses named exports and is designed for ESM environments. CommonJS require() is not officially supported and may lead to issues.

useCollectionData

✓ import { useCollectionData } from 'react-firebase-hooks/firestore';

✗ import useCollectionData from 'react-firebase-hooks/firestore';

All primary hooks are named exports, not default exports. Importing the wrong way will result in undefined.

useDocument

✓ import { useDocument } from 'react-firebase-hooks/firestore';

✗ import { useDocument } from 'react-firebase-hooks';

Hooks are organized by Firebase service (e.g., /auth, /firestore, /database). Importing from the root 'react-firebase-hooks' is incorrect for specific hooks.

useHttpsCallable

✓ import { useHttpsCallable } from 'react-firebase-hooks/functions';

✗ import { useHttpsCallable } from 'react-firebase-hooks/cloud-functions';

Ensure correct path segments; for Cloud Functions, the path is '/functions'.

Demonstrates basic Firebase initialization using the modular SDK and utilizes `useAuthState` to display the current user's authentication status, including loading and error states. It also includes simple sign-in/sign-out functionality with Google Provider.

import React from 'react'; import { initializeApp } from 'firebase/app'; import { getAuth, GoogleAuthProvider, signInWithPopup, signOut } from 'firebase/auth'; import { useAuthState } from 'react-firebase-hooks/auth'; // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { apiKey: process.env.FIREBASE_API_KEY ?? 'YOUR_API_KEY', authDomain: process.env.FIREBASE_AUTH_DOMAIN ?? 'YOUR_AUTH_DOMAIN', projectId: process.env.FIREBASE_PROJECT_ID ?? 'YOUR_PROJECT_ID', storageBucket: process.env.FIREBASE_STORAGE_BUCKET ?? 'YOUR_STORAGE_BUCKET', messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID ?? 'YOUR_MESSAGING_SENDER_ID', appId: process.env.FIREBASE_APP_ID ?? 'YOUR_APP_ID' }; // Initialize Firebase const app = initializeApp(firebaseConfig); const auth = getAuth(app); const googleProvider = new GoogleAuthProvider(); function AuthStatus() { const [user, loading, error] = useAuthState(auth); if (loading) { return ( <div> <p>Initialising User...</p> </div> ); } if (error) { return ( <div> <p>Error: {error.message}</p> </div> ); } if (user) { return ( <div> <p>Current User: {user.displayName || user.email}</p> <button onClick={() => signOut(auth)}>Sign Out</button> </div> ); } return ( <div> <p>Not signed in</p> <button onClick={() => signInWithPopup(auth, googleProvider)}>Sign In with Google</button> </div> ); } // To run this, render AuthStatus in your main App component: // export default function App() { // return <AuthStatus />; // }

Debug

Known issues

breakingVersion 5.0.0 removed `idField`, `refField`, and `transform` options from `useCollectionData` and `useDocumentData` hooks. These options are incompatible with the new Firebase v9 typings.

fix

Migrate to using Firebase's built-in `FirestoreDataConverter` for data transformation and ID handling. Update your queries to reflect the new data structure.

affects: >=5.0.0

breakingVersion 4.0.0 updated `react-firebase-hooks` to support Firebase v9, the new modular SDK. While the hook interface remains largely the same, significant changes are required for how you interact with the underlying Firebase SDKs (e.g., `import { getAuth } from 'firebase/auth'` instead of `firebase.auth()`).

fix

Consult the official Firebase v9 modular SDK upgrade guide to update all your Firebase service imports and initialization code. Ensure your `firebase` package version is `>=9.0.0`.

affects: >=4.0.0

gotchaThere are known outstanding issues with React 18 compatibility that require deeper investigation. While the library may function, some unexpected behavior or warnings could arise.

fix

Monitor the official GitHub repository for updates and patches related to React 18 compatibility. Consider staying on React 17 if critical issues are encountered until a resolution is released.

affects: >=5.1.0

gotchaSupport for React Native Firebase has become less straightforward with the underlying changes in Firebase v9. The library is primarily focused on the Firebase Web SDK.

fix

If using React Native, carefully evaluate compatibility or consider alternative libraries explicitly designed for React Native Firebase. The maintainers are investigating future support for React Native Firebase.

affects: >=4.0.0

Errors

Common errors & fixes

TypeError: (0 , firebase_auth__WEBPACK_IMPORTED_MODULE_2__.getAuth) is not a function

Incorrect import of Firebase v9 modular SDK functions, or trying to use the new modular SDK syntax with an older Firebase package version.

fix

Ensure your `firebase` package version is `^9.0.0` or higher. Verify all Firebase imports follow the modular pattern, e.g., `import { getAuth } from 'firebase/auth';`.

Property 'idField' does not exist on type 'UseCollectionOptions<DocumentData>'

Attempting to use the `idField`, `refField`, or `transform` options with `useCollectionData` or `useDocumentData` in `react-firebase-hooks` v5.0.0 or later.

fix

Remove these deprecated options. Implement data transformation using Firebase's `FirestoreDataConverter` when fetching data, or manually map IDs after the data is returned from the hook.

Hooks can only be called inside of the body of a function component.

A React Hook (e.g., `useAuthState`) is being called outside of a React functional component or custom Hook.

fix

Ensure all calls to `use*` functions from `react-firebase-hooks` are made directly within the body of a React functional component or another custom Hook that adheres to React's rules of hooks.

Error: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first. (app/no-app)

Firebase has not been initialized before attempting to use a Firebase service or a hook that depends on Firebase.

fix

Call `initializeApp()` with your Firebase configuration at the root of your application or before any components that use Firebase hooks are rendered. Pass the initialized app instance to `getAuth()` etc.

Upgrade

Version history

5.1.1latest on npm

Audit

Dependencies

firebaserequiredRequired for interacting with Firebase services. Version 9.0.0 or higher is mandatory for react-firebase-hooks v5.

reactrequiredRequired for React Hooks functionality. Version 16.8.0 or higher is mandatory.

Agent activity

34 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/csfrequency/react-firebase-hooks ↗

packagehttps://www.npmjs.com/package/react-firebase-hooks ↗

homepagehttps://react-firebase-hooks.com ↗