Handling direct access (without xhr) to resource servers

Hi Keycloak Team.

We have sucessfully setup OAuth env with Keycloak, a resource server (bearer-only) and a react frontend. For the frontend we use the keycloak-js adaper, so if a user requests the frontend, the authorization code flow is invoked and after successful login the frontend serves content from the resource server which was requested over xhr and attached access_token.
Everything is working so far. Perfect.

Now we have the problem, that we want to get content directly, e.g. media files from our resource server. For access type we decided to leave it bearer only. So to access the content we must always add the access_token header to the request. How can we achieve this from new browsers _blank that open a link to download a file?

We have a solution, but I’m not sure if this is a proper way. In the server of our node app we introduced a second session handling and if we get a request to a media route we use this session to append the authorization bearer to the request and proxy it to the resource server. That works and we do not hand out the token to the user agent.

But I have some doubts. I think there has to be a more elegant solution. Do you have an advice?
Thank you and keep up the great work.

Assuming your SPA application is on the same domain as the back-end you may just want to do the authentication on the server-side and just use cookie based security context for xhr as well as media-files. If the SPA is on a different domain I would consider creating a temporary token within the node backend to allow downloading files.

Thanks for your quick answer. The SPA is on the same domain, but we also need the auth in the frontend, because of user name etc. As you suggested, we just use auth in the backend too, then the way works with the media links as well. Thanks again anyway.