Best way to restrict pages to logged in users only

[jnsandrew]

Any pointers on redirecting users who try to access a route that is for logged in users only? Here's what I have so far in routes.js:

// const user is either true or false, and passes that in as a prop to the app
on('*', async (state, next) => {
    const component = await next();
    const user = await http.get(`/api2/user`);
    return component && <App context={state.context} user={user}>{component}</App>;
});

I feel like the redirection should happen somewhere in this file, rather than inside somewhere, is it something to do with the on('error'... function? Though I'd rather redirect users to a login page and not a 404.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[simtechmedia]

I followed this tutorial, https://auth0.com/blog/2015/04/09/adding-authentication-to-your-react-flux-app/ worked good :)

[mychaelgo]

@simtechmedia can you give full example on what you implement ?

[gmlnchv]

@simtechmedia +1

[ucay]

In my case, I use redux.
You can add this to src/routes/index.js or src/routes/yourroute/index.js

async action({ store }) {
    const { user } = store.getState();
    if(null === user) return { redirect: '/login' };

    (...)
}

[jnsandrew]

Oh I forgot all about this. In the end I just validated with a token, and redirected users if the response from the API was a 403.