Any suggested workflow for protected routers

[tigrankhachikyan]

Do you have any suggestions how/where to implement Auth logic?

[noahtallen]

I implemented it by digging into Root.js to create a signin page. If the user is signed in, I show all the routes of the application. If not, I show a signin page (which uses firebase auth). Unfortunately, it's really basic, so I'm now looking to have a way to show certain routes to certain users. All would be authenticated, but there would be different roles. Also looking for suggestions on how to protect routes

[supnate]

@ntomallen Thanks for the sharing. It's really the right place to do the trick. All routing rules are handled in Root component. To protect some route rules, you can filter rules by role, say that we can add a new property in route.js of each feature:

{ path: 'app/:name/monitoring', component: Monitoring, role: 'admin' },

Then filter rules from this.props.routeConfig in render method of Root.js.

[noahtallen]

Nice! This is how I ended up implemented it for our use case. I put it in the render() method of Root.js

      // Get the route configuration
      let routeConfiguration = this.props.routeConfig
      // These get set to the state as the user logs in:
      if (!this.state.admin && this.state.hasBetaKeyAccess) {
        const betaKeyRoutes = ["", "/", "beta-keys", "*"]
        const protectedRoutes = routeConfiguration[0].childRoutes.filter(route => betaKeyRoutes.includes(route.path) )
        routeConfiguration[0].childRoutes = protectedRoutes
      }
      const children = renderRouteConfigV3(null, routeConfiguration, '/')

[chiester]

I like the snippet above conceptually, but I think it mutates props?

Anyway, here's a render method in Root.js that I came up with that protects all routes except for designated public routes. If you're authenticated, you get everything, but if not, you only get the public routes (you could of course, further sub-divide this by role, etc.) Depends on immer immutability library and lodash/uniq. You would naturally have to figure out how to get props.authenticated based on your interaction with your auth provider. This could also be improved by somehow redirecting to a login screen rather than just getting nothing ;-)

render() {
    const publicRoutePaths = [{ path: '/' }, { path: '*' }];
    let publicRouteConfig = [];
    if (!this.props.authenticated) {
      publicRouteConfig = produce(this.props.routeConfig, draft => uniqBy(draft[0].childRoutes, publicRoutePaths, 'path'))
    } else {
      publicRouteConfig = this.props.routeConfig;
    }
    const children = renderRouteConfigV3(publicRouteConfig, '/');
    return (
      <Provider store={this.props.store}>
        <ConnectedRouter history={history}>{children}</ConnectedRouter>
      </Provider>
    );
  }

[cesc1802]

@chiester, please provide full solution to implement Secu Route. thanks