Create a SecuredRoute component for route-level security

[brettvniekerk]

I've run into several occasions where I'm creating logic that behaves in this way:

IF a route is protected
    CHECK if the user is authorised
        IF the user is not authorised
            REDIRECT back to a fallback route
        ELSE
            NAVIGATE to the route
ELSE
    NAVIGATE to the route

some example code:

/**
 * {isProtected} determines whether to check if the route needs protecting
 * {accessible} is a boolean that determines whether a route is protected
 * or not (can be any boolean state - most likely whether a user is authed or not)
 * {fallback} is the route to navigate to given accessible is false
*/
<Routes>
    {Routing.map(({ path, element, props, isProtected, accessible, fallback }) => (
        <Route 
            path={path} 
            element={
                isProtected ? (
                    accessible ? (
                        element
                    ) : (
                        <Navigate to={fallback} />
                    )
                ) : (
                    element
                )
            }
            {...props}
            key={path}
        />
    ))}
</Routes>

I think react-router might benefit from a SecuredRoute component that implements accessible: boolean and fallback: string props that expands to the logic above.

Example implementation:

<Routes>
    <Route index element={<Home />} />
    <Route path="/signup" element={<Signup />} />
    <SecuredRoute path="/account" accessible={isUserAuthed} fallback="/" element={<Account />} />

    <Route path="*" element={<Navigate to="/" />} />
</Routes>

In this implementation, if isUserAuthed is false, then the route /account will navigate back to /, otherwise the route will be accessible.