React-router: How to authenticate routes using Passport?

[hezjing]

Hi

With React Router, the routing is handled on the client side. May I know how do we authenticate the route the user is trying to access and redirect to a login page if he has not been authenticated?

[gaearon]

There's an example here:

https://github.com/rackt/react-router/blob/master/docs/api/components/RouteHandler.md#willtransitionfromtransition-component-callback

Also,

https://github.com/rackt/react-router/tree/master/examples/auth-flow

[cody]

At the moment I try to find a solution for the same problem. But the auth-flow example seems to scale badly.

In my app some pages should be visible to everyone, other pages should be visible only for logged in users or administrators. My current idea is to replace the routes every time the login status changes. I have not tried that yet, because @gaearon's #658 has not landed on npm. Also with #712 it should be possible to make the routes conditional.

I am new to the router, so probably I have missed something.

[morenoh149]

Thanks for the links and discussion. It's been very informative.
For something like https://github.com/rackt/react-router/blob/master/examples/auth-flow/app.js#L8 it's assuming a global auth variable. How could I get a passport instance exposed in this way?

[kilometers]

https://github.com/rackt/react-router/blob/master/examples/auth-flow/app.js#L129-164

@morenoh149 Not only assumed, but implemented. From what I can tell the global auth object is meant to simulate an authentication API. In auth-flow's case it's using localstorage. However, even though Passport.js is running server-side you can create a similar solution with a few tweaks. On your server, create endpoints for authentication, such as /login, /logout, and even /verify if you wish. Client-side, for login, re-code auth.login to make an AJAX call to the /login endpoint and share the result with your React app.

[morenoh149]

@kilometers amazingly informative. Thank you.

[aroach]

Is there a React router 4 example out there? I came across this one https://github.com/bodiddlie/headache-diary, which is helpful and uses concepts from the docs, but it'd be great to see an example project of how to use passport for oauth server side and rr client side. I have an approach that sets a cookie server side and I can read that from React but trying to figure out how to turn that into a state that I can share in my components is my current dilemma. Thanks!

[sw-yx]

@aroach hey! random v4 user here. here you go: https://reacttraining.com/react-router/web/example/auth-workflow and https://stackoverflow.com/questions/43164554/how-to-implement-authenticated-routes-in-react-router-4

[SunilDy]

@gaearon These links are dead, can you please update it?