Hide credentials from generated code snippets (#1050)

* prevent credentials from appearing in code snippets

* use credential name or type as placeholder

packages/docusaurus-theme-openapi-docs/src/theme/ApiExplorer/CodeSnippets/index.tsx

@@ -5,20 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  * ========================================================================== */
 
-/* ============================================================================
- * Copyright (c) Palo Alto Networks
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * ========================================================================== */
-
 import React, { useState, useEffect } from "react";
 
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import ApiCodeBlock from "@theme/ApiExplorer/ApiCodeBlock";
 import buildPostmanRequest from "@theme/ApiExplorer/buildPostmanRequest";
 import CodeTabs from "@theme/ApiExplorer/CodeTabs";
 import { useTypedSelector } from "@theme/ApiItem/hooks";
+import cloneDeep from "lodash/cloneDeep";
 import codegen from "postman-code-generators";
 import sdk from "postman-collection";
 
@@ -59,6 +53,41 @@ function CodeSnippets({ postman, codeSamples }: Props) {
   const headerParams = useTypedSelector((state: any) => state.params.header);
 
   const auth = useTypedSelector((state: any) => state.auth);
+  const clonedAuth = cloneDeep(auth);
+  let placeholder: string;
+
+  function cleanCredentials(obj: any) {
+    for (const key in obj) {
+      if (typeof obj[key] === "object" && obj[key] !== null) {
+        // use name as placeholder if exists
+        placeholder = clonedAuth?.options?.[key]?.[0]?.name;
+        obj[key] = cleanCredentials(obj[key]);
+      } else {
+        obj[key] = `<${placeholder ?? key}>`;
+      }
+    }
+
+    return obj;
+  }
+
+  // scrub credentials from code snippets
+  const cleanedAuth = {
+    ...clonedAuth,
+    data: cleanCredentials(clonedAuth.data),
+  };
+
+  // Create a Postman request object using cleanedAuth
+  const cleanedPostmanRequest = buildPostmanRequest(postman, {
+    queryParams,
+    pathParams,
+    cookieParams,
+    contentType,
+    accept,
+    headerParams,
+    body,
+    server,
+    auth: cleanedAuth,
+  });
 
   // User-defined languages array
   // Can override languageSet, change order of langs, override options and variants
@@ -105,21 +134,10 @@ function CodeSnippets({ postman, codeSamples }: Props) {
     }
 
     if (language && !!language.options) {
-      const postmanRequest = buildPostmanRequest(postman, {
-        queryParams,
-        pathParams,
-        cookieParams,
-        contentType,
-        accept,
-        headerParams,
-        body,
-        server,
-        auth,
-      });
       codegen.convert(
         language.language,
         language.variant,
-        postmanRequest,
+        cleanedPostmanRequest,
         language.options,
         (error: any, snippet: string) => {
           if (error) {
@@ -137,22 +155,10 @@ function CodeSnippets({ postman, codeSamples }: Props) {
       // This allows users to define only the minimal properties necessary in languageTabs
       // User-defined properties should override languageSet properties
       const mergedLanguage = { ...langSource[0], ...language };
-      const postmanRequest = buildPostmanRequest(postman, {
-        queryParams,
-        pathParams,
-        cookieParams,
-        contentType,
-        accept,
-        headerParams,
-        body,
-        server,
-        auth,
-      });
-
       codegen.convert(
         mergedLanguage.language,
         mergedLanguage.variant,
-        postmanRequest,
+        cleanedPostmanRequest,
         mergedLanguage.options,
         (error: any, snippet: string) => {
           if (error) {
@@ -175,27 +181,16 @@ function CodeSnippets({ postman, codeSamples }: Props) {
     postman,
     queryParams,
     server,
-    auth,
+    cleanedPostmanRequest,
     mergedLangs,
   ]);
-  // no dependencies was intentionlly set for this particular hook. it's safe as long as if conditions are set
+  // no dependencies was intentionally set for this particular hook. it's safe as long as if conditions are set
   useEffect(function onSelectedVariantUpdate() {
     if (selectedVariant && selectedVariant !== language?.variant) {
-      const postmanRequest = buildPostmanRequest(postman, {
-        queryParams,
-        pathParams,
-        cookieParams,
-        contentType,
-        accept,
-        headerParams,
-        body,
-        server,
-        auth,
-      });
       codegen.convert(
         language.language,
         selectedVariant,
-        postmanRequest,
+        cleanedPostmanRequest,
         language.options,
         (error: any, snippet: string) => {
           if (error) {
@@ -207,7 +202,7 @@ function CodeSnippets({ postman, codeSamples }: Props) {
     }
   });
 
-  // no dependencies was intentionlly set for this particular hook. it's safe as long as if conditions are set
+  // no dependencies was intentionally set for this particular hook. it's safe as long as if conditions are set
   // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(function onSelectedSampleUpdate() {
     if (

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

@@ -298,7 +298,7 @@ function buildPostmanRequest(
       if (apiKey === undefined) {
         otherHeaders.push({
           key: a.name,
-          value: "<API_KEY_VALUE>",
+          value: `<${a.name ?? a.type}>`,
         });
         continue;
       }