navigation not working properly

[sankaSanjeeva]

I am creating a very simple React application that uses Firebase for authentication. After signing in with Google the user will navigate to the chat page properly if he is an existing user. If it is a new user I will add that user to my Firestore DB before calling the navigate function. In that case, I can see the URL in the browser change but the page is still the same(Sign in with Google button).

export default function Auth() {
  const navigate = useNavigate()

  const [signInWithGoogle] = useSignInWithGoogle(auth)

  const handleSignUp = async () => {
    signInWithGoogle().then(async (u) => {
      const user = getAdditionalUserInfo(u!)

      if (user?.isNewUser) {
        await setDoc(doc(db, 'users', user?.profile?.id as string), {
          name: user?.profile?.name,
          email: user?.profile?.email,
          picture: user?.profile?.picture,
          role: Role.User,
        })
      }

      // navigation not working if user is a new user

      navigate('/chat')
    })
  }

  return (
    <div className="flex justify-center items-center h-screen">
      <Button onClick={handleSignUp}>
        <span>Sign in with google</span>
      </Button>
    </div>
  )
}

[sankaSanjeeva]

Calling navigate method inside a useEffect fixed the issue

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      if (user) {
        navigate('/chat')
      }
    })

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