Authenticated routes with React-Router & Meteor

help
1

I’m looking to add authentication to my app and im trying to figure out the best way to add protected routes that require the user to be logged in.

I’ve read over a few examples on the web but they seem to all be doing things a bit different. For example, in this forum post, one user recommends either using browserHistory.push() to prevent a route, or using the onEnter hooks from react-router. Others recommend doing it at the “component level”.

Currently, my router looks like the following:

const routes = (

	<Router history={browserHistory}>
	    <Route component={App}>
	    	<Route path="/" component={Home} />
	    	<Route path="signin" component={Login}/>
	    	<Route path="signup" component={SignUp} />
	    	<Route path="dashboard" component={Dashboard}>
	    		<Route path="messages" component={Messages}/>
	    		<Route path="settings" component={Settings}/>
	    		<Route path="installation" component={Installation}/>
	    	</Route>
	    	<Route path="*" component={NotFound}/>
	    </Route>
  	</Router>

);

export default routes

Here, I’d like the dashboard and all child routes to require the user to be logged in. What is the standard way of implementing auth routes into an app structured like this? My main concern is keeping my router easy to reason about.

2

We’ve been getting good mileage out of the onEnter pattern. It seems to scale reasonably well.

1 Like
3

That’s what Base seems to be doing as well.

1 Like
4

Why not protect the “layouts / components” instead of protecting routes?

It is what you see on the “page” that you want to protect, or is it what you see on the address bar? I take it the asnwer is the former.

Design your layouts and components in such a way that if it requies a logged in user, then show a warning or a login form. This way, you will not need to handle endless usecases of trigger based routing.