RE feedback point 3, protected routes

[Ivo-Evans]

What we did is write a component called ProtectedRoute that either returned a Route or a Redirect depending on whether the user was logged in. If they were logged in it returned the route, otherwise a redirect to the login page. We then put it in our router switch statement whenever we wanted a protected route. The component ended up looking like this:

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

export default function ProtectedRoute({ path, component }) {
    if (authorised()) {
        return <Route exact path={path} component={component} />;
    }
    return <Redirect to="/" />;
}

And our authorised() function looked like this

export default function authorised() {
    const authString = localStorage.getItem('auth');
    if (authString) {
        const auth = JSON.parse(authString);
        if (validateExp(auth.expires)) {
            return true;
        }
    }
    return false;
}

validateExp is another one we wrote ourselves. It compares the time in the JWT against the present.

This method doesn't stop a hacker getting to the route. That would require a server request. It just stops a normal user who isnt logged in getting to a route, so it makes routes semi-protected. For us, the specifics, like the cards on the page, required a server request, and there we checked that the JWT was verified

[Ivo-Evans]

export default function validateExp(exp) {
    const date = new Date();
    const now = Math.round(date.getTime() / 1000); // JavaSript dates are accurate to the millisecond but the JWT standard specifies dates accurate to the second
    return Number(exp) > now;
}

[Joepock123]

Sweet cheers for this @Ivo-Evans really useful :)