feat: remove auth section

README.md

@@ -232,7 +232,6 @@ You can use all of the following options with the standalone version of the <red
 * `lazyRendering` - _Not implemented yet_ ~~if set, enables lazy rendering mode in ReDoc. This mode is useful for APIs with big number of operations (e.g. > 50). In this mode ReDoc shows initial screen ASAP and then renders the rest operations asynchronously while showing progress bar on the top. Check out the [demo](\\redocly.github.io/redoc) for the example.~~
 * `menuToggle` - if true clicking second time on expanded menu item will collapse it, default `true`.
 * `nativeScrollbars` - use native scrollbar for sidemenu instead of perfect-scroll (scrolling performance optimization for big specs).
-* `noAutoAuth` - do not inject Authentication section automatically.
 * `onlyRequiredInSamples` - shows only required fields in request samples.
 * `pathInMiddlePanel` - show path link and HTTP verb in the middle panel instead of the right one.
 * `requiredPropsFirst` - show required properties first ordered in the same order as in `required` array.

src/components/SecurityRequirement/OAuthFlow.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { OpenAPISecurityScheme } from '../../types';
+import { SecurityRow } from './styled.elements';
+import { SeeMore } from '../SeeMore/SeeMore';
+import { Markdown } from '../Markdown/Markdown';
+
+export interface OAuthFlowProps {
+  type: string;
+  flow: OpenAPISecurityScheme['flows'][keyof OpenAPISecurityScheme['flows']];
+  RequiredScopes?: JSX.Element;
+}
+
+export class OAuthFlow extends React.PureComponent<OAuthFlowProps> {
+  render() {
+    const { type, flow, RequiredScopes } = this.props;
+    const scopesNames = Object.keys(flow?.scopes || {});
+    return (
+      <>
+        <SecurityRow>
+          <b>Flow type: </b>
+          <code>{type} </code>
+        </SecurityRow>
+        {(type === 'implicit' || type === 'authorizationCode') && (
+          <SecurityRow>
+            <strong> Authorization URL: </strong>
+            <code>
+              <a target="_blank" rel="noopener noreferrer" href={(flow as any).authorizationUrl}>
+                {(flow as any).authorizationUrl}
+              </a>
+            </code>
+          </SecurityRow>
+        )}
+        {(type === 'password' || type === 'clientCredentials' || type === 'authorizationCode') && (
+          <SecurityRow>
+            <b> Token URL: </b>
+            <code>{(flow as any).tokenUrl}</code>
+          </SecurityRow>
+        )}
+        {flow!.refreshUrl && (
+          <SecurityRow>
+            <strong> Refresh URL: </strong>
+            {flow!.refreshUrl}
+          </SecurityRow>
+        )}
+        {!!scopesNames.length && (
+          <>
+            {RequiredScopes || null}
+            <SecurityRow>
+              <b> Scopes: </b>
+            </SecurityRow>
+            <SeeMore height="4em">
+              <ul>
+                {scopesNames.map(scope => (
+                  <li key={scope}>
+                    <code>{scope}</code> -{' '}
+                    <Markdown
+                      className={'redoc-markdown'}
+                      inline={true}
+                      source={flow!.scopes[scope] || ''}
+                    />
+                  </li>
+                ))}
+              </ul>
+            </SeeMore>
+          </>
+        )}
+      </>
+    );
+  }
+}

src/components/SecurityRequirement/RequiredScopesRow.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+export const RequiredScopesRow = ({ scopes }: { scopes: string[] }): JSX.Element | null => {
+  if (!scopes.length) return null;
+
+  return (
+    <div>
+      <b>Required scopes: </b>
+      {scopes.map((scope, idx) => {
+        return (
+          <React.Fragment key={idx}>
+            <code>{scope}</code>{' '}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+};

src/components/SecurityRequirement/SecurityDetails.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { SecuritySchemeModel } from '../../services';
+import { titleize } from '../../utils';
+import { StyledMarkdownBlock } from '../Markdown/styled.elements';
+import { SecurityRow } from './styled.elements';
+import { OAuthFlow } from './OAuthFlow';
+
+interface SecuritySchemaProps {
+  RequiredScopes?: JSX.Element;
+  scheme: SecuritySchemeModel;
+}
+export function SecurityDetails(props: SecuritySchemaProps) {
+  const { RequiredScopes, scheme } = props;
+
+  return (
+    <StyledMarkdownBlock>
+      {scheme.apiKey ? (
+        <>
+          <SecurityRow>
+            <b>{titleize(scheme.apiKey.in || '')} parameter name: </b>
+            <code>{scheme.apiKey.name}</code>
+          </SecurityRow>
+          {RequiredScopes}
+        </>
+      ) : scheme.http ? (
+        <>
+          <SecurityRow>
+            <b>HTTP Authorization Scheme: </b>
+            <code>{scheme.http.scheme}</code>
+          </SecurityRow>
+          <SecurityRow>
+            {scheme.http.scheme === 'bearer' && scheme.http.bearerFormat && (
+              <>
+                <b>Bearer format: </b>
+                <code>{scheme.http.bearerFormat}</code>
+              </>
+            )}
+          </SecurityRow>
+          {RequiredScopes}
+        </>
+      ) : scheme.openId ? (
+        <>
+          <SecurityRow>
+            <b>Connect URL: </b>
+            <code>
+              <a target="_blank" rel="noopener noreferrer" href={scheme.openId.connectUrl}>
+                {scheme.openId.connectUrl}
+              </a>
+            </code>
+          </SecurityRow>
+          {RequiredScopes}
+        </>
+      ) : scheme.flows ? (
+        Object.keys(scheme.flows).map(type => (
+          <OAuthFlow
+            key={type}
+            type={type}
+            RequiredScopes={RequiredScopes}
+            flow={scheme.flows[type]}
+          />
+        ))
+      ) : null}
+    </StyledMarkdownBlock>
+  );
+}

src/components/SecurityRequirement/SecurityHeader.tsx

@@ -0,0 +1,43 @@
+import { SecurityRequirementModel } from '../../services/models/SecurityRequirement';
+import {
+  ScopeName,
+  SecurityRequirementAndWrap,
+  SecurityRequirementOrWrap,
+} from './styled.elements';
+import * as React from 'react';
+import { AUTH_TYPES } from '../SecuritySchemes/SecuritySchemes';
+
+export interface SecurityRequirementProps {
+  security: SecurityRequirementModel;
+  showSecuritySchemeType?: boolean;
+  expanded: boolean;
+}
+
+export function SecurityHeader(props: SecurityRequirementProps) {
+  const { security, showSecuritySchemeType, expanded } = props;
+
+  const grouping = security.schemes.length > 1;
+  return (
+    <SecurityRequirementOrWrap expanded={expanded}>
+      {grouping && '('}
+      {security.schemes.map(scheme => {
+        return (
+          <SecurityRequirementAndWrap key={scheme.id}>
+            {showSecuritySchemeType && `${AUTH_TYPES[scheme.type] || scheme.type}: `}
+            <i>{scheme.displayName}</i>
+            {expanded && scheme.scopes.length
+              ? [
+                  ' (',
+                  scheme.scopes.map<React.ReactNode>(scope => (
+                    <ScopeName key={scope}>{scope}</ScopeName>
+                  )),
+                  ') ',
+                ]
+              : null}
+          </SecurityRequirementAndWrap>
+        );
+      })}
+      {grouping && ') '}
+    </SecurityRequirementOrWrap>
+  );
+}