reactjs - 使用 React 上下文 API 进行 Firebase 身份验证，在 localStorage 中跟踪用户 ID

Question

我尝试开发一个带有 Firestore 身份验证的非商业 React 应用程序。我的上下文为我提供了用户是否登录或注销的状态：

export const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
 const [currentUser, setCurrentUser] = useState(null);

 useEffect(() => {
   authentication.onAuthStateChanged((user) => {
   setCurrentUser(user);
 });
 }, []);

return (
 <AuthContext.Provider value={{ currentUser }}>
  {children}
 </AuthContext.Provider>
 );
};

我用上面描述的提供者包装了我的组件。当用户登录或注册时，我将其用户 ID 存储在 localStorage 中；

localStorage.setItem("userId", cred.user.uid);

然后，当我需要在我使用的组件中获取 currentUser 时；

const { currentUser } = useContext(AuthContext);
const userId = currentUser ? currentUser.uid : localStorage.getItem("userId");

如果我不使用 localStorage 来存储用户 ID，当用户刷新页面时我无法获取用户 ID，因为上下文没有提供我 currentUser 状态。

将用户 ID 存储在 localStorage 中对我来说似乎不安全且不合适。我想知道使用 Firebase 身份验证跟踪用户信息并做出反应的最佳做法。寻求帮助，在此先感谢！

标签： reactjsfirebase-authenticationreact-context