feat: Implement authPersistence in ThemeConfig

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"] = {};

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/persistanceMiddleware.ts

@@ -11,8 +11,8 @@ import {
   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 { 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";
 
@@ -25,7 +25,9 @@ export function createPersistanceMiddleware(options: ThemeConfig["api"]) {
 
       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,11 +62,14 @@ export function createPersistanceMiddleware(options: ThemeConfig["api"]) {
       }
 
       if (action.type === "server/setServerVariable") {
-        const server = storage.getItem("server") ?? "{}";
+        const server = storage.getItem("server");
         const variables = JSON.parse(action.payload);
-        let serverObject = JSON.parse(server);
-        serverObject.variables[variables.key].default = variables.value;
-        storage.setItem("server", JSON.stringify(serverObject));
+
+        let 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;

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

@@ -15,6 +15,7 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import { createAuth } from "@theme/ApiExplorer/Authorization/slice";
 import { createPersistanceMiddleware } from "@theme/ApiExplorer/persistanceMiddleware";
+import { createStorage } from "@theme/ApiExplorer/storage-utils";
 import DocItemLayout from "@theme/ApiItem/Layout";
 import CodeBlock from "@theme/CodeBlock";
 import type { Props } from "@theme/DocItem";
@@ -129,10 +130,12 @@ 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 server = storage.getItem("server");
     const serverObject = (JSON.parse(server!) as ServerObject) ?? {};
 
     store2 = createStoreWithState(

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

@@ -11,7 +11,7 @@ import type { JSONSchema4, JSONSchema6, JSONSchema7 } from "json-schema";
 export interface ThemeConfig {
   api?: {
     proxy?: string;
-    authPersistance?: false | "localStorage" | "sessionStorage";
+    authPersistence?: false | "localStorage" | "sessionStorage";
   };
 }