React Native 不持久化 Firebase 用户

Question

我正在使用

ReactNativeAsyncStorage

来保留 Firebase 用户。但是，重新加载应用程序后，我的用户不会被保留。 useAuth 挂钩在应用程序加载时起作用。我在这里做错了什么？

Firebase 配置

import { initializeApp } from "firebase/app";
import { initializeAuth, getReactNativePersistence } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import ReactNativeAsyncStorage from "@react-native-async-storage/async-storage";

const firebaseConfig = {
  ...
};

export const FIREBASE_APP = initializeApp(firebaseConfig);
export const FIREBASE_AUTH = initializeAuth(FIREBASE_APP, {
  persistence: getReactNativePersistence(ReactNativeAsyncStorage),
});
export const FIREBASE_FIRESTORE = getFirestore(FIREBASE_APP);

验证挂钩

import { createContext, useContext, useEffect, useState } from "react";
import { FIREBASE_AUTH } from "../config/firebase";
import { onAuthStateChanged, signInAnonymously } from "firebase/auth";

const AuthContext = createContext();

export function Provider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(FIREBASE_AUTH, (user) => {
      if (user) {
        setUser(user);
      } else {
        setUser(null);
      }
      setLoading(false);
    });
    return () => {
      unsubscribe();
    };
  }, [user]);

  const authSignInAnonymously = async () => {
    try {
      const userCredential = await signInAnonymously(FIREBASE_AUTH);
      setUser(userCredential.user);
    } catch (error) {
      setUser(null);
      console.log(error);
    }
  };

  return (
    <AuthContext.Provider
      value={{
        user,
        loading,
        authSignInAnonymously,
      }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => {
  const authContext = useContext(AuthContext);
  if (!authContext) {
    throw new Error("useAuth must be used within an AuthContextProvider");
  }
  return authContext;
};

APP.JS

import { NavigationContainer } from "@react-navigation/native";
import { Provider, useAuth } from "./app/hooks/useAuth";
import { PublicLayout } from "./app/layout/PublicLayout";
import { PrivateLayout } from "./app/layout/PrivateLayout";

export default function App() {
  return (
    <Provider>
      <Navigator />
    </Provider>
  );
}

const Navigator = () => {
  const { loading, user } = useAuth();

  return (
    <NavigationContainer>
      {user && !loading ? <PrivateLayout /> : <PublicLayout />}
    </NavigationContainer>
  );
};

Answer 1

在您的 Provider useEffect 中，设置器是异步的，您可能在设置用户之前将加载布尔值设置为 false。

您应该添加另一个 useEffect：

useEffect(() => {
  if (user) {
    setLoading(false)
  }
}, [user])