Authentication in WebUI

[genematx]

This adds a complete authentication flow to the web frontend, enabling the browser UI to work with authenticated Tiled servers. Supports both password-based (internal) and OIDC (external) authentication providers (NOTE: currently, with the tag-based authz, only a single provider is fully supported at a time).

Login & Routing

• Login page (routes/login.tsx) — renders provider-specific UI: username/password form for internal providers, redirect button for external (OIDC) providers
• OIDC callback (routes/auth-callback.tsx) — captures tokens from the OAuth redirect, restores the user's original URL via the state parameter
• Route protection — RequireAuth guard redirects unauthenticated users to /login when the server requires authentication
• Root redirect — navigating to / now redirects to /browse/
• App bar — shows logged-in user identity with a logout menu, or a "Log in" button when unauthenticated

Token Lifecycle (auth/ module)

• token-manager.ts — TokenManager class with client-side JWT decoding, expiry tracking, localStorage persistence, and window.__TILED_ACCESS_TOKEN__ global (for use by spec view plugins)
• auth-provider.tsx — AuthProvider component that manages axios interceptors with proper cleanup on unmount, transparent 401 → refresh → retry with request deduplication, and proactive token refresh (scheduled at half the token's remaining TTL, capped at 5 min before expiry) -- ported from Aditi's work
• auth-context.tsx — React context with typed AuthContextType interface and useAuth hook ported from Aditi's work
• types.ts — shared AuthTokens and UserIdentity interfaces -- ported from Aditi's work

Client Improvements

• Link URL relativization — response interceptor converts absolute URLs in API links fields to relative paths, so the UI works regardless of the origin the server reports -- ported from Aditi's work
• Authenticated data fetching — array-nd and download-core components fetch via axiosInstance (with Bearer token) instead of raw URLs -- ported from Aditi's work
• Axios auth interceptors moved from module-level globals into AuthProvider with proper lifecycle management (eject on unmount)

Server-side

• OIDC authorization requests now include prompt=login to ensure a fresh login prompt
• Favicon endpoint serves the Tiled icon

Branding

• Tiled logo and icon SVG assets
• App bar displays logo alongside "TILED" title

Testing

To test, use the following:

1. Start a local OIDC server:

docker run --rm -p 9000:9000 -v $(pwd)/config:/config -e CONFIG_FILE=/config/oidc_qlik_config.json -e USERS_FILE=/config/oidc_qlik_users.json qlik/simple-oidc-provider:0.2.4

using the following config files:

{
  "idp_name": "http://simple-oidc-provider",
  "port": 9000,
  "client_config": [
    {
      "client_id": "tiled_oidc_client",
      "client_secret": "tiled_oidc_secret",
      "redirect_uris": [
        "http://localhost:8000/api/v1/auth/provider/oidc/code"
      ]
    }
  ],
  "claim_mapping": {
    "openid": [ "sub" ],
    "email": [ "email", "email_verified" ],
    "profile": [ "name", "nickname" ]
  }
}

[
  {
    "id": "qlikuser",
    "email": "qlikuser@example.com",
    "email_verified": true,
    "name": "Qlik User",
    "nickname": "qlikuser",
    "password": "password",
    "groups": []
  }
]

2. Start the Tiled server with the following config file:

authentication:
  single_user_api_key: "secret"
  allow_anonymous_access: false
  secret_keys: ["SECRET"]
  tiled_admins:
    - {"provider": "toy", "id": "admin"}
    - {"provider": "oidc", "id": "dallan"}
  providers:
    - provider: "toy"
      authenticator: "tiled.authenticators:DictionaryAuthenticator"
      args:
        users_to_passwords:
          alice: "alice"
          bob: "bob"
          chris: "chris"
          admin: "admin"
    - provider: oidc
      authenticator: "tiled.authenticators:OIDCAuthenticator"
      args:
        client_id: "tiled_oidc_client"
        client_secret: "tiled_oidc_secret"
        well_known_uri: "http://localhost:9000/.well-known/openid-configuration"
        audience: "tiled_oidc_client"
        redirect_on_success: "http://localhost:8000/ui/auth/callback"
        redirect_on_failure: "http://localhost:8000/ui/login"
database:
  uri: "sqlite:///storage/auth/authn.sqlite"
  init_if_not_exists: true
access_control:
  access_policy: tiled.access_control.access_policies:TagBasedAccessPolicy
  args:
    provider: ["toy", "oidc"]
    tags_db:
      uri: "sqlite:///storage/auth/authz.sqlite"
    access_tags_parser: tiled.access_control.access_tags:AccessTagsParser

Co-authored-by: Aditi Chikkali achikkali1@bnl.gov

Depends on #1351 and #1352.

Checklist

• Add a Changelog entry