Question 119247 in Firebase Question posted in
An extensive official documentation can be found here.

Does react-firebase-hooks support the latest version of firebase?

I’m trying to set up basic authentication in my Next App with Firebase and firebase hooks.

Whenever I pass the firebase.auth() instance to the hook

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

export default function App({ Component, pageProps }: AppProps) {

  const [user] = useAuthState(firebase.auth())

  return <Component {...pageProps} />
}}

I receive the error below

Argument of type 'firebase.default.auth.Auth' is not assignable to parameter of type '
import("[PROJECT_PATH]/node_modules/@firebase/auth/dist/auth-public").Auth'.
  Property 'beforeAuthStateChanged' is missing in type 'firebase.default.auth.Auth' 
but required in type [PROJECT_PATH]/node_modules/@firebase/auth/dist/auth-public").Auth

My guess is that react-firebase-hooks needs an update so as of now I’m going to typecast as any but if anyone has deeper insight I’d love to hear

Tags:

2

Answers


  1. 0

    firebase.auth() gets the Auth service. Instead, what you should pass is the Auth instance. something like this

    // in client.ts
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
const firebaseConfig = {...}
const app = initializeApp(firebaseConfig)
export const auth = getAuth(app);

    import { auth } from "../client";
export default function App({ Component, pageProps }: AppProps) {

  const [user] = useAuthState(auth)

  return <Component {...pageProps} />
}}
    Login or Signup to reply.
  2. 0

    You can always use following format to have a loading and error variable:

    const [user, loading, error] = useAuthState(auth);

    This helps to understand when to use user.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search