fix: auth rendering on playground (#1813)

fern-api · Nov 14, 2024 · 6187870 · 6187870
1 parent 903a6cf
commit 6187870
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 18 deletions.
diff --git a/packages/ui/app/src/playground/auth/PlaygroundOAuthForm.tsx b/packages/ui/app/src/playground/auth/PlaygroundOAuthForm.tsx
@@ -17,15 +17,15 @@ import { PlaygroundBearerAuthForm } from "./PlaygroundBearerAuthForm";
 
 function FoundOAuthReferencedEndpointForm({
     context,
-    oAuthClientCredentialsReferencedEndpoint,
+    referencedEndpoint,
     closeContainer,
     disabled,
 }: {
     /**
      * this must be the OAuth endpoint.
      */
     context: EndpointContext;
-    oAuthClientCredentialsReferencedEndpoint: APIV1Read.OAuthClientCredentialsReferencedEndpoint;
+    referencedEndpoint: APIV1Read.OAuthClientCredentials.ReferencedEndpoint;
     closeContainer: () => void;
     disabled?: boolean;
 }): ReactElement {
@@ -45,7 +45,7 @@ function FoundOAuthReferencedEndpointForm({
             formState,
             endpoint: context.endpoint,
             proxyEnvironment,
-            oAuthClientCredentialsReferencedEndpoint,
+            referencedEndpoint,
             baseUrl,
             setValue,
             closeContainer,
@@ -150,12 +150,10 @@ function FoundOAuthReferencedEndpointForm({
 
 function OAuthReferencedEndpointForm({
     referencedEndpoint,
-    oAuthClientCredentialsReferencedEndpoint,
     closeContainer,
     disabled,
 }: {
     referencedEndpoint: APIV1Read.OAuthClientCredentials.ReferencedEndpoint;
-    oAuthClientCredentialsReferencedEndpoint: APIV1Read.OAuthClientCredentialsReferencedEndpoint;
     closeContainer: () => void;
     disabled?: boolean;
 }) {
@@ -172,7 +170,7 @@ function OAuthReferencedEndpointForm({
     return (
         <FoundOAuthReferencedEndpointForm
             context={context}
-            oAuthClientCredentialsReferencedEndpoint={oAuthClientCredentialsReferencedEndpoint}
+            referencedEndpoint={referencedEndpoint}
             closeContainer={closeContainer}
             disabled={disabled}
         />
@@ -194,7 +192,6 @@ export function PlaygroundOAuthForm({
                 referencedEndpoint: (referencedEndpoint) => (
                     <OAuthReferencedEndpointForm
                         referencedEndpoint={referencedEndpoint}
-                        oAuthClientCredentialsReferencedEndpoint={referencedEndpoint}
                         closeContainer={closeContainer}
                         disabled={disabled}
                     />

diff --git a/packages/ui/app/src/playground/code-snippets/resolver.ts b/packages/ui/app/src/playground/code-snippets/resolver.ts
@@ -6,6 +6,7 @@ import { UnreachableCaseError } from "ts-essentials";
 import { provideRegistryService } from "../../services/registry";
 import { PlaygroundAuthState, PlaygroundEndpointRequestFormState } from "../types";
 import { buildAuthHeaders, convertToCustomSnippetPayload } from "../utils";
+import { shouldRenderAuth } from "../utils/should-render-auth";
 import { CurlSnippetBuilder } from "./builders/curl";
 import { PythonRequestSnippetBuilder } from "./builders/python";
 import { TypescriptFetchSnippetBuilder } from "./builders/typescript";
@@ -91,7 +92,9 @@ export class PlaygroundCodeSnippetResolver {
         setOAuthValue: (value: (prev: any) => any) => void,
     ) {
         const authHeaders = buildAuthHeaders(
-            this.context.auth,
+            this.context.auth != null && shouldRenderAuth(this.context.endpoint, this.context.auth)
+                ? this.context.auth
+                : undefined,
             authState,
             { redacted: isAuthHeadersRedacted },
             {

diff --git a/packages/ui/app/src/playground/endpoint/PlaygroundEndpointContent.tsx b/packages/ui/app/src/playground/endpoint/PlaygroundEndpointContent.tsx
@@ -4,6 +4,7 @@ import { Dispatch, ReactElement, SetStateAction, useDeferredValue } from "react"
 import { PlaygroundAuthorizationFormCard } from "../auth";
 import { PlaygroundEndpointRequestFormState } from "../types";
 import { PlaygroundResponse } from "../types/playgroundResponse";
+import { shouldRenderAuth } from "../utils/should-render-auth";
 import { PlaygroundEndpointContentLayout } from "./PlaygroundEndpointContentLayout";
 import { PlaygroundEndpointForm } from "./PlaygroundEndpointForm";
 import { PlaygroundEndpointFormButtons } from "./PlaygroundEndpointFormButtons";
@@ -33,7 +34,9 @@ export function PlaygroundEndpointContent({
 
     const form = (
         <div className="mx-auto w-full max-w-5xl space-y-6 pt-6 max-sm:pt-0 sm:pb-20">
-            {context.auth != null && <PlaygroundAuthorizationFormCard auth={context.auth} disabled={false} />}
+            {context.auth != null && shouldRenderAuth(context.endpoint, context.auth) && (
+                <PlaygroundAuthorizationFormCard auth={context.auth} disabled={false} />
+            )}
 
             <div className="col-span-2 space-y-8">
                 <PlaygroundEndpointForm context={context} formState={formState} setFormState={setFormState} />

diff --git a/packages/ui/app/src/playground/utils/auth-headers.ts b/packages/ui/app/src/playground/utils/auth-headers.ts
@@ -15,7 +15,7 @@ export function buildAuthHeaders(
     { redacted }: { redacted: boolean },
     oAuthClientCredentialReferencedEndpointLoginFlowProps?: Omit<
         OAuthClientCredentialReferencedEndpointLoginFlowProps,
-        "oAuthClientCredentialsReferencedEndpoint"
+        "referencedEndpoint"
     >,
 ): Record<string, string> {
     const headers: Record<string, string> = {};
@@ -48,7 +48,7 @@ export function buildAuthHeaders(
                 visitDiscriminatedUnion(oAuth.value)._visit({
                     clientCredentials: (oAuthClientCredentials) => {
                         visitDiscriminatedUnion(oAuthClientCredentials.value)._visit({
-                            referencedEndpoint: (oAuthClientCredentialsReferencedEndpoint) => {
+                            referencedEndpoint: (referencedEndpoint) => {
                                 const token =
                                     authState.oauth?.selectedInputMethod === "credentials"
                                         ? authState.oauth?.accessToken
@@ -69,7 +69,7 @@ export function buildAuthHeaders(
                                                 formState,
                                                 endpoint,
                                                 proxyEnvironment,
-                                                oAuthClientCredentialsReferencedEndpoint,
+                                                referencedEndpoint,
                                                 baseUrl,
                                                 setValue: setOAuthValue,
                                             }).catch(noop);

diff --git a/packages/ui/app/src/playground/utils/oauth.ts b/packages/ui/app/src/playground/utils/oauth.ts
@@ -11,7 +11,7 @@ export interface OAuthClientCredentialReferencedEndpointLoginFlowProps {
     formState: PlaygroundEndpointRequestFormState;
     endpoint: EndpointDefinition;
     proxyEnvironment: string;
-    oAuthClientCredentialsReferencedEndpoint: APIV1Read.OAuthClientCredentialsReferencedEndpoint;
+    referencedEndpoint: APIV1Read.OAuthClientCredentialsReferencedEndpoint;
     baseUrl: string | undefined;
     setValue: (value: (prev: any) => any) => void;
     closeContainer?: () => void;
@@ -22,7 +22,7 @@ export const oAuthClientCredentialReferencedEndpointLoginFlow = async ({
     formState,
     endpoint,
     proxyEnvironment,
-    oAuthClientCredentialsReferencedEndpoint,
+    referencedEndpoint,
     baseUrl,
     setValue,
     closeContainer,
@@ -57,10 +57,7 @@ export const oAuthClientCredentialReferencedEndpointLoginFlow = async ({
         json: async (jsonRes) => {
             if (jsonRes.response.ok) {
                 try {
-                    const accessToken = jsonpath.query(
-                        jsonRes.response,
-                        oAuthClientCredentialsReferencedEndpoint.accessTokenLocator,
-                    )?.[0];
+                    const accessToken = jsonpath.query(jsonRes.response, referencedEndpoint.accessTokenLocator)?.[0];
                     setValue((prev) => ({
                         ...prev,
                         selectedInputMethod: "credentials",

diff --git a/packages/ui/app/src/playground/utils/should-render-auth.ts b/packages/ui/app/src/playground/utils/should-render-auth.ts
@@ -0,0 +1,14 @@
+import { ApiDefinition } from "@fern-api/fdr-sdk";
+
+export function shouldRenderAuth(endpoint: ApiDefinition.EndpointDefinition, auth: ApiDefinition.AuthScheme): boolean {
+    if (
+        auth.type === "oAuth" &&
+        auth.value.type === "clientCredentials" &&
+        auth.value.value.type === "referencedEndpoint"
+    ) {
+        if (auth.value.value.endpointId === endpoint.id) {
+            return false;
+        }
+    }
+    return true;
+}