@jjlmoya/utils-developer 1.16.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-developer",
-    "version": "1.16.0",
+    "version": "1.17.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -20,10 +20,11 @@ import { svgSanitizer } from '../tool/svgSanitizer/index';
 import { utmGenerator } from '../tool/utmGenerator/index';
 import { urlCleaner } from '../tool/urlCleaner/index';
 import { serpPixelSimulator } from '../tool/serpPixelSimulator/index';
+import { jwtDecoder } from '../tool/jwtDecoder/index';
 
 export const developerCategory: DeveloperCategoryEntry = {
   icon: 'mdi:code-tags',
-  tools: [jsonFormatter, svgToCss, aspectRatio, placeholderGenerator, urlEncoderDecoder, duplicateCssRemover, cssToInlineConverter, cssSpecificityCalculator, cronGenerator, keycode, llmCostCalculator, musicalTypography, mobileMockupGenerator, hashGenerator, promptLibrary, colorConverter, readabilityCalculator, svgSanitizer, utmGenerator, urlCleaner, serpPixelSimulator],
+  tools: [jsonFormatter, svgToCss, aspectRatio, placeholderGenerator, urlEncoderDecoder, duplicateCssRemover, cssToInlineConverter, cssSpecificityCalculator, cronGenerator, keycode, llmCostCalculator, musicalTypography, mobileMockupGenerator, hashGenerator, promptLibrary, colorConverter, readabilityCalculator, svgSanitizer, utmGenerator, urlCleaner, serpPixelSimulator, jwtDecoder],
   i18n: {
     de: () => import('./i18n/de').then((m) => m.content),
     en: () => import('./i18n/en').then((m) => m.content),

package/src/entries.ts

@@ -48,6 +48,8 @@ export { utmGenerator } from './tool/utmGenerator/entry';
 export type { UtmGeneratorLocaleContent } from './tool/utmGenerator/entry';
 export { serpPixelSimulator } from './tool/serpPixelSimulator/entry';
 export type { SerpPixelSimulatorLocaleContent } from './tool/serpPixelSimulator/entry';
+export { jwtDecoder } from './tool/jwtDecoder/entry';
+export type { JwtDecoderLocaleContent } from './tool/jwtDecoder/entry';
 export { developerCategory } from './category';
 import { aspectRatio } from './tool/aspectRatio/entry';
 import { calculadoraTiempoDatos } from './tool/calculadoraTiempoDatos/entry';
@@ -74,4 +76,5 @@ import { urlCleaner } from './tool/urlCleaner/entry';
 import { urlEncoderDecoder } from './tool/urlEncoderDecoder/entry';
 import { utmGenerator } from './tool/utmGenerator/entry';
 import { serpPixelSimulator } from './tool/serpPixelSimulator/entry';
-export const ALL_ENTRIES = [aspectRatio, calculadoraTiempoDatos, colorConverter, conversorExcelCsvHtml, cronGenerator, cssSpecificityCalculator, cssToInlineConverter, duplicateCssRemover, generadorSecurityTxt, hashGenerator, inspectorCertificadosSsl, jsonFormatter, keycode, llmCostCalculator, mobileMockupGenerator, musicalTypography, placeholderGenerator, promptLibrary, readabilityCalculator, svgSanitizer, svgToCss, urlCleaner, urlEncoderDecoder, utmGenerator, serpPixelSimulator];
+import { jwtDecoder } from './tool/jwtDecoder/entry';
+export const ALL_ENTRIES = [aspectRatio, calculadoraTiempoDatos, colorConverter, conversorExcelCsvHtml, cronGenerator, cssSpecificityCalculator, cssToInlineConverter, duplicateCssRemover, generadorSecurityTxt, hashGenerator, inspectorCertificadosSsl, jsonFormatter, keycode, llmCostCalculator, mobileMockupGenerator, musicalTypography, placeholderGenerator, promptLibrary, readabilityCalculator, svgSanitizer, svgToCss, urlCleaner, urlEncoderDecoder, utmGenerator, serpPixelSimulator, jwtDecoder];

package/src/index.ts

@@ -66,3 +66,5 @@ export { INSPECTOR_CERTIFICADOS_SSL_TOOL } from './tool/inspectorCertificadosSsl
 export { CONVERSOR_EXCEL_CSV_HTML_TOOL } from './tool/conversorExcelCsvHtml/index';
 
 export { SERP_PIXEL_SIMULATOR_TOOL } from './tool/serpPixelSimulator/index';
+
+export { JWT_DECODER_TOOL } from './tool/jwtDecoder/index';

package/src/tests/locale_completeness.test.ts

@@ -35,7 +35,7 @@ describe('Locale Completeness Validation', () => {
     });
   });
 
