[keycloak-user] How to setup CORS for Angular frontend and Spring Boot backend

[Peemöller, Björn]

Hi,

I'm struggling to setup our application with Keycloak. First, let me explain our setup:


-       We have an Angular 5 application as the frontend.

-       We have a Spring Boot application providing a REST api as our backend.

-       During build, the frontend is placed into the webapp folder, such that it is delivered as static content by the backend.

-       The backend is secured using Keycloak.

-       The user is automatically authenticated using Kerberos.

If I build the application and then request the frontend's index.html, then a redirect to /sso/login occurs, which redirects to Keycloak, which redirects back to the application, and authentication is successful. After that, calls to our backend api (for which the user must be authenticated and authorized), are also successful.

During development, however, the frontend is served using webpack (angular-cli), and the backend is served individually. In this setup, the index.html can be loaded without authentication, and the frontend then starts to call the backend API. At first, the backend directly returned a 401 Unauthorized, and I figured out that this was raised at the KeycloakAuthenticationEntryPoint since the request was considered to be an API request. To work around this problem, I replaced the KeycloakAuthenticationEntryPoint by a subclass not checking for API requests. After that, the API request is now redirected to /sso/login, which then redirects to Keycloak. Since now the host has changed, the invoking browser has to perform a CORS request, and thus issued a CORS preflight request using the OPTIONS method, to which Keycloak answers with a 204 No Content without any CORS headers, such that the preflight fails, even though the Keycloak client has been configured to allow CORS requests. In consequence, the backend API cannot be reached.

My questions now are:

-       Is there some configuration that we are missing to allow authentication during API requests?

-       The behavioral change of the KeycloakAuthenticationEntryPoint seems incorrect to me, as if I'm working against the intended design. Could you provide me some guidance on how to setup my frontend and backend? I can think of doing authentication directly in the frontend using the Keycloak JS library, but have found no indication that a REST API should not do (Kerberos) authentication itself.

Many thanks in advance,
Björn

Björn Peemöller
IT & IT Operations

BERENBERG
Joh. Berenberg, Gossler & Co. KG
Neuer Jungfernstieg 20
20354 Hamburg

Telefon +49 40 350 60-8548
Telefax +49 40 350 60-900
E-Mail bjoern.peemoeller at berenberg.de<mailto:bjoern.peemoeller at berenberg.de>
www.berenberg.de<http://www.berenberg.de/>

Sitz: Hamburg - Amtsgericht Hamburg HRA 42659


Diese Nachricht einschliesslich etwa beigefuegter Anhaenge ist vertraulich und kann dem Bank- und Datengeheimnis unterliegen oder sonst rechtlich geschuetzte Daten und Informationen enthalten. Wenn Sie nicht der richtige Adressat sind oder diese Nachricht irrtuemlich erhalten haben, informieren Sie bitte sofort den Absender über die Antwortfunktion. Anschliessend moechten Sie bitte diese Nachricht einschliesslich etwa beigefuegter Anhaenge unverzueglich vollstaendig loeschen. Das unerlaubte Kopieren oder Speichern dieser Nachricht und/oder der ihr etwa beigefuegten Anhaenge sowie die unbefugte Weitergabe der darin enthaltenen Daten und Informationen sind nicht gestattet. Wir weisen darauf hin, dass rechtsverbindliche Erklaerungen namens unseres Hauses grundsaetzlich der Unterschriften zweier ausreichend bevollmaechtigter Vertreter unseres Hauses beduerfen. Wir verschicken daher keine rechtsverbindlichen Erklaerungen per E-Mail an Dritte. Demgemaess nehmen wir per E-Mail auch keine rechtsverbindlichen Erklaerungen oder Auftraege von Dritten entgegen. 
Sollten Sie Schwierigkeiten beim Oeffnen dieser E-Mail haben, wenden Sie sich bitte an den Absender oder an info at berenberg.de. Please refer to http://www.berenberg.de/my_berenberg/disclaimer_e.html for our confidentiality notice.