I am working on a new project which currently has Firebase Authentication in place. I haven’t worked with Firebase before and I am not sure if the current implementation makes sense or not. What happens is we call firebase to get an Auth token. Then we take that token and hit our backend which returns a Cookie. That Cookie then gets sent in Headers to verify the users identity.

I am wondering

1. Does this method even make sense? Why wouldn’t I just use the auth token provided by Firebase to verify the users identity for my other api calls?

2. Are Cookies still the considered the best way to preserve user sessions? I noticed that Safari prevents cookies by default and the user would have to go in and manually update settings to allow them.

  const handleAuthStateChange = async (user) => {
    if (user) {
      const initial = user.displayName?.charAt(0).toUpperCase() || "";
      setIsAuthenticated(true);
      const newUserData = {
        ...user,
        displayName: user.displayName,
        initial: initial,
      };
      setUserData(newUserData);
      localStorage.setItem("userData", JSON.stringify(newUserData));
      try {
        const idToken = await user.getIdToken(true);
        const response = await fetch(`${process.env.REACT_APP_API_URL}/session_login`, {
          method: "POST",
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
          },
          credentials: "include",
          body: JSON.stringify({ idToken }),
        });
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        const updatedUserData = {
          ...newUserData,
          email: data.user_data[0]?.email || null,
          credits: data.user_data[0]?.credits || 0,
          providerId: user.providerData[0]?.providerId || null,
          ...data,
        };
        setUserData(updatedUserData);
        localStorage.setItem("userData", JSON.stringify(updatedUserData));
        getProducts();
      } catch (error) {

      }
    } else {
    }

  };