Keycloak authentication and authorization

[stiezinger]

I have started using pocketbase recently and love it! Further I would like to use it as my main source for data in all my applications.
My goal is to store my users in keycloak and implement an authentication and authorization workflow for my frontends, with the help of pocketbase. The section oauth2-integration was my first contact point. Unfortunately I came across some issues, very probably because of my lack of experience in such things. Maybe someone could help me.

What I would like to achieve:
I have a couple of web apps, Angular frontend + NodeJS/python REST APIS. I would like to replace or support the APIS with pocketbase and be able to provide a registration form on my frontends to enable users to create accounts (users in keycloak) and be able to authenticate them through OpenID Connect. Further I would like to be able to create some roles/groups in keycloak to authorize the users. It would be perfect If I could implement some SSO solution. The user would visit some other app of me and a message like: "continue as user xyz" would be displayed, with the ability to sign in as user xyz, but that would be the icing on the cake, not really necessary.

What I have done so far:

• Run pocketbase in a container with following Dockerfile:

FROM alpine:latest
ARG PB_VERSION=0.22.10
RUN apk add --no-cache \
    unzip \
    ca-certificates
ADD https://github.com/pocketbase/pocketbase/releases/download/v${PB_VERSION}/pocketbase_${PB_VERSION}_linux_amd64.zip /tmp/pb.zip
RUN unzip /tmp/pb.zip -d /pb/
EXPOSE 8081
CMD ["/pb/pocketbase", "serve", "--http=0.0.0.0:8081"]

• Created some test data in a "products" base collection

• Run keycloak in a containter with following command:
  docker run -dp 8080:8080 -e KEYCLOAK_ADMIN=admin -e KEYCLOAK_ADMIN_PASSWORD=admin quay.io/keycloak/keycloak:24.0.3 start-dev

• Create a client in keycloak:

General settings:

Type: OpenID Connect
Client ID: pocketbase
Name: pocketbase

Capability config

Client authentication: on
Authentication flows: Standard flow, Direct access grants and Service accounts roles

Login settings

Root URL: http://localhost:4200
Valid redirect URIs: *
Valid post logout redirect URIs: *
Web origins: *

• Create the client and switch to "Credentials" to copy the Client Secret

• Switch to pocketbase to create an OpenID Connect provider
  The URLs are provided by accessing: http://localhost:8080/realms/master/.well-known/openid-configuration

Client ID: pocketbase
Client secret: paste from keycloak
Display Name: OIDC
Auth URL: http://localhost:8080/realms/master/protocol/openid-connect/auth
Token URL: http://localhost:8080/realms/master/protocol/openid-connect/token
User API URL: http://localhost:8080/realms/master/protocol/openid-connect/userinfo
Support PKCE: true

• Create an Angular test app

• Install the pocketbase client side sdk:
  npm install pocketbase

• Edit app.component.ts:

export class AppComponent implements OnInit {
  ngOnInit(): void {
    const pb = new PocketBase('http://127.0.0.1:8081');
    from(pb.collection('products').authWithOAuth2({ provider: 'oidc' })).subscribe(authData => console.log(authData))
  }
}

• Run the Angular app

What is the issue?
I receive the error: ClientResponseError 400: Unsupported collection type.
When i switch to the users collection:

from(pb.collection('users').authWithOAuth2({ provider: 'oidc' })).subscribe(authData => console.log(authData))

I receive the error: ClientResponseError 400: Something went wrong while processing your request.

The pocketbase logs show following error:

{
  "id": "qnpqdsg1q3h4fmq",
  "created": "2024-05-03 12:30:01.475Z",
  "updated": "2024-05-03 12:30:01.475Z",
  "data": {
    "auth": "guest",
    "details": "Post \"http://localhost:8080/realms/master/protocol/openid-connect/token\": dial tcp 127.0.0.1:8080: connect: connection refused",
    "error": "Something went wrong while processing your request.",
    "execTime": 30.616208,
    "method": "POST",
    "referer": "http://localhost:4200/",
    "remoteIp": "",
    "status": 400,
    "type": "request",
    "url": "/api/collections/users/auth-with-oauth2",
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36",
    "userIp": ""
  },
  "message": "POST /api/collections/users/auth-with-oauth2",
  "level": 8
}

I wanted to see how far i come to achieve my goal, do you have some tips on my way to it? Thank you in advance.

[ganigeorgiev]

ClientResponseError 400: Unsupported collection type. error is because the auth call must be against your auth collection (in your case users).

For the other 400 error - the details field indicates that there is something wrong with the communication between your containers. Double check that your PocketBase container is accessible from the one where your Keycloak one is and the opposite (note that each container has its own 127.0.0.1 address).

[stiezinger]

Thank you for the answer. This issue had nothing to do with pocketbase, it was the communication between the 2 containers. Kudos to you for taking time and still helping me regarding this, you are great! I fixed this issue by creating a network for the containers and assigning them names, that way the containers can communicate by their names.

docker network create mynetwork
docker run --network mynetwork --name keycloak -dp 8080:8080 -e KEYCLOAK_ADMIN=admin -e KEYCLOAK_ADMIN_PASSWORD=admin quay.io/keycloak/keycloak:24.0.3 start-dev
docker run --network mynetwork --name pocketbase -dp 8081:8081 pocketbase

Pocketbase was now able to reach the keycloak container. The next step was to edit my /etc/hosts file:
127.0.0.1 keycloak

Because my host (Angular app) needs to reach the auth URL in the keycloak container.

I receive the token from keycloak, now I have to figure out how to make the authentication part, to allow only users stored in keycloak to see the content. I had a misunderstanding about the collections, I though that I can use OpenID Connect workflow to authorize users stored in keycloak for my base collections, now I have to figure out how to make the interaction between the auth collections, base collections and users in keycloak to make this working.

Is there maybe a way to disable the popup to receive the token? I noticed that a popup will show up for 1 seconds and close immediately, it may confuse the visitor of the app. Is there a possibility to achieve the reception of the token behind the scenes?

[ganigeorgiev]

now I have to figure out how to make the interaction between the auth collections, base collections and users in keycloak to make this working.

Note that technically PocketBase doesn't interact with the Keycloak user. When you authenticate with OAuth2, PocketBase either creates a new auth record in your auth collection or link the provider's user to an existing PocketBase one (eg. based on the verified email).

Is there maybe a way to disable the popup to receive the token?

If you mean the redirect handler - not out of the box. You can specify your own server redirect handler by following the "Manual code exchange" flow (the second tab in the OAuth2 integration docs).
Alternatively, if you don't want a popup/window you can specify a custom urlCallback and open it in a new tab instead:

await pb.collection("users").authWithOAuth2({
    provider: "oidc",
    urlCallback: (url) => {
        window.open(url, "_blank")
    }
})

[stiezinger]

Wow! Perfekt explanation, thank you so much 👍