React Question with Redirect

1

I am building a React App where some routes are private. For some reason, I once was able to redirect to the /dashboard but now I can rarely get that to occur. And also, previously when I would refresh, it would still throw me to the /login.

Would appreciate any help!

Here is my code.

ProtectedRoute.js

import React, { useContext } from 'react';
import { Route, Redirect, withRouter } from 'react-router-dom';
import authContext from '../context/Auth/authContext';

const ProtectedRoute = withRouter(
  ({ component: Component, history, ...rest }) => {
    const AuthContext = useContext(authContext);
    AuthContext.checkAuth();
    return (
      <Route
        {...rest}
        render={props =>
          !AuthContext.isAuth && !AuthContext.isLoading ? (
            history.push('/auth/login')
          ) : (
            <Component {...props} />
          )
        }
      />
    );
  }
);

export default ProtectedRoute;

RoutingObject.js

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './components/pages/Home';
import Login from './components/pages/Login';
import SignUp from './components/pages/SignUp';
import NotFound from './components/pages/NotFound';

import AlertState from './context/Alert/AlertState';
import AuthState from './context/Auth/AuthState';
import Dashboard from './components/pages/Dashboard';
import ProtectedRoute from './routing/ProtectedRoute';

const RoutingObject = props => {
  return (
    <Router>
      <AlertState>
        <AuthState>
          <Switch>
            {/* General Routes */}
            <Route path="/" component={Home} exact />

            {/* Auth Routes */}
            <Route path="/auth/login" component={Login} exact />
            <Route path="/auth/signup" component={SignUp} exact />

            {/* Profile Routes */}
            <ProtectedRoute path="/dashboard" component={Dashboard} />

            {/* Chat Screens Routes */}

            {/* Spaces */}

            {/* Community */}

            {/* Caught */}

            {/* Not Found */}
            <Route component={NotFound} />
          </Switch>
        </AuthState>
      </AlertState>
    </Router>
  );
};

export default RoutingObject;

Context: AuthState.js

import React, { useState } from 'react';
import { withRouter } from 'react-router-dom';
import jwt from 'jsonwebtoken';
import AuthContext from './authContext';
import firebase from '../../config/firebase';

const AuthState = withRouter(({ history, children }) => {
  const [currentUser, setCurrentUser] = useState();
  const [isAuth, setIsAuth] = useState();
  const [isLoading, setLoading] = useState();
  const [authToken, setAuthToken] = useState(
    localStorage.getItem('auth-token')
  );
  const loginUser = async (email, password) => {
    setLoading(true);
    const usr = await firebase
      .auth()
      .signInWithEmailAndPassword(email, password);

    await setCurrentUser(usr);

    jwt.sign(
      { data: await usr.user },
      process.env.REACT_APP_SECRET_KEY,
      (err, token) => {
        if (err) throw err;
        window.localStorage.setItem('auth-token', token);
      }
    );

    await history.push('/dashboard');
    await setLoading(false);
    await setIsAuth(true);
  };

  const checkAuth = async () => {
    setLoading(true);
    await jwt.verify(
      authToken,
      process.env.REACT_APP_SECRET_KEY,
      (err, data) => {
        if (err) throw err;
        setCurrentUser(data);
        setLoading(false);
      }
    );

    return setIsAuth(true);
  };

  return (
    <AuthContext.Provider
      value={{
        loginUser,
        currentUser,
        checkAuth,
        isAuth,
        isLoading,
        setLoading
      }}
    >
      {children}
    </AuthContext.Provider>
  );
});

export default AuthState;