Search code examples
spring-bootauthenticationkeycloaksvelte

how do I design my authenticated requests and my frontend

i am currently working on a project where my backend uses Spring Boot, Spring security + keycloak and runs on localhost:8081.

My frontend (svelte) runs on http://127.0.0.1:5173/ and the url http://127.0.0.1:5173/products needs to access data from localhost:8081/products (which needs a login) but the login page from keycloak doesnt appear.

In other words, what i am trying to achieve: I want that the url http://127.0.0.1:5173/products redirects to localhost:8081/products which redirects to keycloak login page and after a successfull login i want to return to http://127.0.0.1:5173/products where i will be able to see the data.

is there an elegant solution to this problem? Im really stuck on this problem and this is one of my first projects.

Thanks in advance!!

Solution

  • Some OAuth2 wording:

    • Keycloak is an authorization-server (OIDC complient)
    • Svelte app is a client
    • Spring REST API is a resource-server

    Svelte app configuration

    The same two options for securing a Svelte app, as for any other Javascript based web app (Angular, React, Vue, etc.):

    • the "old" way with:
      • a "public" client is declared in Keycloak
      • Svelte app configured as an OAuth2 public client with an existing OIDC lib (component) of your choice to:
        • use the "public" client deckared in Keycloak
        • authenticate users against Keycloak (socket is not the same as spring API)
        • add an authorization header with a JWT access-token retrieved from Keycloak (when issuing requests to your secured REST endpoints)
    • the now recommended way: apply the BFF pattern. With a Backend For Frontend, web apps are secured with sessions (and CSRF tokens) on a middleware on the server. This middleware is in charge of acquiring and storing OAuth2 tokens. It then replaces the session cookie with a Bearer Authorization header containing an access token before forwarding a request from the web app to resource server(s). spring-cloud-gateway can be configured as BFF (TokenRelay filter and Spring OAuth2 client conf with oauth2Login). I have written a tutorial for that on Baeldung.

    REST API

    Configure Spring API as a secured resource-server with a JWT decoder.

    I have written a set of tutorials for configuring Keycloak and Spring apps with OAuth2.