Incorrect rendering of security schemas: by reference and inline

[RobinTail]

Describe the bug

Security schemas are not displayed correctly: wrong references, inline ones are not displayed at all.

For some reason the Studio does not follow the references to security schemas correctly — it seems to pick the first one inside components / securitySchemes regardless its id. That leads to wrong schema rendering.
Moreover, even when using no references and writing the security schemas inline — none of them are displayed.

How to Reproduce

Consider an application having server-level and operation-level security schemas.

Case 1

asyncapi: 3.0.0
info:
  title: Testing security
  version: 3.4.5
id: "urn:example:com:"
defaultContentType: text/plain
servers:
  test:
    host: example.com
    pathname: /
    protocol: https
    security:
      - $ref: "#/components/securitySchemes/serverSecurity0"
channels:
  Root:
    address: /
    title: Namespace /
    messages:
      rootIncomingTest:
        name: test
        title: test
        payload:
          type: array
          additionalItems: false
components:
  securitySchemes:
    serverSecurity0:
      type: httpApiKey
      description: Sample security schema
      in: header
      name: X-Api-Key
    rootSecurity0:
      type: userPassword
      description: Namespace level security sample
operations:
  RootRecvOperationTest:
    action: receive
    channel:
      $ref: "#/channels/Root"
    messages:
      - $ref: "#/channels/Root/messages/rootIncomingTest"
    title: test
    summary: Incoming event test
    description: The message consumed by the application within the / namespace
    security:
      - $ref: "#/components/securitySchemes/rootSecurity0"

Studio displays the server-level security schema twice and does not display the operation specific security schema despite the reference

Case 2: another order in components

asyncapi: 3.0.0
info:
  title: Testing security
  version: 3.4.5
id: "urn:example:com:"
defaultContentType: text/plain
servers:
  test:
    host: example.com
    pathname: /
    protocol: https
    security:
      - $ref: "#/components/securitySchemes/serverSecurity0"
channels:
  Root:
    address: /
    title: Namespace /
    messages:
      rootIncomingTest:
        name: test
        title: test
        payload:
          type: array
          additionalItems: false
components:
  securitySchemes:
    rootSecurity0:
      type: userPassword
      description: Namespace level security sample
    serverSecurity0:
      type: httpApiKey
      description: Sample security schema
      in: header
      name: X-Api-Key
operations:
  RootRecvOperationTest:
    action: receive
    channel:
      $ref: "#/channels/Root"
    messages:
      - $ref: "#/channels/Root/messages/rootIncomingTest"
    title: test
    summary: Incoming event test
    description: The message consumed by the application within the / namespace
    security:
      - $ref: "#/components/securitySchemes/rootSecurity0"

Case 3: inline schemas (no references)

asyncapi: 3.0.0
info:
  title: Testing security
  version: 3.4.5
id: "urn:example:com:"
defaultContentType: text/plain
servers:
  test:
    host: example.com
    pathname: /
    protocol: https
    security:
      - type: httpApiKey
        description: Sample security schema
        in: header
        name: X-Api-Key
channels:
  Root:
    address: /
    title: Namespace /
    messages:
      rootIncomingTest:
        name: test
        title: test
        payload:
          type: array
          additionalItems: false
operations:
  RootRecvOperationTest:
    action: receive
    channel:
      $ref: "#/channels/Root"
    messages:
      - $ref: "#/channels/Root/messages/rootIncomingTest"
    title: test
    summary: Incoming event test
    description: The message consumed by the application within the / namespace
    security:
      - type: userPassword
        description: Namespace level security sample  

Expected behavior

• References should work precisely,
• Inline security schemas (without references) should also work.

[github-actions]

Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.
Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[Amzani]

Thanks @RobinTail for reporting this issue, this is related to our asyncapi-react dependency that we use to render documentation, I have reported the issue here: asyncapi/asyncapi-react#993

[RobinTail]

Thank you for addressing this issue, @Amzani .
I hope you'll find a way to fix it soon.

[RobinTail]

The issue can now be resolved by upgrading the dependency
asyncapi/asyncapi-react#993 (comment)