zudoku 0.0.0-f0602bf → 0.0.0-f0b4321

package/src/app/main.tsx

@@ -6,11 +6,11 @@ import {
 } from "virtual:zudoku-api-plugins";
 import { configuredAuthProvider } from "virtual:zudoku-auth";
 import { configuredCustomPagesPlugin } from "virtual:zudoku-custom-pages-plugin";
-import { configuredDocsPlugins } from "virtual:zudoku-docs-plugins";
+import { configuredDocsPlugin } from "virtual:zudoku-docs-plugin";
+import { configuredNavigation } from "virtual:zudoku-navigation";
 import { configuredRedirectPlugin } from "virtual:zudoku-redirect-plugin";
 import { configuredSearchPlugin } from "virtual:zudoku-search-plugin";
 import { registerShiki } from "virtual:zudoku-shiki-register";
-import { configuredSidebar } from "virtual:zudoku-sidebar";
 import "virtual:zudoku-theme.css";
 import {
   BuildCheck,
@@ -25,6 +25,7 @@ import type { ZudokuContextOptions } from "../lib/core/ZudokuContext.js";
 import { isNavigationPlugin } from "../lib/core/plugins.js";
 import { highlighter } from "../lib/shiki.js";
 import { ZuploEnv } from "./env.js";
+import "./main.css";
 
 await registerShiki(highlighter);
 
@@ -35,12 +36,12 @@ export const convertZudokuConfigToOptions = (
     basePath: config.basePath,
     canonicalUrlOrigin: config.canonicalUrlOrigin,
     protectedRoutes: config.protectedRoutes,
-    page: {
-      ...config.page,
+    site: {
+      ...config.site,
       showPoweredBy:
         ZuploEnv.buildConfig?.entitlements.devPortalZuploBranding ??
-        config.page?.showPoweredBy,
-      logo: config.page?.logo,
+        config.site?.showPoweredBy,
+      logo: config.site?.logo,
     },
     slots: config.slots,
     metadata: {
@@ -48,12 +49,11 @@ export const convertZudokuConfigToOptions = (
       title: "%s - Zudoku",
       ...config.metadata,
     },
-    sidebars: configuredSidebar,
-    topNavigation: config.topNavigation,
+    navigation: configuredNavigation,
     mdx: config.mdx,
     plugins: [
       ...(configuredAuthProvider ? [configuredAuthProvider] : []),
-      ...configuredDocsPlugins,
+      ...(configuredDocsPlugin ? [configuredDocsPlugin] : []),
       ...configuredApiPlugins,
       ...(configuredSearchPlugin ? [configuredSearchPlugin] : []),
       ...(configuredRedirectPlugin ? [configuredRedirectPlugin] : []),
@@ -71,7 +71,7 @@ export const convertZudokuConfigToOptions = (
 
 export const getRoutesByOptions = (
   options: ZudokuContextOptions,
-  enableStatusPages = false,
+  enableStatusPages = true,
 ) => {
   const allPlugins = [
     ...(options.plugins ?? []),
@@ -82,22 +82,15 @@ export const getRoutesByOptions = (
     .flatMap((plugin) => (isNavigationPlugin(plugin) ? plugin.getRoutes() : []))
     .concat(
       enableStatusPages
-        ? [400, 403, 404, 405, 414, 416, 500, 501, 502, 503, 504].map(
-            (statusCode) => ({
-              path: `/.static/${statusCode}`,
-              element: <StatusPage statusCode={statusCode} />,
-            }),
-          )
+        ? [400, 404, 500].map((statusCode) => ({
+            path: `/${statusCode}`,
+            element: <StatusPage statusCode={statusCode} />,
+          }))
         : [],
     )
-    .concat([
-      {
-        path: "*",
-        loader: () => {
-          throw new Response("Not Found", { status: 404 });
-        },
-      },
-    ]);
+    .concat([{ path: "*", element: <StatusPage statusCode={404} /> }]);
+
+  // @TODO Detect conflicts in routes and log warning
 
   return routes;
 };
@@ -123,6 +116,7 @@ export const getRoutesByConfig = (config: ZudokuConfig): RouteObject[] => {
           <Layout />
         </Zudoku>
       ),
+      hydrateFallbackElement: <div>Loading...</div>,
       children: [
         {
           element: <RouteGuard />,

package/src/app/standalone.tsx

@@ -13,14 +13,14 @@ if (!root) {
 }
 
 const apiUrl = root.getAttribute("data-api-url");
-const pageTitle = document.getElementsByTagName("title")[0]!.innerText;
+const title = document.getElementsByTagName("title")[0]!.innerText;
 const logoUrl = root.getAttribute("data-logo-url");
 
 // IMPORTANT: This component must not contain tailwind classes
 // This directory is not processed by the tailwind plugin
 
 const config = {
-  page: {
+  site: {
     logo: logoUrl
       ? {
           src: {
@@ -29,12 +29,13 @@ const config = {
           },
         }
       : undefined,
-    pageTitle,
+    title,
   },
-  topNavigation: [
+  navigation: [
     {
-      id: "/",
+      type: "link",
       label: "API Reference",
+      to: "/",
     },
   ],
   plugins: [
@@ -42,7 +43,7 @@ const config = {
     openApiPlugin({
       type: "url",
       input: apiUrl!,
-      navigationId: "/",
+      path: "/",
     }),
   ],
 } satisfies ZudokuConfig;

package/src/lib/auth/issuer.test.ts

@@ -0,0 +1,120 @@
+import { describe, expect, it } from "vitest";
+import type { ZudokuConfig } from "../../config/validators/validate.js";
+import { getIssuer } from "./issuer.js";
+
+describe("getIssuer", () => {
+  it("should return clerk frontend API for clerk authentication", async () => {
+    // Using a valid base64 encoded string: "example.example$test" -> "ZXhhbXBsZS5leGFtcGxlJHRlc3Q="
+    const config: ZudokuConfig = {
+      authentication: {
+        type: "clerk",
+        clerkPubKey:
+          "pk_test_dG9sZXJhbnQtaG9ybmV0LTQ2LmNsZXJrLmFjY291bnRzLmRldiQ",
+      },
+    };
+
+    const result = await getIssuer(config);
+    expect(result).toBe("https://tolerant-hornet-46.clerk.accounts.dev");
+  });
+
+  it("should throw error for invalid clerk public key format", async () => {
+    const config: ZudokuConfig = {
+      authentication: {
+        type: "clerk",
+        clerkPubKey: "pk_test_invalid",
+      },
+    };
+
+    await expect(getIssuer(config)).rejects.toThrow(
+      "Clerk public key is invalid",
+    );
+  });
+
+  it("should throw error for clerk key with invalid base64", async () => {
+    const config: ZudokuConfig = {
+      authentication: {
+        type: "clerk",
+        clerkPubKey: "pk_test_invalid_base64",
+      },
+    };
+
+    await expect(getIssuer(config)).rejects.toThrow(
+      "Clerk public key is invalid",
+    );
+  });
+
+  it("should return auth0 issuer URL for auth0 authentication", async () => {
+    const config: ZudokuConfig = {
+      authentication: {
+        type: "auth0",
+        domain: "example.auth0.com",
+        clientId: "test-client-id",
+      },
+    };
+
+    const result = await getIssuer(config);
+    expect(result).toBe("https://example.auth0.com/");
+  });
+
+  it("should return openid issuer for openid authentication", async () => {
+    const config: ZudokuConfig = {
+      authentication: {
+        type: "openid",
+        issuer: "https://example.com/auth",
+        clientId: "test-client-id",
+      },
+    };
+
+    const result = await getIssuer(config);
+    expect(result).toBe("https://example.com/auth");
+  });
+
+  it("should return azureb2c issuer for azureb2c authentication", async () => {
+    const config: ZudokuConfig = {
+      authentication: {
+        type: "azureb2c",
+        tenantName: "example",
+        policyName: "B2C_1_SignUpSignIn",
+        issuer: "https://example.b2clogin.com/example.onmicrosoft.com/v2.0/",
+        clientId: "test-client-id",
+      },
+    };
+    const result = await getIssuer(config);
+    expect(result).toBe(
+      "https://example.b2clogin.com/example.onmicrosoft.com/v2.0/",
+    );
+  });
+
+  it("should return supabase URL for supabase authentication", async () => {
+    const config: ZudokuConfig = {
+      authentication: {
+        type: "supabase",
+        supabaseUrl: "https://project.supabase.co",
+        supabaseKey: "test-anon-key",
+        provider: "github",
+      },
+    };
+
+    const result = await getIssuer(config);
+    expect(result).toBe("https://project.supabase.co");
+  });
+
+  it("should return undefined for no authentication", async () => {
+    const config: ZudokuConfig = {};
+
+    const result = await getIssuer(config);
+    expect(result).toBeUndefined();
+  });
+
+  it("should throw error for unsupported authentication type", async () => {
+    const config = {
+      authentication: {
+        type: "unsupported" as any,
+      },
+    } as ZudokuConfig;
+
+    await expect(getIssuer(config)).rejects.toThrow(
+      "Unsupported authentication type",
+    );
+  });
+});

package/src/lib/auth/issuer.ts

@@ -0,0 +1,41 @@
+import type { ZudokuConfig } from "../../config/validators/validate.js";
+import invariant from "../util/invariant.js";
+
+export const getIssuer = async (config: ZudokuConfig) => {
+  switch (config.authentication?.type) {
+    case "clerk": {
+      const frontendApiEncoded = config.authentication.clerkPubKey
+        .split("_")
+        .at(-1);
+      invariant(frontendApiEncoded, "Clerk public key is invalid");
+      const frontendApiParts = atob(frontendApiEncoded).split("$");
+
+      if (frontendApiParts.length !== 2) {
+        throw new Error("Clerk public key is invalid");
+      }
+
+      const frontendApi = frontendApiParts.at(0);
+      invariant(frontendApi, "Clerk public key is invalid");
+
+      return `https://${frontendApi}`;
+    }
+    case "auth0": {
+      return `https://${config.authentication.domain}/`;
+    }
+    case "openid": {
+      return config.authentication.issuer;
+    }
+    case "supabase": {
+      return config.authentication.supabaseUrl;
+    }
+    case "azureb2c": {
+      return config.authentication.issuer;
+    }
+    case undefined: {
+      return undefined;
+    }
+    default: {
+      throw new Error(`Unsupported authentication type`);
+    }
+  }
+};

package/src/lib/authentication/AuthenticationPlugin.tsx

@@ -28,20 +28,6 @@ export class CoreAuthenticationPlugin implements PluginInterface {
     ];
   }
 
-  async getSidebar(path: string) {
-    if (path.startsWith("/settings")) {
-      return [
-        {
-          type: "link" as const,
-          label: "Logout",
-          href: "/signout",
-        },
-      ];
-    }
-
-    return [];
-  }
-
   getProfileMenuItems() {
     return [
       {

package/src/lib/authentication/authentication.ts

@@ -1,6 +1,6 @@
 export interface AuthenticationPlugin {
-  signUp(options?: { redirectTo?: string }): Promise<void>;
-  signIn(options?: { redirectTo?: string }): Promise<void>;
+  signUp(options?: { redirectTo?: string; replace?: boolean }): Promise<void>;
+  signIn(options?: { redirectTo?: string; replace?: boolean }): Promise<void>;
   signOut(): Promise<void>;
   // @deprecated use signRequest instead
   getAccessToken(): Promise<string>;

package/src/lib/authentication/components/CallbackHandler.tsx

@@ -34,5 +34,5 @@ export function CallbackHandler({
     },
   });
 
-  return <Navigate to={executeCallback.data} />;
+  return <Navigate to={executeCallback.data} replace />;
 }

package/src/lib/authentication/components/SignIn.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
-import { Link, useSearchParams } from "react-router";
-import { Button } from "zudoku/ui/Button.js";
+import { useSearchParams } from "react-router";
+import { Spinner } from "zudoku/components";
 import {
   Card,
   CardContent,
@@ -16,6 +16,7 @@ export const SignIn = () => {
   useEffect(() => {
     void context.authentication?.signIn({
       redirectTo: search.get("redirect") ?? undefined,
+      replace: true,
     });
   }, [context.authentication, search]);
 
@@ -30,16 +31,8 @@ export const SignIn = () => {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <div className="flex flex-col gap-2 justify-center">
-            <Button
-              onClick={() => context.authentication?.signIn()}
-              variant="default"
-            >
-              Login
-            </Button>
-            <Button variant="link" className="text-muted-foreground" asChild>
-              <Link to="/">Go home</Link>
-            </Button>
+          <div className="flex items-center text-sm font-medium gap-2">
+            <Spinner /> Redirecting...
           </div>
         </CardContent>
       </Card>

package/src/lib/authentication/providers/auth0.tsx

@@ -14,7 +14,7 @@ class Auth0AuthenticationProvider
     super({
       ...config,
       type: "openid",
-      issuer: `https://${config.domain}`,
+      issuer: `https://${config.domain}/`,
       clientId: config.clientId,
       audience: config.audience,
       scopes: config.scopes,

package/src/lib/authentication/providers/azureb2c.tsx

@@ -0,0 +1,196 @@
+import type { AuthenticationResult, EventMessage } from "@azure/msal-browser";
+import { EventType, PublicClientApplication } from "@azure/msal-browser";
+import { type AzureB2CAuthenticationConfig } from "../../../config/config.js";
+import { ClientOnly } from "../../components/ClientOnly.js";
+import { joinUrl } from "../../util/joinUrl.js";
+import {
+  type AuthenticationPlugin,
+  type AuthenticationProviderInitializer,
+} from "../authentication.js";
+import { CallbackHandler } from "../components/CallbackHandler.js";
+import { AuthorizationError } from "../errors.js";
+import { useAuthState } from "../state.js";
+
+import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
+
+const AZUREB2C_CALLBACK_PATH = "/oauth/callback";
+
+export class AzureB2CAuthPlugin
+  extends CoreAuthenticationPlugin
+  implements AuthenticationPlugin
+{
+  private msalInstance: PublicClientApplication;
+  private readonly scopes: string[];
+  private readonly redirectToAfterSignUp?: string;
+  private readonly redirectToAfterSignIn?: string;
+  private readonly redirectToAfterSignOut: string;
+
+  constructor({
+    clientId,
+    tenantName,
+    policyName,
+    scopes,
+    redirectToAfterSignUp,
+    redirectToAfterSignIn,
+    redirectToAfterSignOut = "/",
+    basePath = "",
+  }: AzureB2CAuthenticationConfig) {
+    super();
+    this.scopes = scopes ?? ["openid", "profile", "email"];
+    this.redirectToAfterSignUp = redirectToAfterSignUp;
+    this.redirectToAfterSignIn = redirectToAfterSignIn;
+    this.redirectToAfterSignOut = redirectToAfterSignOut;
+
+    const authority = `https://${tenantName}.b2clogin.com/${tenantName}.onmicrosoft.com/${policyName}`;
+    const redirectUri = joinUrl(basePath, AZUREB2C_CALLBACK_PATH);
+
+    this.msalInstance = new PublicClientApplication({
+      auth: {
+        clientId,
+        authority,
+        redirectUri,
+        knownAuthorities: [`${tenantName}.b2clogin.com`],
+      },
+      cache: {
+        cacheLocation: "sessionStorage",
+        storeAuthStateInCookie: false,
+      },
+    });
+
+    void this.msalInstance.initialize().then(async () => {
+      void this.msalInstance
+        .handleRedirectPromise()
+        .then((response: AuthenticationResult | null) => {
+          if (response) {
+            this.handleAuthResponse(response);
+          }
+        });
+
+      // Add event callback
+      void this.msalInstance.addEventCallback((event: EventMessage) => {
+        if (event.eventType === EventType.LOGIN_SUCCESS) {
+          this.handleAuthResponse(event.payload as AuthenticationResult);
+        }
+      });
+    });
+  }
+
+  private handleAuthResponse(response: AuthenticationResult) {
+    const { accessToken, idToken, scopes, account } = response;
+
+    if (!account) {
+      throw new AuthorizationError("No account information in response");
+    }
+
+    // Get the user's name from Azure B2C claims
+    const name =
+      [account.idTokenClaims?.given_name, account.idTokenClaims?.family_name]
+        .filter(Boolean)
+        .join(" ") || account.username;
+
+    useAuthState.getState().setLoggedIn({
+      providerData: {
+        accessToken,
+        idToken,
+        scopes,
+        account,
+      },
+      profile: {
+        sub: account.localAccountId,
+        email: account.username,
+        name,
+        emailVerified: true, // Azure B2C emails are verified
+        pictureUrl: undefined, // Azure B2C doesn't provide profile pictures by default
+      },
+    });
+  }
+
+  async signUp({ redirectTo }: { redirectTo?: string } = {}) {
+    const redirectUri = this.redirectToAfterSignUp ?? redirectTo ?? "/";
+    sessionStorage.setItem("redirect-to", redirectUri);
+
+    await this.msalInstance.loginRedirect({
+      scopes: this.scopes,
+      prompt: "select_account",
+    });
+  }
+
+  async signIn({ redirectTo }: { redirectTo?: string } = {}) {
+    const redirectUri = this.redirectToAfterSignIn ?? redirectTo ?? "/";
+    sessionStorage.setItem("redirect-to", redirectUri);
+
+    await this.msalInstance.loginRedirect({
+      scopes: this.scopes,
+    });
+  }
+
+  async getAccessToken(): Promise<string> {
+    const account = this.msalInstance.getAllAccounts()[0];
+    if (!account) {
+      throw new AuthorizationError("No active account");
+    }
+
+    try {
+      const response = await this.msalInstance.acquireTokenSilent({
+        scopes: this.scopes,
+        account,
+      });
+      return response.accessToken;
+    } catch {
+      // If silent token acquisition fails, try interactive
+      await this.msalInstance.acquireTokenRedirect({
+        scopes: this.scopes,
+        account,
+      });
+
+      throw new AuthorizationError(
+        "Token acquisition failed after interactive attempt",
+      );
+    }
+  }
+
+  signRequest = async (request: Request): Promise<Request> => {
+    const accessToken = await this.getAccessToken();
+    request.headers.set("Authorization", `Bearer ${accessToken}`);
+    return request;
+  };
+
+  signOut = async () => {
+    const account = this.msalInstance.getAllAccounts()[0];
+    if (account) {
+      await this.msalInstance.logoutRedirect({
+        account,
+        postLogoutRedirectUri:
+          window.location.origin + this.redirectToAfterSignOut,
+      });
+    }
+
+    useAuthState.getState().setLoggedOut();
+  };
+
+  handleCallback = async () => {
+    const redirectTo = sessionStorage.getItem("redirect-to") ?? "/";
+    sessionStorage.removeItem("redirect-to");
+    return redirectTo;
+  };
+
+  getRoutes() {
+    return [
+      ...super.getRoutes(),
+      {
+        path: AZUREB2C_CALLBACK_PATH,
+        element: (
+          <ClientOnly>
+            <CallbackHandler handleCallback={this.handleCallback} />
+          </ClientOnly>
+        ),
+      },
+    ];
+  }
+}
+
+const azureB2CAuth: AuthenticationProviderInitializer<
+  AzureB2CAuthenticationConfig
+> = (options) => new AzureB2CAuthPlugin(options);
+
+export default azureB2CAuth;

package/src/lib/authentication/providers/clerk.tsx

@@ -31,9 +31,7 @@ const clerkAuth: AuthenticationProviderInitializer<
       const verifiedEmail = clerkApi.user.emailAddresses.find(
         (email) => email.verification.status === "verified",
       );
-      useAuthState.setState({
-        isAuthenticated: true,
-        isPending: false,
+      useAuthState.getState().setLoggedIn({
         profile: {
           sub: clerkApi.user.id,
           name: clerkApi.user.fullName ?? undefined,
@@ -115,9 +113,7 @@ const clerkAuth: AuthenticationProviderInitializer<
         const verifiedEmail = clerk.session.user.emailAddresses.find(
           (email) => email.verification.status === "verified",
         );
-        useAuthState.setState({
-          isAuthenticated: true,
-          isPending: false,
+        useAuthState.getState().setLoggedIn({
           profile: {
             sub: clerk.session.user.id,
             name: clerk.session.user.fullName ?? undefined,
@@ -146,12 +142,7 @@ const clerkAuth: AuthenticationProviderInitializer<
       await clerkApi?.signOut({
         redirectUrl: window.location.origin + redirectToAfterSignOut,
       });
-      useAuthState.setState({
-        isAuthenticated: false,
-        isPending: false,
-        profile: null,
-        providerData: null,
-      });
+      useAuthState.getState().setLoggedOut();
     },
     signIn: async ({ redirectTo }: { redirectTo?: string } = {}) => {
       await ensureLoaded;