Hello together.
I struggle with setting up authentication for my application in the way I’d wish it to work. Therefore I hope for some input from you, whether what I want to achieve is feasible at all and if so - what I am missing.
My application consists of a ReactJS frontend (Public Keycloak client, making use of keycloak-js adapter) and an ExpressJS API (Bearer Only client, trying to make use of keycloak-connect).
As of now, I can protect routes, the access to them is denied when no valid authorization header is present. This works as intended.
However I wish that from a Browser where a user is already signed in to Keycloak (i.e. a valid session token), a call to the API were possible without putting a Bearer Token in the header (-> making use of the session). Is that at all possible with this setup? I would like to do that because the backend client is also partly securing static files and it would be nice if you could just access them via their name from the browser without always having to manually fetch them with an access header to then cache them.
I have not found any examples helpful to me regarding this. Of course, I could just store the access token in a cookie myself, but somewhere in the back of my head I feel like I remember this is not necessarily best practice. Other thoughts of mine have included changing the API client type to confidential without any insight on how this might be either helpful or stupid (resulting in a fierce battle with my old friend, the valid redirect URI), having an inner debate about session sharing across clients and whether this is possible, sensible or desirable and having several existential crises about the discouraging lack of Stackoverflow questions about the topic.
I sincerely hope you can give me some input on whether my approach as a whole is flawed or whether it’s “just” a matter of poor execution. I am thankful already for any advice.
Cheers!