React protected route with redux

Question

I created a separate node.js restful API for checking if the user token is valid. I did this for my react protected routes, even though most of my endpoints already checks the user token.

My redux Thunk:

const verifyToken = () => {
  return async (dispatch: Dispatch) => {
    await axios
      .get("http://localhost:9999/authenticate", {
        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
      })
      .then(async (resp) => {
        const { message } = await resp.data;
        console.log(message);
        if (message === "verified") dispatch({ type: "signIn-success" });
      })
      .catch((err) => {
        console.log(err);
        dispatch({ type: "logout-user" });
      });
  };
};

Protected Route:

const ProtectedRoute: FC<{ children: ReactNode; path: string }> = ({
  children,
  path,
}) => {
  const dispatch = useDispatch(); 
  dispatch(verifyToken()); //dispatch thunk
  const status = useSelector((store: RootStore) => store.status)

  return status && status === "loggedOut" ? (
    <Redirect to="/" />
  ) : (
    <Route path={path} render={() => <>{children}</>} />
  );
};

The problem is that it takes time to dispatch my thunk, so it redirects to "/" even though the user token checking hasn't finished.

So what happens is, the value of status is "loggedOut" at first then my thunk will check if the token is valid. If it is, status becomes "loggedIn", but its too late because it already redirected to "/"

You should add a "pending" or "processing" state and conditionally not render the route or redirect until the updated status is known. — Drew Reese
– Drew Reese, Commented Jan 4, 2021 at 3:39

Taghi Khavari · Accepted Answer · 2021-01-04 07:53:54Z

1

You need a loading for the time you're dispatching the action, something like this:


const ProtectedRoute: FC<{ children: ReactNode, path: string }> = ({
  children,
  path,
}) => {
  const [loading, setLoading] = useState(true);

  const dispatch = useDispatch();
  const status = useSelector((store: RootStore) => store.status);

  async function verify() {
    await dispatch(verifyToken()); //dispatch thunk
    setLoading(false);
  }

  useEffect(() => {
    verify();
  }, []);

  if (loading) return <div>Show Loading...</div>;

return status === "loggedOut" ? (
  <Redirect to="/" />
) : (
  <Route path={path} render={() => <>{children}</>} />
);
};

edited Jan 4, 2021 at 7:53

answered Jan 4, 2021 at 5:09

Taghi Khavari

6,6173 gold badges21 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kevin Bryan Over a year ago

It worked but I also needed to add "await" on my thunk. "await axios()"

Collectives™ on Stack Overflow

React protected route with redux

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related