React Router based on dynamic context values - reactjs

Question

I hope all you are ding good.
I am developing a react(typescript) application in which I have to handle authentication and authorization.
I am following this pattern.
IAuthContext (will be loaded during startup or when user change their state)
export interface IAuthContext {
isAuthenticated: boolean;
isInitialized: boolean;
user: firebase.User | null;
permissions: object;
landingPage: string;
isOnBoardingCompleted: boolean;
}
Routes.js
const routerConfig = [
{
key: "key_",
path: '/login',
component: Login,
isPrivate : false
},
{
key: "dashboard",
path: '/dashboard',
component: Frame,
content: AnalyticsDashBoard,
isPrivate : true
},
App.tsx
return (
<BrowserRouter>
<div>
<Switch>
{routes.map((route) =>{
return (route.isPrivate ?
<PrivateRoute {...route} exact/>
:
<Route path={route.path} component={route.component} key={route.key} exact/>)
})}
</Switch>
</div>
</BrowserRouter>
);
PrivateRoute.tsx
return (
<Route
{...rest}
render={(routeProps) =>
props.context.isAuthenticated ? (
<Component {...routeProps} content={props.content}/>
) : (
<Redirect
to={{
pathname: '/login',
state: { from: routeProps.location }
}}
/>
)
}
/>
);
Inside privateRoute I have access to role and permissions along with landing page(if user didnt complete registration after login, he has to be redirected to registration page). Also I need to give all possible combinations in privateroute based on authentication since it will load only once.
I tried to do this in private route
if (props.context.isAuthenticated && !props.context.isOnBoardingCompleted) {
console.log("Going to redirect here to onboard--", props.context.landingPage);
return <Route path={props.context.landingPage} component={OnBoarding}/>
}
But this is not working since only the URL is changing. Also if the user is done with onboarding, I might not have a Route for it since all router controls already created with first-time values.
Please advise me on how can I handle this? All I need to do it is to have some sort of interceptor where I route/redirect to pages based on dynamic context values.
Expectation:
Just like scenario above, there are multiple roles and permissions and all those conditions should be checked here.

Answer 1

<Route path={props.context.landingPage} component={OnBoarding}/> should be defined in your Router component.
You can use a nested ternary, though this can lead to readability issues.
return (
<Route
{...rest}
render={routeProps =>
props.context.isAuthenticated ? (
props.context.isOnBoardingCompleted ? (
<Component {...routeProps} content={props.content} />
) : (
<Redirect
to={{
pathname: "/landing", // or "/onboard" whatever the route is
state: { from: routeProps.location }
}}
/>
)
) : (
<Redirect
to={{
pathname: "/login",
state: { from: routeProps.location }
}}
/>
)
}
/>
);

Answer 2

May be you can organize your code like below. It will help you separate different routes and handles their role/auth checks in a clean readable manner.
function App() {
return (
<BrowserRouter>
<div>
<Switch>
<Route component={PublicContainer}/>
<Route component={PrivateContainer}/>
</Switch>
</div>
</BrowserRouter>
);
}
const PrivateContainer = () => (
<div>
<NavBar/>
<Switch>
//routes with auth checks
</Switch>
</div>
);
const PrivateContainer = () => (
<div>
<NavBar/>
<Switch>
//Free routes
</Switch>
</div>
);