我正在使用firebase和nextjs制作一个应用程序,当我登录并尝试获取当前用户时,我创建了一个登录页面。这个问题开始于我几天前在react native中也是第一次它保持状态,在firebase从9.2.0更新到10.0.0之后,用户没有保持状态。
Nextjs代码:
AuthConext.js:
import React from "react";
import { onAuthStateChanged, getAuth } from "firebase/auth";
import firebase_app from "@/firebase/config";
const auth = getAuth(firebase_app);
export const AuthContext = React.createContext({});
export const useAuthContext = () => React.useContext(AuthContext);
export const AuthContextProvider = ({ children }) => {
const [user, setUser] = React.useState(null);
const [loading, setLoading] = React.useState(true);
React.useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (user) => {
if (user) {
console.log("user change");
setUser(user);
} else {
setUser(null);
}
setLoading(false);
});
return () => unsubscribe();
}, []);
return (
<AuthContext.Provider value={{ user }}>
{loading ? <div>Loading...</div> : children}
</AuthContext.Provider>
);
};
字符串
Login.js(查看评论):
const { user } = useAuthContext(); // Gives Current User
async function handleSignIn() {
if (password && email) {
const { result, error } = await signIn(email, password); // signin with email function rest is handled in an other file where the signin with Email Passowrd fucntion is called
console.log(user); // Giving undefined
if (error) {
setErrorStop(error);
} else {
router.push("/blog"); // Tried on /blog page too the same AuthContext but still un defined
}
}
}
型
有些人可能会说,用户可能需要时间来初始化,我尝试了它在一个单独的页面,但它仍然给未定义。
1条答案
按热度按时间3npbholx1#
看起来您希望在
signIn
函数完成后立即更新user
:字符串
这不是Firebase身份验证状态侦听器的工作方式,也不是react钩子的工作方式。
user
不会在组件代码期间更新。组件的当前运行必须完全完成,然后将使用更新的用户变量进行新的运行。您的组件应该在登录过程中单独检查用户。