Nextjs Firebase 身份验证状态不持久

Question

我不知道为什么 firebase 身份验证不持久。到目前为止，我的项目非常简单，我有这个登录功能。

await signInWithEmailAndPassword(auth, email, password);

在

layout.tsx

我有

onAuthStateChange

const unsubscribe = onAuthStateChanged(auth, (user) => {
      console.log("the current user is: ", user);
      if (!user) {
        router.replace("/sign-in");
        return;
      } else {
        router.replace("/main");
      }
    });

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

就是这样。我可以登录并被重定向，但是当我重新加载页面时，就不再有用户了。

下一个版本是14.1。

提前致谢。

Answer 1

仅当您使用 firebase 登录/注销时才会触发 onAuthStateChanged 。因此您可能需要在上下文提供程序中添加订阅并将用户对象存储在状态中并从上下文提供程序导出用户对象。然后您将能够检查用户页面上下文中的对象会相应地加载和重定向。

     const authenticate = getAuth(initializeApp(firebaseConfig));

        const AuthContext = createContext<any>({});
        export const useAuth = () => useContext<any>(AuthContext); 
        export const AuthContextProvider = ({ children }: { children: React.ReactNode }) => {
          const [user, setUser] = useState<any>({ email: null, uid: null ,displayName : null});
          const [initializing, setInitializing] = useState<boolean>(true);
        
        
          useEffect(() => {
            const unsubscribe = onAuthStateChanged(authenticate, (user) => {
              if (user) {
                setUser({
                  email: user.email,
                  uid: user.uid,
                  displayName: user.displayName,
                  initializing:initializing,
                });
              } else {
                  
                setUser({ email: null, uid: null, displayName:null, initializing:true});
              }
              setInitializing(false);
            });
            return () => unsubscribe();
          }, [initializing]);
        
        
          return (
            <AuthContext.Provider value={{ user }}>{initializing ? null : children}</AuthContext.Provider>
          );
        };

然后，您可以从您的页面/布局/中间件检查是否要重定向

 const { user } = useAuth();   
 if(!user)
   router.replace("/sign-in");
    else
   router.replace("/main");