Add embedded Swagger UI page with auto-injected JWT auth
All checks were successful
CI / build (push) Successful in 1m16s
CI / docker (push) Successful in 1m9s
CI / deploy (push) Successful in 31s

- New /swagger route with lazy-loaded SwaggerPage that initializes
  swagger-ui-dist and injects the session JWT via requestInterceptor
- Move API link from primary nav to navRight utility area (pill style)
- Code-split swagger chunk (~1.4 MB) so main bundle stays lean

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
hsiegeln
2026-03-15 14:51:15 +01:00
parent e466dc5861
commit 7dec8fbaff
8 changed files with 93 additions and 5 deletions

View File

@@ -0,0 +1,5 @@
.container {
max-width: 1440px;
margin: 0 auto;
padding: 24px;
}

View File

@@ -0,0 +1,29 @@
import { useEffect, useRef } from 'react';
import { useAuthStore } from '../../auth/auth-store';
import SwaggerUI from 'swagger-ui-dist/swagger-ui-es-bundle.js';
import 'swagger-ui-dist/swagger-ui.css';
import styles from './SwaggerPage.module.css';
export function SwaggerPage() {
const containerRef = useRef<HTMLDivElement>(null);
const token = useAuthStore((s) => s.accessToken);
useEffect(() => {
if (!containerRef.current) return;
containerRef.current.innerHTML = '';
SwaggerUI({
url: '/api/v1/api-docs',
domNode: containerRef.current,
deepLinking: true,
requestInterceptor: (req: Record<string, unknown>) => {
if (token) {
(req.headers as Record<string, string>)['Authorization'] = `Bearer ${token}`;
}
return req;
},
});
}, [token]);
return <div ref={containerRef} className={styles.container} />;
}