如何做高效的客户端认证？

Question

For my web app, which has both a public/not logged in view as well as an admin view, I have been using a completely separated frontend (React served with nginx) and backend. One of the appeals of separating the two is that if I wanted I could totally rewrite the backend in Go or Rust and not affect the frontend at all.

However, to do client side authentication I essentially have to maintain two different “states”: one on the client, one on the server.

Since client side authentication is risky/not secure, I wrap all my authenicated components/routes on the frontend in an authorization HOC which makes an HTTP call to the server to see if the user is authorized. This is more secure but in production noticeably slow, delaying each route render for almost 2 seconds.

The alternative is to be less secure, just maintain authentication on the client side without HTTP calls (ie setting isAuth to true in redux). This means users can bypass protected routes, but can't do too much damage as the server uses authentication middleware.

Any advice, experience, or opinions here? Should I just go isomorphic and couple myself to full-stack Javascript?

Answer 1

You should be generating a session cookie or an auth token on your server when the user logs in. It should have some sort of lifespan so that it isn't good forever. Then you should store the auth token on the client and use it as an authentication header in future requests. Your api should require an authtoken as a header in all future requests and check to make sure that auth token is still valid. If valid return the regular response if not return a 40x session timeout error.