From 0c03676efbedd3866dc5a32d4249756366d12e06 Mon Sep 17 00:00:00 2001
From: "Nolann B." <100787331+nolannbiron@users.noreply.github.com>
Date: Fri, 7 Feb 2025 12:35:46 +0100
Subject: [PATCH] Improve OpenAPI Securities sample and headers (#2816)

---
 .changeset/early-queens-pump.md               |  5 ++++
 .../react-openapi/src/OpenAPICodeSample.tsx   | 26 +++++++------------
 .../react-openapi/src/OpenAPISecurities.tsx   | 10 +++++--
 3 files changed, 23 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/early-queens-pump.md

diff --git a/.changeset/early-queens-pump.md b/.changeset/early-queens-pump.md
new file mode 100644
index 000000000..709f300f5
--- /dev/null
+++ b/.changeset/early-queens-pump.md
@@ -0,0 +1,5 @@
+---
+'@gitbook/react-openapi': patch
+---
+
+Better securities sample and headers
diff --git a/packages/react-openapi/src/OpenAPICodeSample.tsx b/packages/react-openapi/src/OpenAPICodeSample.tsx
index 88d8b8b83..888b19268 100644
--- a/packages/react-openapi/src/OpenAPICodeSample.tsx
+++ b/packages/react-openapi/src/OpenAPICodeSample.tsx
@@ -136,34 +136,28 @@ function getSecurityHeaders(securities: OpenAPIOperationData['securities']): {
     switch (security[1].type) {
         case 'http': {
             let scheme = security[1].scheme;
-            if (scheme === 'bearer') {
+            let format = security[1].bearerFormat ?? 'YOUR_SECRET_TOKEN';
+
+            if (scheme?.includes('bearer')) {
                 scheme = 'Bearer';
+            } else if (scheme?.includes('basic')) {
+                scheme = 'Basic';
+                format = 'username:password';
+            } else if (scheme?.includes('token')) {
+                scheme = 'Token';
             }
 
             return {
-                Authorization: scheme + ' ' + (security[1].bearerFormat ?? '<token>'),
+                Authorization: scheme + ' ' + format,
             };
         }
         case 'apiKey': {
             if (security[1].in !== 'header') return {};
 
             const name = security[1].name ?? 'Authorization';
-            let scheme = security[0];
-
-            switch (scheme) {
-                case 'bearerAuth':
-                    scheme = 'Bearer';
-                    break;
-                case 'token':
-                    scheme = 'Token';
-                    break;
-                case 'basic':
-                    scheme = 'Basic';
-                    break;
-            }
 
             return {
-                [name]: scheme + ' ' + '<apiKey>',
+                [name]: 'YOUR_API_KEY',
             };
         }
         default: {
diff --git a/packages/react-openapi/src/OpenAPISecurities.tsx b/packages/react-openapi/src/OpenAPISecurities.tsx
index 84c47c528..493d64d98 100644
--- a/packages/react-openapi/src/OpenAPISecurities.tsx
+++ b/packages/react-openapi/src/OpenAPISecurities.tsx
@@ -53,10 +53,16 @@ export function OpenAPISecurities(props: {
 function getLabelForType(security: OpenAPIV3_1.SecuritySchemeObject) {
     switch (security.type) {
         case 'apiKey':
-            return <OpenAPISchemaName propertyName="apiKey" type="string" required />;
+            return (
+                <OpenAPISchemaName
+                    propertyName={security.name ?? 'apiKey'}
+                    type="string"
+                    required
+                />
+            );
         case 'http':
             if (security.scheme === 'basic') {
-                return 'Basic Auth';
+                return <OpenAPISchemaName propertyName="Authorization" type="string" required />;
             }
 
             if (security.scheme == 'bearer') {