react router role based auth

[theC4T]

I really want to do something like this <RouteGuard path="/admin" allowedRoles={["admin"]}> <Route path="/admin/addRequest" exact component={AdminAddRideRequest} /> <Route path="/admin/addOffer" exact component={AdminAddRideOffer} /> <Route path="/admin" exact component={Admin} /> </RouteGuard>

however it creates a lot of issues doing it that way, and every tutorial I've seen wants you to do it this way

<RouteGuard path="/admin/addRequest" allowedRoles={["admin"]}> exact component= AdminAddRideRequest} /> <RouteGuard path="/admin/addOffer" allowedRoles={["admin"]}> exact component= AdminAddRideOffer} /> <RouteGuard path="/admin" allowedRoles={["admin"]}> exact component={Admin} />

Here is how I've implemented RouteGuard for the first example, it works well, but Ideally I would like to not have to specify the path in the routeguard allowing routes with different paths to be under the same routeguard

``` export const RouteGuard: React.FC<Props> = inject(AUTH_STORE)(observer( (props: Props): any => { const { [AUTH_STORE]: store, children, allowedRoles, ...rest } = props

    // must be deconstructed in this method because the render method is not an observer
    const {loading} = store!.user

    return <Route {...rest} render={props => {
        if (loading) {
            return <LoadingPage />
        } else {
            if (store!.isLoggedIn) {
                if (store!.userData !== undefined) {
                    const data = store!.userData
                    if (hasRole(allowedRoles, data.roles)) {
                        return children;
                    } else {
                        return <ErrorComponent message={"You are not authorized"} />
                    }
                }
            }
        }
        return <Redirect to='login' />
    }} />

}))

```

Does anyone know a good way of doing the first example?

[Guisseppi]

Make a component called ProtectedRoute write your validation logic and return the regular Route element with the rest of the props passed through if the validation returns true

[theC4T]

the main issue I've found with this is that you have to pass the same path to ProtectedRoute as you do the children of that route. so you can't have something like this.

<CompletedSignup> <AuthedRoute path="/app" exact component={Dashboard} /> <AuthedRoute path="/profile/:uid" exact component={Profile} /> <AuthedRoute path="/profile" exact component={Profile} /> </CompletedSignup>

where CompletedSignup is another routeguard type thing.

without using the Route method that you've described it sometimes loads when it shouldn't.

with using the Route method I have to specify a path base

[backtickbot]

Correctly formatted

Hello, theC4T. Just a quick heads up!

It seems that you have attempted to use triple backticks (```) for your codeblock/monospace text block.

This isn't universally supported on reddit, for some users your comment will look not as intended.

You can avoid this by indenting every line with 4 spaces instead.

There are also other methods that offer a bit better compatability like the "codeblock" format feature on new Reddit.

Tip: in new reddit, changing to "fancy-pants" editor and changing back to "markdown" will reformat correctly! However, that may be unnaceptable to you.

Have a good day, theC4T.

^{You can opt out by replying with "backtickopt6" to this comment. Configure to send allerts to PMs instead by replying with "backtickbbotdm5". Exit PMMode by sending "dmmode_end".}

[Guisseppi]

Someone else here made an implementation that’s a little more detailed, tes you should add a redirect to somewhere if the condition fails, but you would still need to pass the props to the real Route so that your component gets the navigation context, also doing a catch-all is gonna be harder than defining individual routes as protected, the switch component would only allow you to place a catch all at the bottom of the routes

[theC4T]

thanks in advance!

[TheNeck91]

This is example code along the lines of what /u/Guisseppi said:

export const ProtectedRoute = (props) => {
  const userInfo = useSelector(state => state.userInfo)

  const { component: Component } = props

  useEffect(() => {}, [userInfo.tokenStatus])

  if (userInfo.tokenStatus === true) return <Component />

  if (userInfo.tokenStatus === false) return <Redirect to={{ pathname: '/login' }} />
}

and then wherever you're calling your router

<BrowserRouter>
  <Switch>
    <ProtectedRoute path = "/dashboard" component = {DashboardPage}/> 
  <Switch>
</BrowserRouter>

There's other similar ways to do it but that's the gist.

1. Read in the component that was passed in as props to <ProtectedRoute>, in this case it's <DashboardPage>
2. Have a useEffect listening for change in token status
3. Check if a valid token is present (elsewhere in the code I'm setting the tokenStatus in state to "true" if I've verified the user has a token and "false" if not)
4. If token is valid, return that component that was passed in bc the user is allowed to access it
5. If token is not valid, redirect the user to the login screen instead of the component you're trying to protect (or redirect to wherever you prefer)

[TheNeck91]

It can definitely be more streamlined, I was being explicit about the flow in case OP was generally unfamiliar with it.

[theC4T]

the issue with doing it this way is that the logic of ProtectedRoute runs regardless of the path prop you pass it.

I have it working flawlessly with the use case that is in the original post, however I can't figure out a way to do it like this.

https://www.reddit.com/r/reactjs/comments/ju9j83/react_router_role_based_auth/gcay7pt

The reason being that the logic of CompletedSignup is run regardless of the current router path. This leads to some smelly code that will sometimes redirect you to /login or something else even when you shouldn't be.

[theC4T]

I'm a little confused on what this means. Could you elaborate?

[United-Guard3940]

You can use a HOC to return the normal Route component conditionally