I have backend and frontend applications. On the backend side I'm using RSA private + public keys to issue JWTs. I understand that the private key should never be shared, but what about public key?

I'm using next.js for the frontend and I want to render or NOT to render some components based on user's role within the JWT. Suppose that I have some kind of <AdminNavigationBar/> and I want to render it only if user's role is ADMIN. Now I have two options and the first one is exactly about my question.

1. Include public key into frontend and verify JWTs on client side. But I don't understand if it's safe to expose public RSA key to be anyhow visible to someone else.
2. Create separate /endpoint on the backend side for JWT verification and call it every time I need to verify JWT to render/not to render some components.

*Note: it's important to understand that I'm not talking about regular API endpoints to get any kind of data. In this case I would just return 403 and public key will be used only on the backend side (and therefore not exposed). I'm talking about frontend only.

I have backend and frontend applications. On the backend side I'm using RSA private + public keys to issue JWTs. I understand that the private key should never be shared, but what about public key?

I'm using next.js for the frontend and I want to render or NOT to render some components based on user's role within the JWT. Suppose that I have some kind of <AdminNavigationBar/> and I want to render it only if user's role is ADMIN. Now I have two options and the first one is exactly about my question.

1. Include public key into frontend and verify JWTs on client side. But I don't understand if it's safe to expose public RSA key to be anyhow visible to someone else.
2. Create separate /endpoint on the backend side for JWT verification and call it every time I need to verify JWT to render/not to render some components.

*Note: it's important to understand that I'm not talking about regular API endpoints to get any kind of data. In this case I would just return 403 and public key will be used only on the backend side (and therefore not exposed). I'm talking about frontend only.

• spring
• next.js
• spring-security
• jwt

• 3 i feel like you are overcomplicating it - we usually don't validate the response from backend.. we kind of just trust that the backend that you called, will give you true responses, and show ADMIN UI if your backend says it is an admin (without any JWT validation on FE). But we do use spring security to make sure that the principal that is calling endpoints for admin (perhaps under /admin/...) has all the rights for it. So it doesn't matter if some "hacker" hacks his way into displaying ADMIN UI since the BE will still not allow calls to admin endpoints – asgarov1 Commented Mar 9 at 15:15
• @asgarov1 yeah that's my plan B but I don't want someone getting access to ADMIN UI even they won't be able to display anything. There is nothing they can do but still just not clean design I think (at least for me) – Jake Mayer Commented Mar 9 at 16:08
• 1 isn't anything on the client side open anyway? To the one who has the website open, just in the javascript. Unless you have the website served from the server, in which case you can validate there through the React backend maybe? I've sent the permissions only to the Frontend and render UI based on that. Means people don´t see the admin UI unless they have the rights, but could if they knew how go in session storage and modify the permissions there and see the UI. – Matthias Commented Mar 11 at 14:14
• 2 first of all handing out JWTs to browsers is not recommended, and if you dont want anyone to see admin ui, you need to do server side rendering. Meaning your user logs in, gets a cookie (NOT a jwt) he then makes a request and the backend returns the UI html since he has supplied his authenticated cookie that maps to a session that looks up that he is an admin and he is allowed to see the admin ui and then the admin ui is returned to the browser. – Toerktumlare Commented Mar 14 at 23:08

1 Answer 1

I ended up to this:

• On the frontend side check if there's JWT with required role (no verification, so it's fast)
• If yes, then I'm calling separate /endpoint implemented on the backend to verify that JWT is valid, not expired and contains required role.
• If backend verified that everything is okay then I'm rendering this on UI.

It's probably bad approach (because even if I'm an admin I need to wait for additional request to be finished) but it works. There is a mention about server side rendering in the comments but I didn't have enough time to invest into researching & implementing this even though it's probably the way to go.