User Validation
Since the system would be used internally by the NHS clinicians, we work really hard to enforce that no unauthorized user can gain any access to the services provided.
As valid user logs in, the backend would provide a session token that lasts for 30 minutes which is needed to gain access to any services or webpages ( see API ), the token would be stored as a common context as shown below to be accessed by all children React components.
UserContext
Sets up a common context for the session token to all components in the app. The useEffect hook is used to monitor changes in token, and if token has been modified through setToken, which most commonly happens during Login, then the token is sent to the backend to verify its validity.
If the token is valid, then information of the user would be returned back, other wise the token is default to set to null, the reason for this is to set up PrivateRoutes as shown below.
You would have noticed that I also included the usrPermission state in the context provider, its main purpose is to indicate the access rights (Read, Read & Write, Admin) of the logged in user, and is less relevant to the user validation process.
UserContext.js
As you can see the context provider is wrapped around the entire application, and the children components would be able to access token, setToken and logout function through useContext of UserContext
index.js
App Routing
This component contains all the routing information for the entire app, linking a specific path to a component. As you have noticed all routes are protected by PrivateRoute except Login, such that it would be impossible for unauthorized users to access these protected routes.
App.js
components/PrivateRoute.js
PrivateRoute component is implemented such that when unauthorized users tries to access the protected routes, they would be rerouted to the Sign In page.
The token is retrieved as a common context provided by UserContext, and is null if the token is not a valid token, and in that case the Navigate component would reroute user to the signin page. If the token is valid, meaning it's not a falsy value, then the children props would be rendered.
Login
The login page is a form that requires user to enter both username and password. On submit, the handleToken function is called which sends the entered credentials to the backend. If the credentials are not valid then error messages would be shown.
components/Login/SignIn.js
If the credentails are valid, then the session token received would be used to set value of the token common context using setToken hook, this then triggers the useEffect hook in UserContext to check if the session token is valid.
As mentioned before, if the session token is not valid, then the token common context is reset to null and continues to restrict access to pages through PrivateRoute (since token would be null). But if the token is valid, then when the SignIn component navigates to root through useNavigate hook, PrivateRoute would allow rendering of the Home component.
