A Pattern for Auth based Routing using Redux, React Router
- Token based authentication or JWT. This one is good for Django Rest Authentification.
- The first line of defense in protecting sensitive data is your REST API and its auth system, not your React SPA. This solution is just for intelligent routing, not protecting sensitive data.
- Redux or equivalent state management framework that allows you to easily connect components to a single source of truth state.
If you're familiar with the React concept of "lifting state up", then this will be a pretty familiar solution.
The core idea is to lift "auth business logic up". This means introducing a higher-level switch to your component heirachy that sits above the standard react router.
In this pattern, instead of having a single React Router instance, you have many:
- One for totally unauthenticated visits (home page, login page).
- One for regular authenticated users.
- One for admin users.
Which one displays will depend on the initial auth request that determines authorization and authentication.