invertase / react-query-firebase

React Query hooks for managing asynchronous operations with Firebase. Supports Authentication, Analytics, Firestore & Realtime Database.
https://react-query-firebase.invertase.dev
Apache License 2.0
391 stars 70 forks source link

useAuthUser works only for the first execution in react native #88

Open fhuel opened 1 year ago

fhuel commented 1 year ago

I'm working on a react native project with react: 18.1.0 , react-native: 0.70.5, react-query: 3.39.3, and @react-query-firebase/auth: 1.0.0-dev.2.

When I try to use useAuthUser as specified in the docs : const user = useAuthUser(['user'], auth); to get the user object, everything seems to work fine the first time around, but when I try to use the same code to have the user object in a different component, the query remains in loading state indefinitely.

fassone commented 1 year ago

i have similar issues with react in production. To get the user, i stick to reactQuery

import { useQuery } from "react-query"; const authUser = useQuery(["authUser"], () => auth)

shaunsaker commented 1 year ago

Also seemed to have issues with useAuthUser in production. I'm currently using a simple hook with unsubscribe functionality. Seems to be working nicely 🙂

import { User } from 'firebase/auth'
import { useEffect, useState } from 'react'

import { auth } from '../services/firebase'

export const useAuthUser = () => {
  const [authUser, setAuthUser] = useState<User | null>(null)

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged(authUser => {
      setAuthUser(authUser)
    })

    return () => {
      unsubscribe()
    }
  }, [])

  return authUser
}