Firebase sign in not working

[SuriyaPrakash7]

I'm trying to setup a authentication page using firebase, and though everything works fine I'm not able to sign in to my project. Error: User is not authenticated at index.js:23:1 at auth_impl.ts:741:1.
This is my error message in console. I'm new to Firebase and web dev. Please help me, I'm stressedd!!

[flymauntains]

Give me full code of index.js

[SuriyaPrakash7]

import { doc, onSnapshot, setDoc } from "firebase/firestore";
import { auth, db } from "../config/firebase.config";

export const getUserDetail = () => {
  return new Promise((resolve, reject) => {
    const unsubscribe = auth.onAuthStateChanged((userCred) => {
      if (userCred) {
        const userData = userCred.providerData[0];
        
        const unsubscribe = onSnapshot(
          doc(db, "users", userData?.uid),
          (docSnapshot) => {
            if (docSnapshot.exists()) {
              resolve(docSnapshot.data());
            } else {
              setDoc(doc(db, "users", userData?.uid), userData).then(() => {
                resolve(userData);
              });
            }
          }
        );
        return () => unsubscribe();
      } else {
        reject(new Error("User is not authenticated"));
      }
      unsubscribe();
    });
  
  });
};

[flymauntains]

You are using unsubscribe twice, once for auth.onAuthStateChanged and once for onSnapshot. This can cause confusion and errors.

import { doc, onSnapshot, setDoc } from "firebase/firestore";
import { auth, db } from "../config/firebase.config";

export const getUserDetail = () => {
  return new Promise((resolve, reject) => {
    const unsubscribeAuth = auth.onAuthStateChanged(async (userCred) => {
      if (userCred) {
        const userData = userCred.providerData[0];

        try {
          const userDocRef = doc(db, "users", userData?.uid);

          const unsubscribeSnapshot = onSnapshot(userDocRef, async (docSnapshot) => {
            if (docSnapshot.exists()) {
              resolve(docSnapshot.data());
            } else {
              await setDoc(userDocRef, userData);
              resolve(userData);
            }
          });

          return () => unsubscribeSnapshot();
        } catch (error) {
          reject(error);
        }
      } else {
        reject(new Error("User is not authenticated"));
      }
    });

    return () => unsubscribeAuth();
  });
};

[SuriyaPrakash7]

The error persists bro, can you please check whether there is a problem in my useUser.js which i use as Query.

import { useQuery } from "react-query";
import { toast } from "react-toastify";
import { getUserDetail } from "../api";

const useUser = () => {
  const { data, isLoading, isError, refetch } = useQuery(
    "user",
    async () => {
      try {
        const userDetail = await getUserDetail();
        return userDetail;
      } catch (err) {
        if (!err.message.includes("not authenticated")) {
          toast.err('Something is wrong....');
        }
        throw err;  // Ensure the error is re-thrown to be caught by React Query
      }
    },
    { refetchOnWindowFocus: false }
  );

  return { data, isLoading, isError, refetch };
};

export default useUser;