我的 Typescript React + Firebase 应用程序在刷新时注销

Question

I am initializing a TS React App connected to Firebase with a private route when the user is logged in.

Everything seems to work well until I refresh the page. When I do that, the app takes me back to the public route which is a login page.

I think that the problem could be the initial state of the context which is set to null , but maybe it's a different problem.

Here is the code for my user context:

import React, { useContext, useState, useEffect } from "react";
import firebase from "firebase/app";
import { auth } from "../firebase";

export const AuthContext = React.createContext<firebase.User | null>(null);

export function useAuth() {
    return useContext(AuthContext);
}

export const AuthProvider: React.FC = ({ children }) => {
    const [user, setUser] = useState<firebase.User | null>(null);

    useEffect(() => {
        const unsubscribe = auth.onAuthStateChanged((firebaseUser) => {
            setUser(firebaseUser);
        });

        return unsubscribe;
    }, []);

    return <AuthContext.Provider value={user}>{children}</AuthContext.Provider>;
};

Here is how I created the private route:

import React, { useContext } from "react";
import { Redirect, Route, RouteProps } from "react-router";
import { AuthContext } from "../contexts/AuthContext";

interface IPrivateRoute extends RouteProps {
    component: any;
}

const PrivateRoute = ({ component: Component, ...rest }: IPrivateRoute) => {
    const user = useContext(AuthContext);
    setTimeout(() => console.log(user), 1000);

    return (
        <div>
            <Route
            {...rest}
            render={(props) => {
                return user ? <Component {...props} /> : <Redirect to="/login" />;
            }}>
            </Route>
        </div>
    );
};

export default PrivateRoute;

I will be grateful for all the helpful answers!

Answer 1

I think you need to save the session to stay authenticated. Whenever you refresh the page your user state will be null.

What worked for me is I used JWT. https://jwt.io/

After user logs in successfully my server sends the user a token and I save the token in user's cookies. For each PrivateRoute the user requests they will send the token back to server for verification. If the verification is successful then return the PrivateRoute to them.