-  it('all 25 tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(25);
+  it('all 26 tools registered', () => {
+    expect(ALL_TOOLS.length).toBe(26);
   });
 });

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { developerCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 25 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(25);
+    it('should have 26 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(26);
     });
 
     it('developerCategory should be defined', () => {

package/src/tool/jwtDecoder/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { jwtDecoder } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await jwtDecoder.i18n[locale]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/jwtDecoder/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'IETF: JSON Web Token (JWT), RFC 7519',
+    url: 'https://datatracker.ietf.org/doc/html/rfc7519',
+  },
+  {
+    name: 'IETF: JSON Web Signature (JWS), RFC 7515',
+    url: 'https://datatracker.ietf.org/doc/html/rfc7515',
+  }
+];

package/src/tool/jwtDecoder/component.astro

@@ -0,0 +1,209 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { JwtDecoderUI } from './ui';
+import './jwt-decoder-parser-and-claims-inspector.css';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as JwtDecoderUI;
+---
+
+<div id="jwt-root" class="jwt-root" data-i18n={JSON.stringify(t)}>
+  <section class="jwt-card">
+    <div class="jwt-input-panel">
+      <div class="jwt-token-field">
+        <label for="jwt-token" class="jwt-label">
+          <Icon name="mdi:key-variant" class="jwt-label-icon" />
+          {t.tokenLabel}
+        </label>
+        <textarea id="jwt-token" class="jwt-token-input" spellcheck="false" placeholder={t.tokenPlaceholder}>{t.sampleToken}</textarea>
+      </div>
+
+      <div class="jwt-action-row">
+        <button id="jwt-sample" class="jwt-action jwt-action-primary" type="button">
+          <Icon name="mdi:test-tube" class="jwt-button-icon" />
+          {t.sampleButton}
+        </button>
+        <button id="jwt-clear" class="jwt-action" type="button">
+          <Icon name="mdi:eraser" class="jwt-button-icon" />
+          {t.clearButton}
+        </button>
+        <button id="jwt-copy-all" class="jwt-action" type="button">
+          <Icon name="mdi:content-copy" class="jwt-button-icon" />
+          {t.copyAll}
+        </button>
+      </div>
+
+      <p id="jwt-status" class="jwt-status jwt-status-waiting" aria-live="polite">{t.statusWaiting}</p>
+      <p class="jwt-privacy">{t.privacyNote}</p>
+    </div>
+
+    <div class="jwt-output-grid">
+      <article class="jwt-json-panel">
+        <div class="jwt-panel-heading">
+          <h2>{t.headerTitle}</h2>
+          <button class="jwt-copy" type="button" data-copy-target="jwt-header-output" title={t.copyHeader} aria-label={t.copyHeader}>
+            <Icon name="mdi:content-copy" />
+          </button>
+        </div>
+        <pre id="jwt-header-output" class="jwt-code">{t.emptyJson}</pre>
+      </article>
+
+      <article class="jwt-json-panel jwt-json-panel-main">
+        <div class="jwt-panel-heading">
+          <h2>{t.payloadTitle}</h2>
+          <button class="jwt-copy" type="button" data-copy-target="jwt-payload-output" title={t.copyPayload} aria-label={t.copyPayload}>
+            <Icon name="mdi:content-copy" />
+          </button>
+        </div>
+        <pre id="jwt-payload-output" class="jwt-code">{t.emptyJson}</pre>
+      </article>
+
+      <article class="jwt-json-panel">
+        <div class="jwt-panel-heading">
+          <h2>{t.signatureTitle}</h2>
+          <button class="jwt-copy" type="button" data-copy-target="jwt-signature-output" title={t.copySignature} aria-label={t.copySignature}>
+            <Icon name="mdi:content-copy" />
+          </button>
+        </div>
+        <pre id="jwt-signature-output" class="jwt-code jwt-signature-code">{t.signatureMissing}</pre>
+      </article>
+    </div>
+
+    <aside class="jwt-claims-panel" aria-label={t.claimsTitle}>
+      <h2>{t.claimsTitle}</h2>
+      <dl class="jwt-claims">
+        <div><dt>{t.algorithmLabel}</dt><dd id="jwt-claim-alg">{t.claimMissing}</dd></div>
+        <div><dt>{t.typeLabel}</dt><dd id="jwt-claim-typ">{t.claimMissing}</dd></div>
+        <div><dt>{t.issuerLabel}</dt><dd id="jwt-claim-iss">{t.claimMissing}</dd></div>
+        <div><dt>{t.subjectLabel}</dt><dd id="jwt-claim-sub">{t.claimMissing}</dd></div>
+        <div><dt>{t.audienceLabel}</dt><dd id="jwt-claim-aud">{t.claimMissing}</dd></div>
+        <div><dt>{t.issuedAtLabel}</dt><dd id="jwt-claim-iat">{t.claimMissing}</dd></div>
+        <div><dt>{t.notBeforeLabel}</dt><dd id="jwt-claim-nbf">{t.claimMissing}</dd></div>
+        <div><dt>{t.expiresAtLabel}</dt><dd id="jwt-claim-exp">{t.claimMissing}</dd></div>
+      </dl>
+    </aside>
+  </section>
+</div>
+
+<script>
+  import { decodeJwt, formatClaimDate, formatClaimValue, formatJson } from './logic';
+  import type { JwtDecoderUI } from './ui';
+
+  const root = document.getElementById('jwt-root') as HTMLElement;
+  const t = JSON.parse(root.dataset.i18n ?? '{}') as JwtDecoderUI;
+  const tokenInput = document.getElementById('jwt-token') as HTMLTextAreaElement;
+  const headerOutput = document.getElementById('jwt-header-output') as HTMLElement;
+  const payloadOutput = document.getElementById('jwt-payload-output') as HTMLElement;
+  const signatureOutput = document.getElementById('jwt-signature-output') as HTMLElement;
+  const status = document.getElementById('jwt-status') as HTMLElement;
+  const claims = {
+    alg: document.getElementById('jwt-claim-alg'),
+    typ: document.getElementById('jwt-claim-typ'),
+    iss: document.getElementById('jwt-claim-iss'),
+    sub: document.getElementById('jwt-claim-sub'),
+    aud: document.getElementById('jwt-claim-aud'),
+    iat: document.getElementById('jwt-claim-iat'),
+    nbf: document.getElementById('jwt-claim-nbf'),
+    exp: document.getElementById('jwt-claim-exp'),
+  };
+
+  function setStatus(text: string, tone: string) {
+    status.textContent = text;
+    status.className = `jwt-status jwt-status-${tone}`;
+  }
+
+  function setClaim(key: keyof typeof claims, value: string | null) {
+    const element = claims[key];
+    if (element) element.textContent = value ?? t.claimMissing;
+  }
+
+  function resetOutputs() {
+    headerOutput.textContent = t.emptyJson;
+    payloadOutput.textContent = t.emptyJson;
+    signatureOutput.textContent = t.signatureMissing;
+    Object.keys(claims).forEach((key) => setClaim(key as keyof typeof claims, null));
+    setStatus(t.statusWaiting, 'waiting');
+  }
+
+  function renderDecodedClaims(decoded: ReturnType<typeof decodeJwt>) {
+    headerOutput.textContent = formatJson(decoded.header);
+    payloadOutput.textContent = formatJson(decoded.payload);
+    signatureOutput.textContent = decoded.signature ? decoded.signature : t.signatureMissing;
+    setClaim('alg', formatClaimValue(decoded.header['alg']));
+    setClaim('typ', formatClaimValue(decoded.header['typ']));
+    setClaim('iss', formatClaimValue(decoded.payload['iss']));
+    setClaim('sub', formatClaimValue(decoded.payload['sub']));
+    setClaim('aud', formatClaimValue(decoded.payload['aud']));
+    setClaim('iat', formatClaimDate(decoded.payload['iat']) ?? formatClaimValue(decoded.payload['iat']));
+    setClaim('nbf', formatClaimDate(decoded.payload['nbf']) ?? formatClaimValue(decoded.payload['nbf']));
+    setClaim('exp', formatClaimDate(decoded.payload['exp']) ?? formatClaimValue(decoded.payload['exp']));
+  }
+
+  function renderDecodedStatus(decoded: ReturnType<typeof decodeJwt>) {
+    if (decoded.expired) {
+      setStatus(t.statusExpired, 'expired');
+    } else if (decoded.unsigned) {
+      setStatus(t.statusUnsigned, 'unsigned');
+    } else {
+      setStatus(`${t.statusValid} ${t.signaturePresent}`, 'valid');
+    }
+  }
+
+  function renderInvalidToken(error: ReturnType<typeof decodeJwt>['error']) {
+    resetOutputs();
+    headerOutput.textContent = t.invalidTokenTitle;
+    payloadOutput.textContent = error === 'invalid-segments' ? t.invalidSegmentError : t.invalidDecodeError;
+    setStatus(t.statusInvalid, 'invalid');
+  }
+
+  function updateDecoder() {
+    const token = tokenInput.value.trim();
+    if (!token) {
+      resetOutputs();
+      return;
+    }
+
+    const decoded = decodeJwt(token);
+    if (!decoded.valid) {
+      renderInvalidToken(decoded.error);
+      return;
+    }
+
+    renderDecodedClaims(decoded);
+    renderDecodedStatus(decoded);
+  }
+
+  async function copyText(text: string) {
+    if (!text || text === t.emptyJson || text === t.signatureMissing) return;
+    await navigator.clipboard.writeText(text);
+  }
+
+  tokenInput.addEventListener('input', updateDecoder);
+  document.getElementById('jwt-sample')?.addEventListener('click', () => {
+    tokenInput.value = t.sampleToken;
+    updateDecoder();
+  });
+  document.getElementById('jwt-clear')?.addEventListener('click', () => {
+    tokenInput.value = '';
+    resetOutputs();
+  });
+  document.getElementById('jwt-copy-all')?.addEventListener('click', () => {
+    copyText([headerOutput.textContent, payloadOutput.textContent, signatureOutput.textContent].join('\n\n'));
+  });
+  document.querySelectorAll<HTMLButtonElement>('.jwt-copy').forEach((button) => {
+    button.addEventListener('click', () => {
+      const target = document.getElementById(button.dataset.copyTarget ?? '');
+      copyText(target?.textContent ?? '');
+      button.dataset.copied = t.copiedLabel;
+      window.setTimeout(() => {
+        delete button.dataset.copied;
+      }, 1400);
+    });
+  });
+
+  updateDecoder();
+</script>

