A generic way for protecting/scoping react router routes with zero dependencies.
yarn add react-router-protected-switch
There are few common mistakes done with custom protected routes which this library aims to resolve.
- Validation happens even when the path isn't matched
- Validation is strongly related to the authorization
- Validation can't be scoped to the subtree
By connecting Route
with SwitchContext
we get the new ProtectedRoute
component which doesn't change the Route
props interface (remains agnostic regarding protection; doesn't require any) but to redirect unwanted visits.
SwitchContext
- the context provider for the custom switch componentsswitchContext
- under the hood contextSwitchContextConsumer
- the context consumer for the custom protected routesuseSwitchContext
- useful for creating custom protected routes
Switch component:
const AuthSwitch = ({ isAuthenticated, children }) => {
const redirect = !isAuthenticated && '/login';
return (
<SwitchContext value={redirect}>
{children}
</SwitchContext>
);
};
In the Router tree:
<Router>
<AuthSwitch>
// Scoped validation - all routes under the AuthSwitch are protected
<ProtectedRoute component={SafePage} path="/safe-page">
</AuthSwitch>
// Routes outside the switch behave normally
<ProtectedRoute component={LoginPage} path="/login">
</Router>