OpenAPI: Persist authorization field

.changeset/tricky-poets-taste.md

@@ -0,0 +1,5 @@
+---
+'fumadocs-openapi': minor
+---
+
+Persist `authorization` field

packages/openapi/src/render/playground.tsx

@@ -76,7 +76,7 @@ export interface APIPlaygroundProps {
   route: string;
   method: string;
   bodyType: 'json' | 'form-data';
-  authorization?: PrimitiveRequestField;
+  authorization?: PrimitiveRequestField & { authType: string };
   path?: PrimitiveRequestField[];
   query?: PrimitiveRequestField[];
   header?: PrimitiveRequestField[];
@@ -133,7 +133,7 @@ export function Playground({
 function getAuthorizationField(
   method: MethodInformation,
   ctx: RenderContext,
-): PrimitiveRequestField | undefined {
+): (PrimitiveRequestField & { authType: string }) | undefined {
   const security = method.security ?? ctx.document.security ?? [];
   if (security.length === 0) return;
   const singular = security.find(
@@ -146,6 +146,7 @@ function getAuthorizationField(
   return {
     type: 'string',
     name: 'Authorization',
+    authType: scheme.type,
     defaultValue:
       scheme.type === 'oauth2' ||
       (scheme.type === 'http' && scheme.scheme === 'bearer')

packages/openapi/src/ui/playground.tsx

@@ -5,6 +5,7 @@ import {
   useMemo,
   useRef,
   useState,
+  useEffect,
 } from 'react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 import useSWRImmutable from 'swr/immutable';
@@ -136,6 +137,23 @@ export function APIPlayground({
     },
   );
 
+  useEffect(() => {
+    if (!authorization) return;
+    const key = `__fumadocs_authorization_${authorization.authType}`;
+    const cached = localStorage.getItem(key);
+    if (cached) form.setValue('authorization', cached);
+
+    const subscription = form.watch((value, { name }) => {
+      if (name !== 'authorization' || !value.authorization) return;
+      localStorage.setItem(key, value.authorization);
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- mounted only once
+  }, []);
+
   const onSubmit = form.handleSubmit((value) => {
     setInput(value);
   });