feat: implement authPersistence in ThemeConfig

- Fix spelling: authPersistance → authPersistence
- Actually implement the feature (was defined but never read)
- Rename persistanceMiddleware.ts → persistenceMiddleware.ts
- Add proper null checks for storage.getItem('server')
- Add JSDoc documentation for the config option

Resolves #1239
Resolves #1238

Co-authored-by: sserrata <[email protected]>

Author: tayles

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/Authorization/slice.ts

@@ -58,7 +58,7 @@ export function createAuth({
   };
   options?: ThemeConfig["api"];
 }): AuthState {
-  const storage = createStorage("sessionStorage");
+  const storage = createStorage(opts?.authPersistence ?? "sessionStorage");
 
   let data: AuthState["data"] = {};
   let options: AuthState["options"] = {};

…eme/ApiExplorer/persistanceMiddleware.ts …eme/ApiExplorer/persistenceMiddleware.tspackages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/persistanceMiddleware.ts renamed to packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/persistenceMiddleware.ts packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/persistanceMiddleware.ts renamed to packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/persistenceMiddleware.ts

@@ -5,27 +5,29 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-import { Middleware } from "@reduxjs/toolkit";
+import type { Middleware } from "@reduxjs/toolkit";
 import {
   setAuthData,
   setSelectedAuth,
 } from "@theme/ApiExplorer/Authorization/slice";
-import { AppDispatch, RootState } from "@theme/ApiItem/store";
-/* eslint-disable import/no-extraneous-dependencies*/
-import { ThemeConfig } from "docusaurus-theme-openapi-docs/src/types";
+import type { AppDispatch, RootState } from "@theme/ApiItem/store";
+import type { ServerObject } from "docusaurus-plugin-openapi-docs/src/openapi/types";
+import type { ThemeConfig } from "docusaurus-theme-openapi-docs/src/types";
 
 import { createStorage, hashArray } from "./storage-utils";
 
-export function createPersistanceMiddleware(options: ThemeConfig["api"]) {
-  const persistanceMiddleware: Middleware<{}, RootState, AppDispatch> =
+export function createPersistenceMiddleware(options: ThemeConfig["api"]) {
+  const persistenceMiddleware: Middleware<{}, RootState, AppDispatch> =
     (storeAPI) =>
     (next) =>
     (action: ReturnType<typeof setAuthData | typeof setSelectedAuth> | any) => {
       const result = next(action);
 
       const state = storeAPI.getState();
 
-      const storage = createStorage("sessionStorage");
+      const storage = createStorage(
+        options?.authPersistence ?? "sessionStorage"
+      );
 
       if (action.type === setAuthData.type) {
         for (const [key, value] of Object.entries(state.auth.data)) {
@@ -60,14 +62,20 @@ export function createPersistanceMiddleware(options: ThemeConfig["api"]) {
       }
 
       if (action.type === "server/setServerVariable") {
-        const server = storage.getItem("server") ?? "{}";
+        const server = storage.getItem("server");
+        if (!server) {
+          return result;
+        }
         const variables = JSON.parse(action.payload);
-        let serverObject = JSON.parse(server);
-        serverObject.variables[variables.key].default = variables.value;
-        storage.setItem("server", JSON.stringify(serverObject));
+
+        const serverObject = (JSON.parse(server) as ServerObject) ?? {};
+        if (serverObject.variables?.[variables.key]) {
+          serverObject.variables[variables.key].default = variables.value;
+          storage.setItem("server", JSON.stringify(serverObject));
+        }
       }
 
       return result;
     };
-  return persistanceMiddleware;
+  return persistenceMiddleware;
 }

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/storage-utils.ts

@@ -17,10 +17,10 @@ export function hashArray(arr: string[]) {
   return hash(res);
 }
 
-type Persistance = false | "localStorage" | "sessionStorage" | undefined;
+type Persistence = false | "localStorage" | "sessionStorage" | undefined;
 
-export function createStorage(persistance: Persistance): Storage {
-  if (persistance === false) {
+export function createStorage(persistence: Persistence): Storage {
+  if (persistence === false) {
     return {
       getItem: () => null,
       setItem: () => {},
@@ -31,7 +31,7 @@ export function createStorage(persistance: Persistance): Storage {
     };
   }
 
-  if (persistance === "sessionStorage") {
+  if (persistence === "sessionStorage") {
     return sessionStorage;
   }
 

packages/docusaurus-theme-openapi-docs/src/theme/ApiItem/index.tsx

@@ -14,7 +14,8 @@ import { HtmlClassNameProvider } from "@docusaurus/theme-common";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import { createAuth } from "@theme/ApiExplorer/Authorization/slice";
-import { createPersistanceMiddleware } from "@theme/ApiExplorer/persistanceMiddleware";
+import { createPersistenceMiddleware } from "@theme/ApiExplorer/persistenceMiddleware";
+import { createStorage } from "@theme/ApiExplorer/storage-utils";
 import DocItemLayout from "@theme/ApiItem/Layout";
 import CodeBlock from "@theme/CodeBlock";
 import type { Props } from "@theme/DocItem";
@@ -90,11 +91,11 @@ export default function ApiItem(props: Props): JSX.Element {
 
   // Define store2
   let store2: any = {};
-  const persistanceMiddleware = createPersistanceMiddleware(options);
+  const persistenceMiddleware = createPersistenceMiddleware(options);
 
   // Init store for SSR
   if (!isBrowser) {
-    store2 = createStoreWithoutState({}, [persistanceMiddleware]);
+    store2 = createStoreWithoutState({}, [persistenceMiddleware]);
   }
 
   // Init store for CSR to hydrate components
@@ -129,11 +130,15 @@ export default function ApiItem(props: Props): JSX.Element {
       securitySchemes: api?.securitySchemes,
       options,
     });
+
+    const storage = createStorage(options?.authPersistence ?? "sessionStorage");
     // TODO: determine way to rehydrate without flashing
     // const acceptValue = window?.sessionStorage.getItem("accept");
     // const contentTypeValue = window?.sessionStorage.getItem("contentType");
-    const server = window?.sessionStorage.getItem("server");
-    const serverObject = (JSON.parse(server!) as ServerObject) ?? {};
+    const server = storage.getItem("server");
+    const serverObject = server
+      ? (JSON.parse(server) as ServerObject)
+      : undefined;
 
     store2 = createStoreWithState(
       {
@@ -146,15 +151,15 @@ export default function ApiItem(props: Props): JSX.Element {
           options: contentTypeArray,
         },
         server: {
-          value: serverObject.url ? serverObject : undefined,
+          value: serverObject?.url ? serverObject : undefined,
           options: servers,
         },
         response: { value: undefined },
         body: { type: "empty" },
         params,
         auth,
       },
-      [persistanceMiddleware]
+      [persistenceMiddleware]
     );
   }
 

packages/docusaurus-theme-openapi-docs/src/types.ts

@@ -11,7 +11,13 @@ import type { JSONSchema4, JSONSchema6, JSONSchema7 } from "json-schema";
 export interface ThemeConfig {
   api?: {
     proxy?: string;
-    authPersistance?: false | "localStorage" | "sessionStorage";
+    /**
+     * Controls how authentication credentials are persisted in the API explorer.
+     * - `false`: No persistence (in-memory only)
+     * - `"sessionStorage"`: Persist for the browser session (default)
+     * - `"localStorage"`: Persist across browser sessions
+     */
+    authPersistence?: false | "sessionStorage" | "localStorage";
     /** Request timeout in milliseconds. Defaults to 30000 (30 seconds). */
     requestTimeout?: number;
   };