package/src/tool/jwtDecoder/entry.ts

@@ -0,0 +1,30 @@
+import type { DeveloperToolEntry, ToolLocaleContent } from '../../types';
+
+import type { JwtDecoderUI } from './ui';
+
+export type JwtDecoderLocaleContent = ToolLocaleContent<JwtDecoderUI>;
+
+export const jwtDecoder: DeveloperToolEntry<JwtDecoderUI> = {
+  id: 'jwt-decoder-parser-and-claims-inspector',
+  icons: {
+    bg: 'mdi:key-chain',
+    fg: 'mdi:code-json',
+  },
+  i18n: {
+    de: async () => (await import('./i18n/de')).content,
+    en: async () => (await import('./i18n/en')).content,
+    es: async () => (await import('./i18n/es')).content,
+    fr: async () => (await import('./i18n/fr')).content,
+    id: async () => (await import('./i18n/id')).content,
+    it: async () => (await import('./i18n/it')).content,
+    ja: async () => (await import('./i18n/ja')).content,
+    ko: async () => (await import('./i18n/ko')).content,
+    nl: async () => (await import('./i18n/nl')).content,
+    pl: async () => (await import('./i18n/pl')).content,
+    pt: async () => (await import('./i18n/pt')).content,
+    ru: async () => (await import('./i18n/ru')).content,
+    sv: async () => (await import('./i18n/sv')).content,
+    tr: async () => (await import('./i18n/tr')).content,
+    zh: async () => (await import('./i18n/zh')).content,
+  },
+};

