Lazy load components requiring authentication with react-redux - reactjs

Question

I'm trying to create a website using react+redux.
I've already setup jwt authentication on the server.
What I'd like to do is to lazy load some of my components/containers and reducers so that they can be downloaded only by authenticated users. I already know how to hide components from unauthenticated users (client side), but I would prefer to prevent them from downloading the relative javascript code.
I am using webpack, and I've already looked into react-router and require-ensure (https://stackoverflow.com/a/33044701/2920112), but this approach doesn't seem to handle authentication at all.
I've also considered using fetch in some way (probably bundling the private code separately with webpack), but I wouldn't know what to do with the bundle once I fetch it.
Am I approaching the problem in the wrong way?
The only alternative I see is to provide two HTML files, one loading a webpack bundle with only the public content, and one downloading also the private code. This however seems really suboptimal.
What is the correct approach?

Answer 1

We solved this by using react-router:
<Route
key="secured_component"
path="/secured"
onEnter={handleEnterSecuredComponent}
getComponent=({nextState, cb) => {
require.ensure([], () => {
cb(null, require('YourComponent').default);
});
}}
/>
...
const handleEnterSecuredComponent = (nextState, replace) => {
const {login: {success}} = store.getState();
if (!success) {
replace('/login');
}
};
So your login page should set in redux {login: {success: true}} if user is authenticated.
If an authenticated user tries to access /secured, he will be redirected to /login.
the require.ensure does not play any role of authentication. It just an entry point for webpack to split the chunk of js files for lazy loading.

Answer 2

For anyone still looking into this, React has now added the ability to split the codeand do lazy-loading when using webpack:
https://reactjs.org/docs/code-splitting.html
While this by itself is not enough to require authentication for the lazy-loaded modules, it can be paired with some authorization mechanism living on a reverse-proxy.