Merge pull request #46 from authts/fix-metadata-fetch

fix ProtectedApp

Author: zach-betz-hln

.env.sample

@@ -18,6 +18,8 @@ KC_DB_SCHEMA=public
 KC_DB_USERNAME=admin
 KC_DB_PASSWORD=juggle-prance-shallot-wireless-outlet
 KC_HTTP_PORT=8080
+KC_HTTP_MANAGEMENT_PORT=9000
+KC_HEALTH_ENABLED=true
 
 ################################################################################
 # mailhog
@@ -29,7 +31,9 @@ MH_UI_BIND_ADDR=0.0.0.0:${MH_UI_BIND_ADDR_PORT}
 # api
 ################################################################################
 API_PORT=5174
-API_JSON_WEB_KEY_SET_URL=http://kc:${KC_HTTP_PORT}/realms/master/protocol/openid-connect/certs
+API_AUTH_HEALTH_CHECK_URL=http://kc:${KC_HTTP_MANAGEMENT_PORT}/health/ready
+API_AUTH_WELL_KNOWN_CONFIG_URL=http://kc:${KC_HTTP_PORT}/realms/master/.well-known/openid-configuration
+API_AUTH_JSON_WEB_KEY_SET_URL=http://kc:${KC_HTTP_PORT}/realms/master/protocol/openid-connect/certs
 
 ################################################################################
 # react

api/package-lock.json

@@ -9,12 +9,14 @@
   },
   "dependencies": {
     "express": "^4.21.2",
-    "jose": "^5.9.6"
+    "jose": "^5.9.6",
+    "morgan": "^1.10.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.9.4",
     "@tsconfig/node20": "^20.1.4",
     "@types/express": "^4.17.21",
+    "@types/morgan": "^1.9.9",
     "@types/node": "^22.13.1",
     "tsx": "^4.19.2",
     "typescript": "^5.7.3"

api/package.json

@@ -1,15 +1,37 @@
 import express from 'express';
+import morgan from 'morgan';
 import { verifyJwtMiddleware } from './jwtUtils.js';
 import type { AugmentedRequest } from './types.js';
 
+type CustomError = {
+  error: string;
+};
+
 const app = express();
 
 // biome-ignore lint/style/noNonNullAssertion: We expect this env var to always be populated
 const port = Number(process.env.API_PORT!);
 
-app.use(verifyJwtMiddleware);
+app.use(morgan('tiny'));
+
+app.get('/auth-well-known-config', async (_req, res) => {
+  try {
+    // biome-ignore lint/style/noNonNullAssertion: We expect this env var to always be populated
+    const response = await fetch(process.env.API_AUTH_WELL_KNOWN_CONFIG_URL!, {
+      headers: { accept: 'application/json' },
+    });
+    if (!response.ok) {
+      return res.status(500).json({ error: `Unexpected response status: ${response.status}` } satisfies CustomError);
+    }
+    const body = await response.json();
+    return res.json(body);
+  } catch (error) {
+    console.log(error);
+    return res.status(500).json({ error: String(error) } satisfies CustomError);
+  }
+});
 
-app.get('/payload', (req, res) => {
+app.get('/payload', verifyJwtMiddleware, (req, res) => {
   const data = (req as AugmentedRequest).payload;
   res.json(data);
 });

api/src/index.ts

@@ -3,7 +3,7 @@ import { type JWTVerifyGetKey, createRemoteJWKSet, jwtVerify } from 'jose';
 import type { AugmentedRequest } from './types.js';
 
 // biome-ignore lint/style/noNonNullAssertion: We expect this env var to always be populated
-const jsonWebKeySetUrl = process.env.API_JSON_WEB_KEY_SET_URL!;
+const jsonWebKeySetUrl = process.env.API_AUTH_JSON_WEB_KEY_SET_URL!;
 
 // This function is cached so that the json web key set is not looked up on every request
 let getJsonWebKeySet: JWTVerifyGetKey | null = null;

api/src/jwtUtils.ts

@@ -15,6 +15,7 @@ services:
       context: ./kc
     ports:
       - ${KC_HTTP_PORT}:${KC_HTTP_PORT}
+      - ${KC_HTTP_MANAGEMENT_PORT}:${KC_HTTP_MANAGEMENT_PORT}
     env_file:
       - ./.env 
 

compose.yml

@@ -3,21 +3,10 @@ import { type FC, type ReactNode, useEffect, useState } from 'react';
 import { hasAuthParams, useAuth } from 'react-oidc-context';
 import { Alert } from './Alert.tsx';
 
-const getMetadata = async (metadataUrl?: string) => {
-  if (!metadataUrl) {
-    throw new Error('metadataUrl is required');
-  }
-  let response: Response;
-  try {
-    response = await fetch(metadataUrl, {
-      mode: 'no-cors',
-      headers: { accept: 'application/jwk-set+json, application/json' },
-    });
-  } catch {
-    throw new Error(`Unable to fetch metadataUrl\n\n${metadataUrl}\n\nPlease confirm your auth server is up`);
-  }
+const queryFn = async () => {
+  const response = await fetch('/api/auth-well-known-config');
   if (!response.ok) {
-    throw new Error(`Unexpected response status: ${response.status}`);
+    throw new Error('Please confirm your auth server is up');
   }
   return await response.json();
 };
@@ -31,8 +20,8 @@ export const ProtectedApp: FC<ProtectedAppProps> = (props) => {
 
   const { isPending: metadataIsPending, error: metadataError } = useQuery({
     queryKey: ['getMetadata'],
+    queryFn,
     retry: false,
-    queryFn: () => getMetadata(auth.settings.metadataUrl),
   });
 
   const auth = useAuth();