Starting UI fails - no login request screen

[brucemcpherson]

Bug Report

Problematic behavior
A clear and concise description of the behavior.

After following the instructions (all seemed to go well) to install, and hitting the UI endpoint http://localhost:8960/. gave this error

pages-dev-overlay-setup.tsx:88 Error: react-modal: No elements were found for selector .c__app.
at i (ariaAppHider.js:57:11)
at Object.u [as setElement] (ariaAppHider.js:65:5)
at I.value (Modal.js:184:20)
at ModalProvider.tsx:120:16
at react-stack-bottom-frame (react-dom-client.development.js:23949:20)
at runWithFiberInDEV (react-dom-client.development.js:1522:13)
at commitHookEffectListMount (react-dom-client.development.js:11905:29)
at commitHookPassiveMountEffects (react-dom-client.development.js:12026:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13841:13)
at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:13815:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13957:11)
at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:13815:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13834:11)
at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:13815:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13834:11)
at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:13815:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13957:11)
at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:13815:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13834:11)
at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:13815:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13834:11)
at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:13815:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13957:11)
at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:13815:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13957:11)
at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:13815:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13957:11)
at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:13815:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13957:11)
at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:13815:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13957:11)
at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:13815:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13834:11)
at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:13815:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13957:11)
at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:13815:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13957:11)
at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:13815:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13844:11)
at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:13815:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13834:11)
at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:13815:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13844:11)
at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:13815:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13834:11)
at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:13815:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13834:11)
at recursivelyTraversePassiveMountEffects (react-dom-client.development.js:13815:11)
at commitPassiveMountOnFiber (react-dom-client.development.js:13853:11)
at flushPassiveEffects (react-dom-client.development.js:15737:9)

The above error occurred in the component.

React will try to recreate this component tree from scratch using the error boundary you provided, PagesDevOverlayErrorBoundary.

fetchApi.ts:47
GET http://localhost:8961/api/v1.0/users/me/ 401 (Unauthorized)


Expected behavior/code
A clear and concise description of what you expected to happen (or code).

A login screen to appear

Steps to Reproduce

1. Do this...
2. Then this...
3. And then the bug happens!

Environment

It's a mac m4, Tahoe 26.3
docker 29.2.1

• Drive version:
• Platform:

Possible Solution

Additional context/Screenshots
Add any other context about the problem here. If applicable, add screenshots to help explain.
I notice the following error repeated many times in the postgre container -

2026-02-23 12:29:44.155 UTC [2552] FATAL: role "root" does not exist

and this error repeated many times in keycloak container
2026-02-23 12:18:03,325 ERROR [io.quarkus.vertx.http.runtime.QuarkusErrorHandler] (vert.x-eventloop-thread-9) HTTP Request to /health/ready failed, error id: fc135642-a913-4538-b45c-67e82ceb506f-1: io.vertx.core.VertxException: For HTTP/1.x requests, the 'Host' header is required

and of course a 401 error in the backend-dev-1 container
2026-02-23 12:24:37,899 django.request WARNING Unauthorized: /api/v1.0/users/me/

[23/Feb/2026 12:24:37] "GET /api/v1.0/users/me/ HTTP/1.1" 401 58

and in the forntend-dev-1
○ Compiling / ...

✓ Compiled / in 2.6s

GET / 200 in 2359ms

⚠ Invalid next.config.ts options detected:

⚠ Unrecognized key(s) in object: 'debug'

⚠ See more info here: https://nextjs.org/docs/messages/invalid-next-config

[brucemcpherson]

I had to make some code changes to get this working locally on the mac - for those that hit the same issue.

he following changes were implemented to resolve Docker environment errors and frontend runtime crashes.

1. Docker Services & Healthchecks (compose.yaml)

PostgreSQL

• Problem: The default pg_isready healthcheck was attempting to connect as the root user, which does not exist in the database, causing repeated fatal logs.
• Fix: Explicitly provided the configured database user and database name.
• Change:

  healthcheck:
    test: ["CMD-SHELL", "pg_isready -U $$POSTGRES_USER -d $$POSTGRES_DB"]

Keycloak

• Problem: The healthcheck was sending a malformed HTTP request (echo -e was not supported by the container shell, and the Host header was missing or invalid).
• Fix: Used printf for reliable carriage returns and added a valid Host: localhost header required by newer Quarkus-based Keycloak versions.
• Change:

  healthcheck:
    test: ["CMD-SHELL", "exec 3<> /dev/tcp/127.0.0.1/9000; printf 'GET /health/ready HTTP/1.1\\r\\nHost: localhost\\r\\nConnection: close\\r\\n\\r\\n' >&3; if [ $$? -eq 0 ]; then echo 'Healthcheck Successful'; exit 0; else echo 'Healthcheck Failed'; exit 1; fi;"]

2. Frontend Runtime Error (_document.tsx)

• Problem: The app crashed with react-modal: No elements were found for selector .c__app. This occurred because the Cunningham UI kit expects an element with the .c__app selector to be present in the DOM for accessibility management (aria-hiding the main content when modals are open).
• Fix: Added a hidden sibling div with the required class in the root document. This ensures the element is always available in the DOM from the initial server-side render without interfering with Next.js hydration or the visual layout.
• File: src/frontend/src/pages/_document.tsx
• Change:

  <body>
    <div className="c__app" style={{ display: "none" }} aria-hidden="true"></div>
    <Main />
    <NextScript />
  </body>