SPA + Quarkus + Keycloak

[38leinaD]

Hi,
Maybe someone can give me some guidance here.
I have an SPA application (using Quarkus Quinoa), Quarkus as the backend and using OpenId via Keycloak dev services. Generally, i have set up the OpenId config according to this guide and all is good in general. When i access a protected resource via navigating in the browser, i am redirected to keycloak, i log in, all good.

Now, there is the issue that my SPA also uses the fetch API to send Restful request to the Quarkus backend and it can happen that the OpenID session is expired and in that cases, the fetch will return 302 with the redirect URL to Keycloak. But neither can i access the redirect location and handle it in Javascript explicitly (which seems to be a known limitation by the browser; the browser will follow the redirect himself. No way to get the Location header in the 302 response via Javascript) nor is the fetch internally able to follow the redirect due to CORS. This is the CORS error i see in the browser (Chrome):

Access to fetch at 'http://localhost:8181/realms/quarkus/protocol/openid-connect/auth?response_type=code&client_id=694e7592-13b5-4225-b15d-04be02dbe837&scope=openid&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fapi%2Ftoken&state=a165b7c7-6b28-4ce9-9ea3-185f0d066c04' (redirected from 'http://localhost:8080/api/...') from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I was thinking that in keycloak i maybe have to set the Weborigins so it returns appropriate CORS headers so the fetch internally will follow the redirect and then i can get the redirected URL and do a top-level reload of the browser to the keycloak.

if (response.redirected) {
            const redirectUrl = response.url;
            location.href = redirectUrl.toString();
}

No matter what i configure here for the web origins, keycloak never returns CORS headers in the response.

Anyone can suggest to me if I am on the right track or not and what might be my issue? Maybe i am doing something fundamentally wrong but it seems like this is the suggested approach to handle this.

Thanks,
Daniel

[quarkus-bot[bot]]

/cc @pedroigor (keycloak), @sberyozkin (keycloak)

[sberyozkin]

@38leinaD If you have SPA which delegates to Quarkus to do the authorization code flow then the only way to manage CORS at the Fetch level is to follow the workaround described at: https://quarkus.io/guides/security-oidc-code-flow-authentication#single-page-applications.

Keycloak Authorization endpoint does not support CORS so the workaround is to let Quarkus return an error instead of the redirect so that the error catch block could retry the request with the browser API, thus bypassing the CORS restriction. Give it a try please

[38leinaD]

How did I miss that part of the documentation? Thanks @sberyozkin!