Figuring out how to implement protected routes with react-router wasn't straightforward as none of our team members had any previous experience with using react and had to learn it from scratch for this hackathon. We implemented a solution by using React's useContext hook thanks to React's great documentation. Here is a code snippet:

function ProtectedRoute({children}) {
	const authenticated = useContext(AuthContext).authenticated;

	return authenticated ? children : (
		<>
			<Container sx={{height: "100%"}}>
				<Stack spacing={5} direciton={"column"} sx={{height: "100%"}} alignItems={"center"} justifyContent={"center"}>
					<Typography variant="h2">You are not logged in!</Typography>
					<Typography><Link to="/login">Click here</Link> to go to the login page.</Typography>
				</Stack>	
			</Container>
		</>
	);
}

While making the backend we initially planned on using Passport.JS but unfortunately it had really bad documentation with no information on the function's parameter and return values and only containing examples. We instead resorted on making the authentication from scratch other than using

express-session