fix: Optional authentication not rendered properly (Redocly#2117)

src/components/SecurityRequirement/SecurityHeader.tsx

@@ -17,6 +17,8 @@ export function SecurityHeader(props: SecurityRequirementProps) {
   const { security, showSecuritySchemeType, expanded } = props;
 
   const grouping = security.schemes.length > 1;
+  if (security.schemes.length === 0)
+    return <SecurityRequirementOrWrap expanded={expanded}>None</SecurityRequirementOrWrap>;
   return (
     <SecurityRequirementOrWrap expanded={expanded}>
       {grouping && '('}

src/components/__tests__/SecurityRequirement.test.tsx

@@ -9,6 +9,7 @@ import {
   SecuritySchemesModel,
 } from '../../services';
 import { StoreProvider } from '../StoreBuilder';
+import { SecurityRequirementModel } from '../../services/models/SecurityRequirement';
 import { SecurityRequirements } from '../SecurityRequirement/SecurityRequirement';
 import { withTheme } from '../testProviders';
 import { SecurityDefs } from '../SecuritySchemes/SecuritySchemes';
@@ -50,6 +51,20 @@ describe('SecurityRequirement', () => {
     expect(component.html()).toMatchSnapshot();
   });
 
+  it("should render 'None' when empty object in security open api", () => {
+    const options = new RedocNormalizedOptions({});
+    const parser = new OpenAPIParser(
+      { openapi: '3.0', info: { title: 'test', version: '0' }, paths: {} },
+      undefined,
+      options,
+    );
+    const securityRequirement = [new SecurityRequirementModel({}, parser)];
+    const component = mount(
+      withTheme(<SecurityRequirements securities={securityRequirement} key={1} />),
+    );
+    expect(component.find('span').at(0).text()).toEqual('None');
+  });
+
   it('should hide authDefinition', async () => {
     const store = await createStore(simpleSecurityFixture, undefined, {
       hideSecuritySection: true,