Fix security schemes

demo/examples/petstore.yaml

@@ -37,6 +37,7 @@ info:
     Petstore offers two forms of authentication:
       - API Key
       - OAuth2
+
     OAuth2 - an open protocol to allow secure authorization in a simple
     and standard method from web, mobile and desktop applications.
 
@@ -120,6 +121,13 @@ paths:
         - petstore_auth:
             - "write:pets"
             - "read:pets"
+        - api_key: []
+        - ApiKeyAuth: []
+        - BasicAuth: []
+        - BearerAuth: []
+        - OAuth2: []
+        - OpenID: []
+
       x-codeSamples:
         - lang: "C#"
           source: |
@@ -1223,13 +1231,29 @@ components:
       type: apiKey
       name: api_key
       in: header
-  examples:
-    Order:
-      value:
-        quantity: 1
-        shipDate: "2018-10-19T16:46:45Z"
-        status: placed
-        complete: false
+    BasicAuth:
+      type: http
+      scheme: basic
+    BearerAuth:
+      type: http
+      scheme: bearer
+    ApiKeyAuth:
+      type: apiKey
+      in: header
+      name: X-API-Key
+    OpenID:
+      type: openIdConnect
+      openIdConnectUrl: https://example.com/.well-known/openid-configuration
+    OAuth2:
+      type: oauth2
+      flows:
+        authorizationCode:
+          authorizationUrl: https://example.com/oauth/authorize
+          tokenUrl: https://example.com/oauth/token
+          scopes:
+            read: Grants read access
+            write: Grants write access
+            admin: Grants access to admin operations
 x-webhooks:
   newPet:
     post:

packages/docusaurus-plugin-openapi-docs/src/markdown/createAuthentication.ts

@@ -13,7 +13,8 @@ export function createAuthentication(securitySchemes: SecuritySchemeObject) {
   if (!securitySchemes || !Object.keys(securitySchemes).length) return "";
 
   const createAuthenticationTable = (securityScheme: any) => {
-    const { bearerFormat, flows, name, scheme, type } = securityScheme;
+    const { bearerFormat, flows, name, scheme, type, openIdConnectUrl } =
+      securityScheme;
 
     const createSecuritySchemeTypeRow = () =>
       create("tr", {
@@ -30,7 +31,7 @@ export function createAuthentication(securitySchemes: SecuritySchemeObject) {
 
         return create("tr", {
           children: [
-            create("th", { children: `${flowType} OAuth Flow:` }),
+            create("th", { children: `OAuth Flow (${flowType}):` }),
             create("td", {
               children: [
                 guard(tokenUrl, () =>
@@ -91,12 +92,14 @@ export function createAuthentication(securitySchemes: SecuritySchemeObject) {
                       create("td", { children: scheme }),
                     ],
                   }),
-                  create("tr", {
-                    children: [
-                      create("th", { children: "Bearer format:" }),
-                      create("td", { children: bearerFormat }),
-                    ],
-                  }),
+                  guard(bearerFormat, () =>
+                    create("tr", {
+                      children: [
+                        create("th", { children: "Bearer format:" }),
+                        create("td", { children: bearerFormat }),
+                      ],
+                    })
+                  ),
                 ],
               }),
             }),
@@ -115,23 +118,51 @@ export function createAuthentication(securitySchemes: SecuritySchemeObject) {
             }),
           ],
         });
+      case "openIdConnect":
+        return create("div", {
+          children: [
+            create("table", {
+              children: create("tbody", {
+                children: [
+                  createSecuritySchemeTypeRow(),
+                  guard(openIdConnectUrl, () =>
+                    create("tr", {
+                      children: [
+                        create("th", { children: "OpenID Connect URL:" }),
+                        create("td", { children: openIdConnectUrl }),
+                      ],
+                    })
+                  ),
+                ],
+              }),
+            }),
+          ],
+        });
       default:
         return "";
     }
   };
 
-  const formatTabLabel = (str: string) => {
-    const formattedLabel = str
+  const formatTabLabel = (key: string, type: string, scheme: string) => {
+    const formattedLabel = key
       .replace(/(_|-)/g, " ")
       .trim()
       .replace(/\w\S*/g, (str) => str.charAt(0).toUpperCase() + str.substr(1))
       .replace(/([a-z])([A-Z])/g, "$1 $2")
       .replace(/([A-Z])([A-Z][a-z])/g, "$1 $2");
+    const isOAuth = type === "oauth2";
+    const isApiKey = type === "apiKey";
+    const isHttpBasic = type === "http" && scheme === "basic";
+    const isHttpBearer = type === "http" && scheme === "bearer";
+    const isOpenId = type === "openIdConnect";
 
-    const isOAuth = formattedLabel.toLowerCase().includes("oauth2");
-    const isApiKey = formattedLabel.toLowerCase().includes("api");
+    if (isOAuth) return `OAuth 2.0: ${key}`;
+    if (isApiKey) return `API Key: ${key}`;
+    if (isHttpBasic) return "HTTP: Basic Auth";
+    if (isHttpBearer) return "HTTP: Bearer Auth";
+    if (isOpenId) return `OpenID Connect: ${key}`;
 
-    return isOAuth ? "OAuth 2.0" : isApiKey ? "API Key" : formattedLabel;
+    return formattedLabel;
   };
 
   return create("div", {
@@ -141,12 +172,17 @@ export function createAuthentication(securitySchemes: SecuritySchemeObject) {
         id: "authentication",
         style: { marginBottom: "1rem" },
       }),
-      create("Tabs", {
+      create("SchemaTabs", {
+        className: "openapi-tabs__security-schemes",
         children: Object.entries(securitySchemes).map(
-          ([schemeType, schemeObj]) =>
+          ([schemeKey, schemeObj]) =>
             create("TabItem", {
-              label: formatTabLabel(schemeType),
-              value: `${schemeType}`,
+              label: formatTabLabel(
+                schemeKey,
+                schemeObj.type,
+                schemeObj.scheme
+              ),
+              value: `${schemeKey}`,
               children: [
                 createDescription(schemeObj.description),
                 createAuthenticationTable(schemeObj),

packages/docusaurus-plugin-openapi-docs/src/markdown/index.ts

@@ -88,7 +88,7 @@ export function createInfoPageMD({
 }: InfoPageMetadata) {
   return render([
     `import ApiLogo from "@theme/ApiLogo";\n`,
-    `import Tabs from "@theme/Tabs";\n`,
+    `import SchemaTabs from "@theme/SchemaTabs";\n`,
     `import TabItem from "@theme/TabItem";\n`,
     `import Export from "@theme/ApiDemoPanel/Export";\n\n`,
 

packages/docusaurus-plugin-openapi-docs/src/openapi/openapi.ts

@@ -88,7 +88,7 @@ function createItems(
   const infoIdSpaces = openapiData.info.title.replace(" ", "-").toLowerCase();
   const infoId = kebabCase(infoIdSpaces);
 
-  if (openapiData.info.description) {
+  if (openapiData.info.description || openapiData.info.title) {
     // Only create an info page if we have a description.
     const infoDescription = openapiData.info?.description;
     let splitDescription: any;