zudoku 0.1.1-dev.50 → 0.1.1-dev.52

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.1.1-dev.50",
+  "version": "0.1.1-dev.52",
   "type": "module",
   "files": [
     "dist",
@@ -21,6 +21,9 @@
     "./auth/clerk": {
       "import": "./lib/zudoku.auth-clerk.js"
     },
+    "./auth/auth0": {
+      "import": "./lib/zudoku.auth-auth0.js"
+    },
     "./plugins": {
       "import": "./lib/zudoku.plugins.js"
     },

package/src/lib/authentication/Callback.tsx

@@ -0,0 +1,31 @@
+import { useQuery } from "@tanstack/react-query";
+import { Navigate } from "react-router-dom";
+import { useDevPortal } from "../components/context/DevPortalProvider.js";
+import {
+  DevPortalContext,
+  SessionProfileState,
+} from "../core/DevPortalContext.js";
+
+export function Callback({
+  handleCallback,
+}: {
+  handleCallback: (
+    url: URL,
+    context: DevPortalContext,
+  ) => Promise<SessionProfileState>;
+}) {
+  const context = useDevPortal();
+  const callback = useQuery({
+    queryFn: () => handleCallback(new URL(window.location.href), context),
+    retry: 0,
+    queryKey: ["auth-callback"],
+  });
+
+  if (callback.isPending) {
+    return <div>Loading...</div>;
+  } else if (callback.error) {
+    return <div>Error: {JSON.stringify(callback.error)}</div>;
+  }
+
+  return <Navigate to="/" replace={true} />;
+}

package/src/lib/authentication/auth0.tsx

@@ -0,0 +1,18 @@
+import { Auth0AuthenticationConfig } from "../../config/config.js";
+import { NavigationPlugin } from "../core/plugins.js";
+import { AuthenticationProvider } from "./authentication.js";
+import openIdAuth from "./openid.js";
+
+const auth0Provider = ({
+  domain,
+  clientId,
+  audience,
+}: Auth0AuthenticationConfig): AuthenticationProvider & NavigationPlugin =>
+  openIdAuth({
+    type: "openid",
+    issuer: `https://${domain}`,
+    clientId: clientId,
+    audience: audience,
+  });
+
+export default auth0Provider;

package/src/lib/authentication/authentication.ts

@@ -1,18 +1,11 @@
-import { DevPortalContext } from "../core/DevPortalContext.js";
+import { DevPortalContext } from "../../lib/core/DevPortalContext.js";
+import { NavigationPlugin } from "../../lib/core/plugins.js";
 
-export interface AuthProvider {
-  initialize(context: DevPortalContext): Promise<unknown>;
+export interface AuthenticationProvider extends NavigationPlugin {
+  initialize?(context: DevPortalContext): Promise<unknown>;
   login(context: DevPortalContext): Promise<unknown>;
+  signRequest(request: Request, context: DevPortalContext): Promise<Request>;
+  /** @deprecated **/
   getToken?: (context: DevPortalContext) => Promise<string | undefined>;
-  handleAuthenticationResponse?: (
-    path: Path,
-    context: DevPortalContext,
-  ) => Promise<unknown>;
-  signOut(context: DevPortalContext): void;
+  logout(context: DevPortalContext): void;
 }
-
-export type Path = {
-  pathname: string;
-  search: string;
-  hash: string;
-};

package/src/lib/authentication/{clerk.ts → clerk.tsx}

@@ -1,10 +1,13 @@
 import type { Clerk } from "@clerk/clerk-js";
-import { type AuthProvider } from "./authentication.js";
+import { ClerkAuthenticationConfig } from "../../config/config.js";
+import { AuthenticationProvider } from "./authentication.js";
 
-const clerkAuth = ({ clerkPubKey }: { clerkPubKey: string }): AuthProvider => {
+const clerkAuth = ({
+  clerkPubKey,
+}: ClerkAuthenticationConfig): AuthenticationProvider => {
   let clerkApi: Clerk;
 
-  const clerkIsLoaded = (async () => {
+  const ensureLoaded = (async () => {
     const { Clerk } = await import("@clerk/clerk-js");
     clerkApi = new Clerk(clerkPubKey);
 
@@ -13,7 +16,7 @@ const clerkAuth = ({ clerkPubKey }: { clerkPubKey: string }): AuthProvider => {
 
   return {
     initialize: async (context) => {
-      await clerkIsLoaded;
+      await ensureLoaded;
 
       if (clerkApi.session) {
         await context.setUserProfile({
@@ -29,19 +32,24 @@ const clerkAuth = ({ clerkPubKey }: { clerkPubKey: string }): AuthProvider => {
         });
       }
     },
-
+    async signRequest(request: Request): Promise<Request> {
+      await ensureLoaded;
+      const token = await clerkApi.session?.getToken();
+      request.headers.set("Authorization", `Bearer ${token}`);
+      return request;
+    },
     getToken: async () => {
-      await clerkIsLoaded;
+      await ensureLoaded;
       const token = await clerkApi.session?.getToken();
       return token ?? undefined;
     },
-
-    signOut() {
-      clerkApi.signOut();
+    logout: async () => {
+      await clerkApi.signOut();
     },
     login: async () => {
       await clerkApi.redirectToSignIn();
     },
+    getRoutes: () => [],
   };
 };
 

package/src/lib/authentication/openid.tsx

@@ -0,0 +1,206 @@
+import logger from "loglevel";
+import * as oauth from "oauth4webapi";
+import { OpenIDAuthenticationConfig } from "../../config/config.js";
+import { DevPortalContext } from "../core/DevPortalContext.js";
+import { NavigationPlugin } from "../core/plugins.js";
+import { AuthenticationProvider } from "./authentication.js";
+import { Callback } from "./Callback.js";
+
+const CALLBACK_URL_PATH = "/oauth/callback";
+
+async function getAuthServerByIssuer(issuer: URL | string) {
+  const issuerUrl = typeof issuer === "string" ? new URL(issuer) : issuer;
+  const response = await oauth.discoveryRequest(issuerUrl);
+  const server = await oauth.processDiscoveryResponse(issuerUrl, response);
+  return server;
+}
+
+async function getAuthServer({
+  issuer,
+  authorizationEndpoint,
+  tokenEndpoint,
+}: Pick<
+  OpenIDAuthenticationConfig,
+  "issuer" | "authorizationEndpoint" | "tokenEndpoint"
+>) {
+  return await getAuthServerByIssuer(issuer);
+  // : ({
+  //     issuer: new URL(authorizationEndpoint!).origin,
+  //     authorization_endpoint: authorizationEndpoint,
+  //     token_endpoint: tokenEndpoint,
+  //     code_challenge_methods_supported: [],
+  //   } satisfies oauth.AuthorizationServer);
+}
+
+const openIdAuth = ({
+  issuer,
+  authorizationEndpoint,
+  tokenEndpoint,
+  clientId,
+}: OpenIDAuthenticationConfig): AuthenticationProvider & NavigationPlugin => {
+  const client: oauth.Client = {
+    client_id: clientId,
+    token_endpoint_auth_method: "none",
+  };
+
+  async function handleCallback(url: URL, context: DevPortalContext) {
+    const searchParams = url.searchParams;
+    const state = searchParams.get("state");
+
+    // one eternity later, the user lands back on the redirect_uri
+    // Authorization Code Grant Request & Response
+    const codeVerifier = await context.sessionStorage.get("codeVerifier");
+
+    if (!codeVerifier) {
+      return {
+        isLoggedIn: false,
+      };
+    }
+
+    const authServer = await getAuthServer({
+      issuer: issuer,
+      authorizationEndpoint: authorizationEndpoint,
+      tokenEndpoint: tokenEndpoint,
+    });
+
+    const params = oauth.validateAuthResponse(
+      authServer,
+      client,
+      searchParams,
+      state ?? undefined,
+    );
+    if (oauth.isOAuth2Error(params)) {
+      logger.error("Error Response", params);
+      throw new Error(); // Handle OAuth 2.0 redirect error
+    }
+
+    const redirectUrl = new URL(url);
+    redirectUrl.pathname = CALLBACK_URL_PATH;
+    redirectUrl.search = "";
+
+    const response = await oauth.authorizationCodeGrantRequest(
+      authServer,
+      client,
+      params,
+      redirectUrl.toString(),
+      codeVerifier,
+    );
+
+    // @todo do we need to do these
+    // const challenges = oauth.parseWwwAuthenticateChallenges(response);
+    // if (challenges) {
+    //   for (const challenge of challenges) {
+    //     console.error("WWW-Authenticate Challenge", challenge);
+    //   }
+    //   throw new Error(); // Handle WWW-Authenticate Challenges as needed
+    // }
+    const oauthResult = await oauth.processAuthorizationCodeOAuth2Response(
+      authServer,
+      client,
+      response,
+    );
+
+    if (oauth.isOAuth2Error(oauthResult)) {
+      logger.error("Error Response", oauthResult);
+      throw new Error(oauthResult.error);
+    }
+
+    const userInfoResponse = await oauth.userInfoRequest(
+      authServer,
+      client,
+      oauthResult.access_token,
+    );
+    const userInfo = await userInfoResponse.json();
+
+    const profile = {
+      sub: userInfo.sub,
+      email: userInfo.email,
+      name: userInfo.name,
+      email_verified: userInfo.email_verified ?? false,
+      picture: userInfo.picture,
+      isLoggedIn: true,
+    };
+    void context.setUserProfile(profile);
+
+    return profile;
+  }
+
+  return {
+    logout: async (context) => {
+      await context.setUserProfile({ isLoggedIn: false });
+    },
+    login: async (context) => {
+      const code_challenge_method = "S256";
+      const authorizationServer = await getAuthServer({
+        issuer: issuer,
+        authorizationEndpoint,
+        tokenEndpoint,
+      });
+
+      if (!authorizationServer.authorization_endpoint) {
+        throw new Error("No authorization endpoint");
+      }
+
+      /**
+       * The following MUST be generated for every redirect to the authorization_endpoint. You must store
+       * the codeVerifier and nonce in the end-user session such that it can be recovered as the user
+       * gets redirected from the authorization server back to your application.
+       */
+      const codeVerifier = oauth.generateRandomCodeVerifier();
+      const codeChallenge =
+        await oauth.calculatePKCECodeChallenge(codeVerifier);
+
+      await context.sessionStorage.set("codeVerifier", codeVerifier);
+
+      // redirect user to as.authorization_endpoint
+      const authorizationUrl = new URL(
+        authorizationServer.authorization_endpoint,
+      );
+
+      const redirectUrl = new URL(context.url);
+      redirectUrl.pathname = CALLBACK_URL_PATH;
+      redirectUrl.search = "";
+
+      authorizationUrl.searchParams.set("client_id", client.client_id);
+      authorizationUrl.searchParams.set("redirect_uri", redirectUrl.toString());
+      authorizationUrl.searchParams.set("response_type", "code");
+      authorizationUrl.searchParams.set("scope", "openid+profile+email");
+      authorizationUrl.searchParams.set("code_challenge", codeChallenge);
+      authorizationUrl.searchParams.set(
+        "code_challenge_method",
+        code_challenge_method,
+      );
+
+      /**
+       * We cannot be sure the AS supports PKCE so we're going to use state too. Use of PKCE is
+       * backwards compatible even if the AS doesn't support it which is why we're using it regardless.
+       */
+      if (
+        authorizationServer.code_challenge_methods_supported?.includes(
+          "S256",
+        ) !== true
+      ) {
+        const state = oauth.generateRandomState();
+        authorizationUrl.searchParams.set("state", state);
+      }
+
+      // now redirect the user to authorizationUrl.href
+      location.href = authorizationUrl.href;
+    },
+    signRequest(request: Request, context: DevPortalContext): Promise<Request> {
+      // check if token is expired
+
+      return Promise.resolve(request);
+    },
+    getRoutes: () => {
+      return [
+        {
+          path: CALLBACK_URL_PATH,
+          element: <Callback handleCallback={handleCallback} />,
+        },
+      ];
+    },
+  } satisfies AuthenticationProvider & NavigationPlugin;
+};
+
+export default openIdAuth;

package/src/lib/components/DevPortal.tsx

@@ -1,7 +1,7 @@
+/* eslint-disable react/destructuring-assignment */
 import { MDXProvider } from "@mdx-js/react";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { memo, Suspense, useEffect, useMemo } from "react";
-import { type AuthProvider } from "../authentication/authentication.js";
 import {
   DevPortalContext,
   queryClient,
@@ -9,6 +9,8 @@ import {
 } from "../core/DevPortalContext.js";
 import { HelmetProvider } from "../core/helmet.js";
 import { type DevPortalPlugin } from "../core/plugins.js";
+
+import { AuthenticationProvider } from "../authentication/authentication.js";
 import {
   MdxComponents,
   type MdxComponentsType,
@@ -39,7 +41,7 @@ export type DevPortalProps = {
     logo: string;
     favicon: string;
   }>;
-  authentication?: AuthProvider;
+  authentication?: AuthenticationProvider;
   navigation: NavigationItem[];
   plugins?: DevPortalPlugin[];
   mdxComponents?: MdxComponentsType;
@@ -78,7 +80,12 @@ const DevPortalInner = (props: DevPortalProps) => {
                       </div>
                     }
                   >
-                    <Router plugins={props.plugins} />
+                    <Router
+                      plugins={[
+                        ...(props.plugins ?? []),
+                        ...(props.authentication ? [props.authentication] : []),
+                      ]}
+                    />
                   </Suspense>
                 </ViewportAnchorProvider>
               </ComponentsProvider>

package/src/lib/components/Layout.tsx

@@ -12,11 +12,7 @@ import { Spinner } from "./Spinner.js";
 export const Layout = ({ children }: { children?: ReactNode }) => {
   const location = useLocation();
   const { setActiveAnchor } = useViewportAnchor();
-  const { meta, handleAuthenticationResponse } = useDevPortal();
-
-  useEffect(() => {
-    void handleAuthenticationResponse(location);
-  }, [handleAuthenticationResponse, location]);
+  const { meta } = useDevPortal();
 
   useScrollToAnchor();
   useScrollToTop();

package/src/lib/core/DevPortalContext.ts

@@ -1,7 +1,7 @@
 import { QueryClient } from "@tanstack/react-query";
 import { type ReactNode } from "react";
 import { create } from "zustand";
-import { type AuthProvider } from "../authentication/authentication.js";
+import { type AuthenticationProvider } from "../authentication/authentication.js";
 import {
   type DevPortalPath,
   type DevPortalProps,
@@ -62,6 +62,7 @@ export type SessionProfileState = {
   name?: string;
   email_verified?: string;
   picture?: string;
+  [key: string]: string | boolean | undefined;
 };
 
 export type RoutingState = {
@@ -85,9 +86,13 @@ export class DevPortalContext {
 
   public navigation: NavigationItem[];
   public meta: DevPortalProps["meta"];
-  public authentication?: AuthProvider;
+  public authentication?: AuthenticationProvider;
   public state: typeof useDevPortalState;
 
+  public get url(): URL {
+    return new URL(window.location.href);
+  }
+
   constructor(private config: DevPortalProps) {
     this.plugins = config.plugins ?? [];
     this.navigation = config.navigation;
@@ -101,7 +106,7 @@ export class DevPortalContext {
     this.plugins
       .filter(needsInitialization)
       .forEach((plugin) => plugin.initialize(this));
-    this.authentication?.initialize(this);
+    await this.authentication?.initialize?.(this);
   };
 
   setUserProfile = async (profile: Partial<SessionProfileState>) => {
@@ -109,7 +114,7 @@ export class DevPortalContext {
   };
 
   invalidateCache = async (key: DevPortalCacheKey[]) => {
-    queryClient.invalidateQueries({ queryKey: key });
+    await queryClient.invalidateQueries({ queryKey: key });
   };
 
   getApiIdentities = async () => {
@@ -135,15 +140,7 @@ export class DevPortalContext {
       throw new Error("No authentication configured");
     }
 
-    return this.authentication.signOut(this);
-  };
-
-  handleAuthenticationResponse = async (path: {
-    pathname: string;
-    search: string;
-    hash: string;
-  }) => {
-    this.config.authentication?.handleAuthenticationResponse?.(path, this);
+    return this.authentication.logout(this);
   };
 
   getNavigation = async (path: string) => {

package/src/lib/core/plugins.ts

@@ -4,15 +4,15 @@ import {
   type ApiIdentity,
   type NavigationCategory,
 } from "./DevPortalContext.js";
-import { type Combine } from "./types/combine.js";
 
 export type PluginNavigationCategory = {
   path: string;
 } & NavigationCategory;
 
-export type DevPortalPlugin = Combine<
-  [NavigationPlugin, ApiIdentityPlugin, InitializationPlugin]
->;
+export type DevPortalPlugin =
+  | NavigationPlugin
+  | ApiIdentityPlugin
+  | InitializationPlugin;
 
 export interface NavigationPlugin {
   getRoutes: () => RouteObject[];

package/src/lib/plugins/api-key/index.tsx

@@ -61,14 +61,16 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
         throw new Error("Not authenticated");
       }
 
-      await fetch(endpoint + `/v1/developer/api-keys`, {
+      const request = new Request(endpoint + `/v1/developer/api-keys`, {
         method: "POST",
         headers: {
-          Authorization: `Bearer ${accessToken}`,
           "Content-Type": "application/json",
         },
         body: JSON.stringify(apiKey),
       });
+
+      await context.authentication?.signRequest(request, context);
+      await fetch(request);
     },
     getKeys: async (context) => {
       const accessToken = await context.authentication?.getToken?.(context);
@@ -77,12 +79,16 @@ const createDefaultHandler = (endpoint: string): ApiKeyService => {
         return [];
       }
 
-      const keys = await fetch(endpoint + `/v1/developer/api-keys`, {
+      const request = new Request(endpoint + `/v1/developer/api-keys`, {
         headers: {
           Authorization: `Bearer ${accessToken}`,
         },
       });
 
+      await context.authentication?.signRequest(request, context);
+
+      const keys = await fetch(request);
+
       return await keys.json();
     },
   };

package/src/lib/plugins/openapi/MakeRequest.tsx

@@ -29,10 +29,15 @@ export const MakeRequest = ({
     }));
   const queryParams = operation.parameters
     ?.filter((p) => p.in === "query")
-    .map((p) => ({
-      name: p.name,
-      value: "",
-    }));
+    .sort((a, b) => (a.required && !b.required ? -1 : 1))
+    .map((p) => {
+      return {
+        name: p.name,
+        value: "",
+        active: p.required ?? false,
+        isRequired: p.required ?? false,
+      };
+    });
   const pathParams = operation.parameters
     ?.filter((p) => p.in === "path")
     .map((p) => ({

package/src/lib/plugins/openapi/playground/Playground.tsx

@@ -65,7 +65,8 @@ export type Header = {
 export type QueryParam = {
   name: string;
   value: string;
-  active?: boolean;
+  active: boolean;
+  isRequired: boolean;
 };
 export type PathParam = {
   name: string;
@@ -200,9 +201,7 @@ const Playground = ({
         </VisuallyHidden>
         <FormProvider {...{ register, control, handleSubmit, watch, ...form }}>
           <form
-            onSubmit={handleSubmit((data) => {
-              queryMutation.mutateAsync(data);
-            })}
+            onSubmit={handleSubmit((data) => queryMutation.mutateAsync(data))}
           >
             <div className="grid grid-cols-2 text-sm h-full">
               <div className="flex flex-col gap-4 p-8 bg-muted/50 after:bg-muted-foreground/20 relative after:absolute after:w-px after:inset-0 after:left-auto">

package/src/lib/plugins/openapi/playground/QueryParams.tsx

@@ -1,51 +1,13 @@
-import logger from "loglevel";
 import { XIcon } from "lucide-react";
-import { useEffect } from "react";
 import {
   Control,
   Controller,
   useFieldArray,
   useFormContext,
-  useWatch,
 } from "react-hook-form";
 import { InlineInput } from "./InlineInput.js";
 import { PlaygroundForm } from "./Playground.js";
 
-const QueryParamActive = ({
-  i,
-  control,
-}: {
-  i: number;
-  control: Control<PlaygroundForm>;
-}) => {
-  const value = useWatch({ control, name: `queryParams.${i}.value` });
-  const active = useWatch({ control, name: `queryParams.${i}.active` });
-  const form = useFormContext<PlaygroundForm>();
-
-  useEffect(() => {
-    if (value) {
-      logger.log(`queryParams.${i}.active`, active);
-      form.setValue(`queryParams.${i}.active`, true);
-    }
-  }, [value]);
-
-  return (
-    <Controller
-      name={`queryParams.${i}.active`}
-      render={({ field }) => {
-        return (
-          <input
-            type="checkbox"
-            id={`queryParams.${i}.active`}
-            {...field}
-            checked={field.value}
-          />
-        );
-      }}
-    />
-  );
-};
-
 export const QueryParams = ({
   control,
 }: {
@@ -55,13 +17,29 @@ export const QueryParams = ({
     control,
     name: "queryParams",
   });
+  const form = useFormContext<PlaygroundForm>();
+
+  const requiredFields = form
+    .getValues(`queryParams`)
+    .map((param) => param.isRequired);
 
   return fields.map((field, i) => (
     <div
       key={field.id}
       className="px-2 grid-cols-subgrid col-span-full grid items-center gap-x-2 has-[:focus]:bg-muted hover:bg-accent rounded overflow-hidden group"
     >
-      <QueryParamActive i={i} control={control} />
+      <Controller
+        control={control}
+        name={`queryParams.${i}.active`}
+        render={({ field }) => (
+          <input
+            type="checkbox"
+            id={`queryParams.${i}.active`}
+            checked={field.value}
+            onChange={field.onChange}
+          />
+        )}
+      />
 
       <Controller
         control={control}
@@ -71,8 +49,10 @@ export const QueryParams = ({
               <label
                 className="flex items-center"
                 htmlFor={`queryParams.${i}.active`}
+                title={requiredFields[i] ? "Required field" : undefined}
               >
                 {field.value}
+                {requiredFields[i] && <sup className="text-destructive">*</sup>}
               </label>
             </InlineInput>
           );

package/dist/lib/core/types/combine.d.ts

@@ -1,4 +0,0 @@
-type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
-type AnyCombination<T, U = T> = T extends any ? U extends any ? T | (T & U) : never : never;
-export type Combine<T extends any[]> = UnionToIntersection<T[number]> | AnyCombination<T[number]>;
-export {};

package/dist/lib/core/types/combine.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=combine.js.map

package/dist/lib/core/types/combine.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"combine.js","sourceRoot":"","sources":["../../../../src/lib/core/types/combine.ts"],"names":[],"mappings":""}