The key here is that I don’t want the FE client (React / Typescript) to be integrated with Keycloak. The BE is a confidential client, and the only thing I need my FE to do is make API calls to the BE, and store the access token in local storage.
I feel like this should be trivial, but I can’t find any good examples. Most projects have a separate FE public client and do token exchange which I’m trying to avoid.
I have my Keycloak spring boot project working fine on its own. I can redirect to the login page, I have some RBAC endpoints that also redirect to login if the user isn’t authenticated. I can retrieve the access token and the refresh token at any time from the security context on the BE. That’s all well and good.
My trouble is in some granular details. I need to return the access token to the FE when the user logs in, but ideally not on every request. However it’s not always the /login
endpoint that returns the access token (because if an unauthenticated user goes to a /secure
endpoint, they’ll be redirected to login and get the access token there). This makes me feel like the FE should always be expecting an access token in the response, which doesn’t seem right to me.
The workaround to “always return an access token” is to only return after a login, but I don’t know how to do that.
I have a custom interceptor too on the back-end. Not sure if a good approach might be to never send a request with an Authorization
header from the FE, and just manually append the header to the request on the BE? But that doesn’t seem very secure if any client could request the BE and get authorized.
Let me know if anything is unclear and thanks in advance! This is all new to me.