package/src/tool/jwtDecoder/i18n/de.ts

@@ -0,0 +1,248 @@
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { JwtDecoderUI } from '../ui';
+import { bibliography } from '../bibliography';
+
+const slug = 'jwt-decoder-parser-und-claims-inspektor';
+const title = 'JWT Decoder, Parser und Claims Inspektor';
+const description = 'Fügen Sie ein JSON Web Token ein, dekodieren Sie dessen Header und Payload sofort, inspizieren Sie registrierte Claims, erkennen Sie abgelaufene Tokens und kopieren Sie sauberes JSON zum Debuggen von Authentifizierungsabläufen.';
+
+const howTo = [
+  {
+    name: 'Fügen Sie das JWT ein',
+    text: 'Kopieren Sie ein Token aus einem Authorization-Header, Cookie, Log-Eintrag oder Identitätsanbieter und fügen Sie es in das Eingabefeld ein.',
+  },
+  {
+    name: 'Lesen Sie den dekodierten Header und Payload',
+    text: 'Das Tool teilt das Token in Header, Payload und Signatur auf und stellt die JSON-Segmente in separaten Panels zur schnellen Inspektion dar.',
+  },
+  {
+    name: 'Überprüfen Sie wichtige Claims',
+    text: 'Prüfen Sie Algorithmus, Aussteller, Audience, Subjekt, Ausstellungszeit, Gültigkeitsbeginn und Ablaufzeit, ohne Unix-Timestamps manuell umzurechnen.',
+  },
+  {
+    name: 'Kopieren Sie die benötigten Daten',
+    text: 'Kopieren Sie einen dekodierten Abschnitt oder die gesamte dekodierte Ausgabe, wenn Sie eine bereinigte Debugging-Momentaufnahme mit Ihrem Team teilen müssen.',
+  },
+];
+
+const faq = [
+  {
+    question: 'Beweist die Dekodierung eines JWT, dass das Token gültig ist?',
+    answer: 'Nein. Die Dekodierung zeigt nur den base64url-kodierten Header und Payload. Ein Token ist erst vertrauenswürdig, nachdem die Signatur, der Aussteller, die Audience, der Ablauf und zugehörige Claims von der Anwendung oder dem Identitätsanbieter validiert wurden.',
+  },
+  {
+    question: 'Kann ich diesen JWT-Decoder für Access-Tokens und ID-Tokens verwenden?',
+    answer: 'Ja. Der Decoder eignet sich zur Inspektion von OAuth-Access-Tokens, OpenID-Connect-ID-Tokens, Session-Tokens und Service-zu-Service-Tokens, sofern sie das standardmäßige dreiteilige JWT-Format verwenden.',
+  },
+  {
+    question: 'Warum verifiziert das Signatur-Panel das Token nicht?',
+    answer: 'Die JWT-Verifizierung erfordert das korrekte Secret, den öffentlichen Schlüssel oder die JWKS-Konfiguration. Dieses Tool konzentriert sich bewusst auf Dekodierung und Inspektion, damit Entwickler den Token-Inhalt einsehen können, ohne vorzutäuschen, dass eine sichtbare Signatur-Zeichenkette ein Gültigkeitsnachweis ist.',
+  },
+  {
+    question: 'Was sollte ich zuerst prüfen, wenn ich ein JWT debugge?',
+    answer: 'Beginnen Sie mit exp, nbf, iss, aud und alg. Die meisten echten Produktionsprobleme stammen von abgelaufenen Tokens, Uhrenabweichungen, falschen Audience-Werten, unerwarteten Aussteller-URLs oder unsicheren Algorithmus-Annahmen.',
+  },
+];
+
+const ui: JwtDecoderUI = {
+  tokenLabel: 'JWT-Token',
+  tokenPlaceholder: 'JWT hier einfügen: Header.Payload.Signatur',
+  sampleButton: 'Beispiel laden',
+  clearButton: 'Löschen',
+  statusWaiting: 'Fügen Sie ein Token ein, um dessen JSON-Header, Payload und Claims zu dekodieren.',
+  statusValid: 'JWT erfolgreich dekodiert.',
+  statusInvalid: 'Dies sieht nicht nach einem gültigen dreiteiligen JWT aus.',
+  statusExpired: 'JWT dekodiert, aber der exp-Claim ist bereits abgelaufen.',
+  statusUnsigned: 'JWT dekodiert, aber es ist nicht signiert oder verwendet den Algorithmus none.',
+  headerTitle: 'Header',
+  payloadTitle: 'Payload',
+  signatureTitle: 'Signatur',
+  claimsTitle: 'Registrierte Claims',
+  copyHeader: 'Dekodierten Header kopieren',
+  copyPayload: 'Dekodierten Payload kopieren',
+  copySignature: 'Signatur kopieren',
+  copyAll: 'Alles kopieren',
+  copiedLabel: 'Kopiert',
+  invalidTokenTitle: 'Ungültiges JWT',
+  invalidTokenBody: 'Prüfen Sie, ob das Token drei durch Punkte getrennte base64url-Segmente hat.',
+  invalidSegmentError: 'Prüfen Sie, ob das Token drei durch Punkte getrennte base64url-Segmente hat.',
+  invalidDecodeError: 'Der Header oder Payload konnte nicht als gültiges JSON dekodiert werden.',
+  emptyJson: '{}',
+  signaturePresent: 'Signatursegment ist vorhanden; verifizieren Sie es in Ihrer Authentifizierungsschicht mit dem richtigen Schlüssel.',
+  signatureMissing: 'Kein Signatursegment',
+  algorithmLabel: 'Algorithmus',
+  typeLabel: 'Typ',
+  issuerLabel: 'Aussteller',
+  subjectLabel: 'Subjekt',
+  audienceLabel: 'Audience',
+  issuedAtLabel: 'Ausgestellt am',
+  notBeforeLabel: 'Gültig ab',
+  expiresAtLabel: 'Läuft ab am',
+  claimMissing: 'Nicht vorhanden',
+  privacyNote: 'Die Dekodierung läuft in Ihrer Browser-Sitzung. Fügen Sie keine Produktionsgeheimnisse in ein Tool ein, es sei denn, Ihre Sicherheitsrichtlinie erlaubt dies.',
+  sampleToken: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJnYW1lYm9iLXVzZXItNDIiLCJuYW1lIjoiR2FtZUJvYiBEZXZlbG9wZXIiLCJpc3MiOiJodHRwczovL3d3dy5nYW1lYm9iLmRldiIsImF1ZCI6ImRldmVsb3Blci10b29scyIsImlhdCI6MTcxNzIwMDAwMCwibmJmIjoxNzE3MjAwMDAwLCJleHAiOjE4OTM0NTYwMDAsInJvbGUiOiJhZG1pbiJ9.demo-signature',
+};
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faq.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: {
+      '@type': 'Answer',
+      text: item.answer,
+    },
+  })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howTo.map((step, index) => ({
+    '@type': 'HowToStep',
+    position: index + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'DeveloperApplication',
+  operatingSystem: 'Any',
+  offers: {
+    '@type': 'Offer',
+    price: '0',
+    priceCurrency: 'EUR',
+  },
+  inLanguage: 'de',
+};
+
+export const content: ToolLocaleContent<JwtDecoderUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Häufig gestellte Fragen zum JWT-Decoder',
+  faq,
+  bibliographyTitle: 'JWT-Spezifikationen und Sicherheitsreferenzen',
+  bibliography,
+  howTo,
+  schemas: [appSchema, faqSchema, howToSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'JWTs dekodieren, ohne den Sicherheitskontext zu verlieren',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Ein JSON Web Token wirkt kompakt, enthält aber oft genau das Detail, das einen Authentifizierungsfehler erklärt: den Signaturalgorithmus, den Aussteller, die Audience, das Subjekt, die Ausstellungszeit, die Gültigkeitsbeginnzeit, den Ablauf und anwendungsspezifische Autorisierungs-Claims. Dieser <strong>JWT-Decoder, Parser und Claims-Inspektor</strong> wandelt die drei Token-Segmente in lesbares JSON um, damit Sie Authentifizierungsabläufe schneller debuggen können.',
+    },
+    {
+      type: 'diagnostic',
+      variant: 'warning',
+      title: 'Dekodiert bedeutet nicht vertrauenswürdig',
+      html: 'Jeder kann ein JWT base64url-dekodieren. Vertrauen beginnt erst, nachdem Ihre Anwendung die Signatur mit dem korrekten Secret, öffentlichen Schlüssel oder JWKS verifiziert und dann Aussteller, Audience, Ablauf und alle domainspezifischen Claims validiert hat. Verwenden Sie dieses Tool zur Dateninspektion, nicht um ein Token als authentisch zu akzeptieren.',
+    },
+    {
+      type: 'title',
+      text: 'Was Ihnen jedes JWT-Segment verrät',
+      level: 3,
+    },
+    {
+      type: 'table',
+      headers: ['Segment', 'Typischer Inhalt', 'Debugging-Wert'],
+      rows: [
+        ['Header', 'Algorithmus, Tokentyp und optionale Schlüssel-ID', 'Zeigt, ob das Token HS256, RS256, ES256 oder eine andere Verifikationsstrategie erwartet.'],
+        ['Payload', 'Registrierte Claims und Anwendungs-Claims', 'Enthüllt Identität, Tenant, Scopes, Rollen, Ablauf und Audience-Abweichungen.'],
+        ['Signatur', 'Kryptografische Signatur-Bytes als base64url kodiert', 'Bestätigt, dass ein Signatursegment existiert, muss aber mit dem richtigen Schlüssel anderweitig verifiziert werden.'],
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Claims, die meistens fehlerhafte Authentifizierung erklären',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>exp:</strong> Wenn das Token abgelaufen ist, könnte die Aktualisierungslogik oder die Uhreneinstellung falsch sein.',
+        '<strong>nbf:</strong> Wenn das Token noch nicht aktiv ist, könnten die Uhren von Server und Identitätsanbieter nicht synchron sein.',
+        '<strong>iss:</strong> Wenn die Aussteller-URL von der Konfiguration abweicht, stammt das Token möglicherweise vom falschen Tenant oder aus der falschen Umgebung.',
+        '<strong>aud:</strong> Wenn die Audience nicht mit der API-Kennung übereinstimmt, wurde das Token für eine andere Ressource ausgestellt.',
+        '<strong>alg:</strong> Wenn der Algorithmus unerwartet ist, könnte Ihr Verifizierer das Token ablehnen oder einen gefährlichen Konfigurationsfehler aufdecken.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Anwendungsfälle für einen JWT-Parser während der Entwicklung',
+      level: 3,
+    },
+    {
+      type: 'comparative',
+      columns: 3,
+      items: [
+        {
+          title: 'Frontend Debugging',
+          description: 'Inspizieren Sie ID-Tokens und Access-Tokens, die nach dem Login empfangen wurden, um Scopes, Rollen und Profil-Claims zu bestätigen.',
+          icon: 'mdi:monitor-dashboard',
+          points: ['Profil-Claims prüfen', 'Scopes und Rollen bestätigen', 'Login-Umgebungen vergleichen'],
+        },
+        {
+          title: 'Backend API QA',
+          description: 'Vergleichen Sie erwartete Aussteller- und Audience-Werte mit dem tatsächlich in einem Authorization-Header gesendeten Token.',
+          icon: 'mdi:api',
+          highlight: true,
+          points: ['Audience-Form validieren', 'Aussteller-Abweichungen erkennen', 'Bearer-Tokens inspizieren'],
+        },
+        {
+          title: 'Identitätsanbieter Einrichtung',
+          description: 'Prüfen Sie, ob Claims von Auth0, Azure AD, Cognito, Keycloak oder einem benutzerdefinierten Anbieter so geformt sind, wie Ihre App es erwartet.',
+          icon: 'mdi:account-key',
+          points: ['Tenant-Daten überprüfen', 'Benutzerdefinierte Claims prüfen', 'Anbieter-Zuordnungen vergleichen'],
+        },
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Häufige JWT-Fehler, die dieser Inspektor sichtbar macht',
+      level: 3,
+    },
+    {
+      type: 'proscons',
+      title: 'Schnelle Prüfungen gegen Vertrauensentscheidungen',
+      items: [
+        {
+          pro: 'Sehen Sie fehlerhafte Tokens sofort.',
+          con: 'Er kann Ihre erwartete Audience oder Ihren Aussteller nicht kennen.',
+        },
+        {
+          pro: 'Konvertieren Sie Unix-Timestamp-Claims in lesbare Datumsangaben.',
+          con: 'Er kann eine Signatur nicht ohne das echte Schlüsselmaterial verifizieren.',
+        },
+        {
+          pro: 'Erkennen Sie fehlende Aussteller-, Audience-, Subjekt- oder Typ-Werte.',
+          con: 'Er kann nicht beweisen, dass Scopes und Rollen für Ihre Anwendung sicher sind.',
+        },
+      ],
+    },
+    {
+      type: 'summary',
+      title: 'Empfohlener Workflow',
+      items: [
+        'Dekodieren Sie das Token, um zu verstehen, was der Client oder die API tatsächlich erhalten hat.',
+        'Prüfen Sie exp, nbf, iss, aud, sub und alg, bevor Sie der Anwendungslogik nachgehen.',
+        'Verifizieren Sie Signaturen und Vertrauensentscheidungen nur in Ihrer Authentifizierungsschicht.',
+        'Vermeiden Sie die Weitergabe sensibler Produktions-JWTs in Tickets, Logs oder Screenshots.',
+      ],
+    },
+  ],
+};