How do you implement Auth Middleware with Next.js when using a separate REST API backend?

Instead of doing direct checks, consider creating a middleware that calls a validation endpoint on your backend. This approach might be more fitting for static frontends. This endpoint could return token status and related info to help manage your session more effectively.

Your secret key shouldn't be on the frontend—it's meant to stay secure on the backend. The backend is actually what verifies the identity of users, so you don't want that exposed. Keeping it hidden is essential for your security.

If your JWTs use asymmetric encryption, you're in luck! You'll have a private key that stays secure on your backend and a public key that you can share with the Next.js server to verify JWTs. This is a common method, and you'll find it quite secure. Just make sure you’re familiar with the library you’re using for JWTs, as the details might vary.

If possible, you can simplify your setup by sharing a higher domain for your tokens' cookies. This way, the browser can manage token access more efficiently. I recommend structuring all your API calls through a centralized service on the client side so you can manage token state and refresh cycles effectively. Handling errors from token validation directly in your network service will make your app more resilient.

In my previous project with a similar setup, I made sure to handle tokens efficiently by letting the client manage them with the backend. The client would verify the signature and reject requests if a token failed. Best practices usually involve refreshing tokens as necessary, allowing for smoother user experiences.