This is a example project to show a simple use case of Keycloack as auth service and how to interact with a web app and an api.

The web app is a simple React app that will authenticate against the Keycloak server

The API is a simple Flask app that will validate the requests by checking the token sent in headers against the keycloak server.

flowchart TB
    subgraph  Auth Service
        db[(postgresql)]:::db
        keycloak-server:::is -- uses --> db[(postgresql)]:::db
    end

    subgraph  Api Service
        db-api[(postgresql)]:::db-api
        flask-server:::is -- uses --> db-api[(sqlite)]:::db-api
    end

    web-app:::is -- authenticates against --> keycloak-server:::is
    web-app:::is -- request data from --> flask-server:::is
    flask-server:::is -- validate auth against --> keycloak-server:::is

    classDef is fill:#4994eb, color:#ffffff;
    classDef db fill:#fad505, color:#191919;
    classDef db-api fill:#008000, color:#191919;

There are multiple ways to set this example. The simpler one is by running all services at the same time using Docker Compose:

docker-compose up

Second option is by running each service separately (using docker or manually)

Follow keycloak auth instructions

After that, follow instructions set in here

Follow web client instructions (using the client settings created in the previous step)

If you click on Login button, a login form should appear, witht he ability to registered a new user. Follow those instructions and you will return to the home page with logged in data

Go to realm section and create a new one. For this example lets called it "myrealm"

We will be using the default login provided by Keycloak, so we will be allowing user registration too. Go to Realm Settings and enable the User Registration option

Go to Clients section and create a new client. For this example lets called it "client-web"

This will be the client for the webapp and we should provide the proper urls allowed to interact with this client. For the sake of this test, we will use a wildcard (*), but in PROD we should include the proper urls here

In the Capability config we will only set Standard Flow and Direct Access grants