React with Express Private Routes

user_894067 0
Viewed 1411

I've mainly been using server-side rendering solutions to pass data from the server to the client and render that in the browser.

Some major benefits to this include being able to get data and pass it to the client without exposing a route that is public. So being able to keep that data hidden and only expose it when I want. I know other applications such as Facebook have data that is able to be received ONLY by their applications (iOS, Android, web applications) for example timeline data is not a public route and is only able to be received by their own applications.

How can I achieve something like this using React? With server-side rendering I can lock down those functions/routes and only allow them to be called from the backend code and not expose them, I can also do things like check to make sure the user is logged in and such.

How can I achieve this with React?

reactjs express node.js javascript
2 Answers

As I understand it, you want to restrict certain routes to logged in users.

For logging in with an identity provider like Facebook, the goto is passport.js. A question about using react/express/passport has been asked before on SO, eg here.

Edits in response to comments:

So, you have some functions that output data. If you render server side, those functions aren't exposed. But, if you expose them via an API... They are exposed. And since the JavaScript code gets sent to the client, you can't just put a secret in a header, because you have to send that secret to the client.

What I was saying above is, if you restrict those APIs to logged in users, then the problem is solved by OAuth and/or JWTs, a la this. JWTs coukd also work for you without login.

However, if what you want to do is leave the API open to requests from your app, whether or not the user is logged in, I don't know any perfect solution, just some tricks:

  • Use HTTPS
  • Set CORS policies to only allow your domain(s)
  • Use a package like Helmet

Another thing worth checking out that I haven't used, but looks good is Microgateway

user_35181080

This is commonly solved using the different concepts of authentication / authorisation, as for example defined in the OAuth2 Protocol.

Let me describe this on a very high and abstract level:

You can say that there are different clients that access your API. The API can define which client can access which route. Each client has a client ID and a client secret to identify themselves to an authentication server, and to exchange the ID and secret against a token. This token (Json Web Token for example) encodes the permissions for this client, which could for instance mean to access certain routes, and not others, in your API.

However you have to consider that no pure web application is 100% safe, i.e. there are no means by which the client secret mentioned above can be protected with 100% certainty in a pure web application. For that purpose, you should also implement another authentication flow using passwords etc... Otherwise, you will also have to implement some sort of server-side proxy that keeps the secret safe on the server-side, and gets the token returned to the client.

If you use a 3rd party API where you want to restrict access to, you will need to put a proxy or API Gateway in between, which will perform the access control as described above. So this means that the routes that can be accessed in this manner shouldn't expore any sensitive data such as user data.

I hope these thoughts help you in some way to find the right architecture for your problem..

user_46504100
Related