Update env for frontend auth info

Author: chrissearle

README.md

@@ -22,9 +22,9 @@ You will require env variables:
     OIDC_EXPECTED_AZP=<expected client ID - defaults to "cupcake-client">
     JWT_ENABLED=true/false
 
-Note - the frontend OIDC authority and client ID are currently hardcoded in
-`frontend/app/composables/useAuth.ts`. If you need to use a different OIDC provider locally,
-update `AUTHORITY` and `CLIENT_ID` in that file.
+The frontend OIDC authority and client ID can be overridden via `NUXT_PUBLIC_OIDC_AUTHORITY` and
+`NUXT_PUBLIC_OIDC_CLIENT_ID` (see [frontend README](./frontend/README.md)). They default to the
+development Keycloak realm and client, so no change is needed for local dev against that environment.
 
 If you are not running with auth (`JWT_ENABLED=false`) then localhost is fine.
 
@@ -83,7 +83,9 @@ in the OIDC provider under the client specified by `OIDC_EXPECTED_AZP`.
 
 The backend fetches the JWKS from the discovery document and validates incoming tokens against it.
 
-Note - the frontend has the OIDC authority and client ID hardcoded in
-`frontend/app/composables/useAuth.ts` (`AUTHORITY` and `CLIENT_ID` constants). These must be
-kept in sync with the backend `OIDC_WELL_KNOWN_URL` and `OIDC_EXPECTED_AZP` settings.
+The frontend OIDC settings are configured via environment variables and must be kept in sync with
+the backend `OIDC_WELL_KNOWN_URL` and `OIDC_EXPECTED_AZP` settings:
+
+    NUXT_PUBLIC_OIDC_AUTHORITY - the OIDC authority URL (e.g. https://auth.example.com/realms/myrealm)
+    NUXT_PUBLIC_OIDC_CLIENT_ID - the OIDC client ID (defaults to "cupcake-client")
 

frontend/README.md

@@ -10,26 +10,27 @@ Always lots to do - but - before we can release this:
 
 ## Build
 
-Nuxt application using npm
+Nuxt application using pnpm
 
-    npm install
+    pnpm install
 
 ## Local running
 
-    npm run dev
+    pnpm dev
 
 ## Preview build
 
-    npm build
-    npm preview
+    pnpm build
+    pnpm preview
 
 ## Deploy
 
 Assuming we will build a docker container - add to [frontend action](../.github/workflows/frontend.yaml) when decided.
 
 ### Configuration
 
-Set the environment variable `CUPCAKE_BACKEND` to the backend URL prefix (protocol, host and port, no trailing `/`). It
-expects to find `/api`, `/login` and `/slackCallback` at this location.
-
-If not set it will use `http://localhost:8080` for development.
+| Environment Variable       | Description                                              | Default                                        |
+|----------------------------|----------------------------------------------------------|------------------------------------------------|
+| `CUPCAKE_FRONTEND`         | Hostname the dev server allows (Vite `allowedHosts`)     | `localhost`                                    |
+| `NUXT_PUBLIC_OIDC_AUTHORITY` | OIDC authority URL (e.g. Keycloak realm URL)           | `https://auth.home.chrissearle.org/realms/HA12` |
+| `NUXT_PUBLIC_OIDC_CLIENT_ID` | OIDC client ID                                         | `cupcake-client`                               |

frontend/app/composables/useAuth.ts

@@ -23,19 +23,17 @@ type TokenResponse = {
   token_type: string
 }
 
-const AUTHORITY = 'https://auth.home.chrissearle.org/realms/HA12'
-const CLIENT_ID = 'cupcake-client'
-
 Log.setLevel(Log.WARN)
 
 let _userManager: UserManager | null = null
 
 function getUserManager(): UserManager {
   if (!_userManager) {
+    const { oidcAuthority, oidcClientId } = useRuntimeConfig().public
     const origin = window.location.origin
     _userManager = new UserManager({
-      authority: AUTHORITY,
-      client_id: CLIENT_ID,
+      authority: oidcAuthority,
+      client_id: oidcClientId,
       redirect_uri: `${origin}/`,
       response_type: 'code',
       scope: 'openid profile email offline_access',
@@ -85,7 +83,8 @@ let tokenEndpointPromise: Promise<string> | null = null
 
 async function getTokenEndpoint(): Promise<string> {
   if (!tokenEndpointPromise) {
-    tokenEndpointPromise = fetch(`${AUTHORITY}/.well-known/openid-configuration`)
+    const { oidcAuthority } = useRuntimeConfig().public
+    tokenEndpointPromise = fetch(`${oidcAuthority}/.well-known/openid-configuration`)
         .then(async (r) => {
           if (!r.ok) throw new Error('Failed to fetch OIDC discovery')
           return (await r.json()) as Discovery
@@ -132,9 +131,11 @@ export async function ensureAccessToken(skewSeconds = 30): Promise<string | null
       return null
     }
 
+    const { oidcClientId } = useRuntimeConfig().public
+
     const body = new URLSearchParams()
     body.set('grant_type', 'refresh_token')
-    body.set('client_id', CLIENT_ID)
+    body.set('client_id', oidcClientId)
     body.set('refresh_token', refreshToken)
 
     const resp = await fetch(tokenEndpoint, {

frontend/nuxt.config.ts

@@ -11,6 +11,13 @@ if (
 export default defineNuxtConfig({
   compatibilityDate: "2025-08-06",
 
+  runtimeConfig: {
+    public: {
+      oidcAuthority: "https://auth.home.chrissearle.org/realms/HA12",
+      oidcClientId: "cupcake-client",
+    },
+  },
+
   ssr: false,
   devtools: { enabled: true },
   modules: [