react-query-firebase icon indicating copy to clipboard operation
react-query-firebase copied to clipboard

useAuthUser works only for the first execution in react native

Open fhuel opened this issue 2 years ago • 2 comments

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.

fhuel avatar Feb 17 '23 21:02 fhuel

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)

fassone avatar Apr 02 '23 18:04 fassone

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
}

shaunsaker avatar Apr 06 '23 04:04 shaunsaker