zudoku 0.0.0-e097cbb → 0.0.0-e0ffac16

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

@@ -1,14 +1,16 @@
 import logger from "loglevel";
 import * as oauth from "oauth4webapi";
+import { ErrorBoundary } from "react-error-boundary";
 import { type OpenIDAuthenticationConfig } from "../../../config/config.js";
 import { ClientOnly } from "../../components/ClientOnly.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import {
-  type AuthenticationProvider,
+  type AuthenticationPlugin,
   type AuthenticationProviderInitializer,
 } from "../authentication.js";
-import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
+import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { CallbackHandler } from "../components/CallbackHandler.js";
+import { OAuthErrorPage } from "../components/OAuthErrorPage.js";
 import { AuthorizationError, OAuthAuthorizationError } from "../errors.js";
 import { useAuthState, type UserProfile } from "../state.js";
 
@@ -23,76 +25,53 @@ export interface OpenIdProviderData {
   tokenType: string;
 }
 
-class OpenIdAuthPlugin extends AuthenticationPlugin {
-  constructor(
-    private callbackUrlPath: string,
-    private handleCallback: () => Promise<string>,
-  ) {
-    super();
-  }
-  getRoutes() {
-    return [
-      ...super.getRoutes(),
-      {
-        path: this.callbackUrlPath,
-        element: (
-          <ClientOnly>
-            <CallbackHandler handleCallback={this.handleCallback} />
-          </ClientOnly>
-        ),
-      },
-    ];
-  }
-}
+export const OPENID_CALLBACK_PATH = "/oauth/callback";
 
-export class OpenIDAuthenticationProvider implements AuthenticationProvider {
+export class OpenIDAuthenticationProvider
+  extends CoreAuthenticationPlugin
+  implements AuthenticationPlugin
+{
   protected client: oauth.Client;
   protected issuer: string;
-
   protected authorizationServer: oauth.AuthorizationServer | undefined;
 
-  protected absoluteCallbackUrlPath: string;
-  protected relativeCallbackUrlPath: string;
-  protected logoutRedirectUrlPath: string;
+  protected callbackUrlPath: string;
+
   protected onAuthorizationUrl?: (
     authorizationUrl: URL,
     options: { isSignIn: boolean; isSignUp: boolean },
   ) => void;
-  private readonly redirectToAfterSignUp: string;
-  private readonly redirectToAfterSignIn: string;
-  private readonly redirectToAfterSignOut: string;
+
+  protected readonly redirectToAfterSignUp: string | undefined;
+  protected readonly redirectToAfterSignIn: string | undefined;
+  protected readonly redirectToAfterSignOut: string;
   private readonly audience?: string;
   private readonly scopes: string[];
-  private readonly root: string;
+
   constructor({
     issuer,
     audience,
     clientId,
     redirectToAfterSignUp,
     redirectToAfterSignIn,
-    redirectToAfterSignOut,
+    redirectToAfterSignOut = "/",
     basePath,
     scopes,
   }: OpenIDAuthenticationConfig) {
+    super();
     this.client = {
       client_id: clientId,
       token_endpoint_auth_method: "none",
     };
     this.audience = audience;
     this.issuer = issuer;
-    this.relativeCallbackUrlPath = "/oauth/callback";
-    this.absoluteCallbackUrlPath = joinUrl(
-      basePath,
-      this.relativeCallbackUrlPath,
-    );
+    // This is the callback URL for the OAuth provider. So it needs the base path.
+    this.callbackUrlPath = joinUrl(basePath, OPENID_CALLBACK_PATH);
     this.scopes = scopes ?? ["openid", "profile", "email"];
 
-    this.root = joinUrl(basePath, "/");
-
-    this.logoutRedirectUrlPath = this.root;
-    this.redirectToAfterSignUp = redirectToAfterSignUp ?? this.root;
-    this.redirectToAfterSignIn = redirectToAfterSignIn ?? this.root;
-    this.redirectToAfterSignOut = redirectToAfterSignOut ?? this.root;
+    this.redirectToAfterSignUp = redirectToAfterSignUp;
+    this.redirectToAfterSignIn = redirectToAfterSignIn;
+    this.redirectToAfterSignOut = redirectToAfterSignOut;
   }
 
   protected async getAuthServer() {
@@ -136,25 +115,41 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     });
   }
 
-  async signUp({ redirectTo }: { redirectTo?: string } = {}) {
+  async signUp({
+    redirectTo,
+    replace = false,
+  }: {
+    redirectTo?: string;
+    replace?: boolean;
+  } = {}) {
     return this.authorize({
-      redirectTo: redirectTo ?? this.redirectToAfterSignUp,
+      redirectTo: this.redirectToAfterSignUp ?? redirectTo ?? "/",
+      replace,
       isSignUp: true,
     });
   }
 
-  async signIn({ redirectTo }: { redirectTo?: string } = {}) {
+  async signIn({
+    redirectTo,
+    replace = false,
+  }: {
+    redirectTo?: string;
+    replace?: boolean;
+  } = {}) {
     return this.authorize({
-      redirectTo: redirectTo ?? this.redirectToAfterSignIn,
+      redirectTo: this.redirectToAfterSignIn ?? redirectTo ?? "/",
+      replace,
     });
   }
 
   private async authorize({
     redirectTo,
     isSignUp = false,
+    replace = false,
   }: {
     redirectTo: string;
     isSignUp?: boolean;
+    replace?: boolean;
   }): Promise<void> {
     const code_challenge_method = "S256";
     const authorizationServer = await this.getAuthServer();
@@ -178,17 +173,10 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
       authorizationServer.authorization_endpoint,
     );
 
-    const finalRedirect = redirectTo.startsWith(window.location.origin)
-      ? this.root !== "/" &&
-        redirectTo.startsWith(window.location.origin + this.root)
-        ? redirectTo.slice(window.location.origin.length + this.root.length)
-        : redirectTo.slice(window.location.origin.length)
-      : redirectTo;
-
-    sessionStorage.setItem("redirect-to", finalRedirect);
+    sessionStorage.setItem("redirect-to", redirectTo);
 
     const redirectUrl = new URL(window.location.origin);
-    redirectUrl.pathname = this.absoluteCallbackUrlPath;
+    redirectUrl.pathname = this.callbackUrlPath;
     redirectUrl.search = "";
 
     authorizationUrl.searchParams.set("client_id", this.client.client_id);
@@ -217,8 +205,11 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     sessionStorage.setItem(STATE_KEY, state);
     authorizationUrl.searchParams.set("state", state);
 
-    // now redirect the user to authorizationUrl.href
-    location.href = authorizationUrl.href;
+    if (replace) {
+      location.replace(authorizationUrl.href);
+    } else {
+      location.href = authorizationUrl.href;
+    }
   }
 
   async getAccessToken(): Promise<string> {
@@ -282,7 +273,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     const redirectUrl = new URL(
       window.location.origin + this.redirectToAfterSignOut,
     );
-    redirectUrl.pathname = this.logoutRedirectUrlPath;
+    redirectUrl.pathname = this.callbackUrlPath;
 
     let logoutUrl: URL;
     // The endSessionEndpoint is set, the IdP supports some form of logout,
@@ -303,6 +294,59 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     }
   };
 
+  onPageLoad = async () => {
+    const { providerData } = useAuthState.getState();
+
+    if (!providerData) {
+      useAuthState.setState({ isPending: false });
+      return;
+    }
+
+    const tokenState = providerData as OpenIdProviderData;
+
+    if (new Date(tokenState.expiresOn) < new Date()) {
+      if (!tokenState.refreshToken) {
+        useAuthState.setState({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        });
+        return;
+      }
+
+      try {
+        const as = await this.getAuthServer();
+        const request = await oauth.refreshTokenGrantRequest(
+          as,
+          this.client,
+          tokenState.refreshToken,
+        );
+        const response = await oauth.processRefreshTokenResponse(
+          as,
+          this.client,
+          request,
+        );
+
+        if (!response.access_token) {
+          throw new AuthorizationError("No access token in response");
+        }
+
+        this.setTokensFromResponse(response);
+      } catch {
+        useAuthState.setState({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        });
+        return;
+      }
+    }
+
+    useAuthState.setState({ isPending: false });
+  };
+
   handleCallback = async () => {
     const url = new URL(window.location.href);
     const state = url.searchParams.get("state");
@@ -338,7 +382,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     }
 
     const redirectUrl = new URL(url);
-    redirectUrl.pathname = this.absoluteCallbackUrlPath;
+    redirectUrl.pathname = this.callbackUrlPath;
     redirectUrl.search = "";
 
     const response = await oauth.authorizationCodeGrantRequest(
@@ -393,13 +437,22 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     return redirectTo;
   };
 
-  getAuthenticationPlugin() {
-    // TODO: This API is a bit messy, we need to refactor auth plugins/providers
-    // to remove the extra layers of abstraction.
-    return new OpenIdAuthPlugin(
-      this.relativeCallbackUrlPath,
-      this.handleCallback,
-    );
+  getRoutes() {
+    return [
+      ...super.getRoutes(),
+      {
+        path: OPENID_CALLBACK_PATH,
+        element: (
+          <ClientOnly>
+            <ErrorBoundary
+              fallbackRender={({ error }) => <OAuthErrorPage error={error} />}
+            >
+              <CallbackHandler handleCallback={this.handleCallback} />
+            </ErrorBoundary>
+          </ClientOnly>
+        ),
+      },
+    ];
   }
 }
 

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

@@ -6,16 +6,17 @@ import {
 } from "@supabase/supabase-js";
 import { type SupabaseAuthenticationConfig } from "../../../config/config.js";
 import {
-  type AuthenticationProvider,
+  type AuthenticationPlugin,
   type AuthenticationProviderInitializer,
 } from "../authentication.js";
-import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
+import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { AuthorizationError } from "../errors.js";
 import { useAuthState, type UserProfile } from "../state.js";
 
-class SupabaseAuthPlugin extends AuthenticationPlugin {}
-
-class SupabaseAuthenticationProvider implements AuthenticationProvider {
+class SupabaseAuthenticationProvider
+  extends CoreAuthenticationPlugin
+  implements AuthenticationPlugin
+{
   private readonly client: SupabaseClient;
   private readonly provider: Provider;
   private readonly redirectToAfterSignUp: string;
@@ -31,6 +32,7 @@ class SupabaseAuthenticationProvider implements AuthenticationProvider {
     redirectToAfterSignOut,
     basePath,
   }: SupabaseAuthenticationConfig) {
+    super();
     this.provider = provider;
     this.client = createClient(supabaseUrl, supabaseKey, {
       auth: {
@@ -49,12 +51,7 @@ class SupabaseAuthenticationProvider implements AuthenticationProvider {
       if (session && (event === "SIGNED_IN" || event === "TOKEN_REFRESHED")) {
         await this.updateUserState(session);
       } else if (event === "SIGNED_OUT") {
-        useAuthState.setState({
-          isAuthenticated: false,
-          isPending: false,
-          profile: undefined,
-          providerData: undefined,
-        });
+        useAuthState.getState().setLoggedOut();
       }
     });
   }
@@ -70,9 +67,7 @@ class SupabaseAuthenticationProvider implements AuthenticationProvider {
       pictureUrl: user.user_metadata.avatar_url,
     };
 
-    useAuthState.setState({
-      isAuthenticated: true,
-      isPending: false,
+    useAuthState.getState().setLoggedIn({
       profile,
       providerData: { session },
     });
@@ -139,8 +134,6 @@ class SupabaseAuthenticationProvider implements AuthenticationProvider {
     });
   };
 
-  getAuthenticationPlugin = () => new SupabaseAuthPlugin();
-
   onPageLoad = async () => {
     const { data, error } = await this.client.auth.getSession();
 

package/src/lib/authentication/state.ts

@@ -6,12 +6,15 @@ export interface AuthState<ProviderData = unknown> {
   isPending: boolean;
   profile: UserProfile | null;
   providerData: ProviderData | null;
-}
-
-export class Authentication {
-  async setLoggedIn(isLoggedIn: boolean) {}
-  async setProfile() {}
-  async setPersistentProviderData() {}
+  setAuthenticationPending: () => void;
+  setLoggedOut: () => void;
+  setLoggedIn: ({
+    profile,
+    providerData,
+  }: {
+    profile: UserProfile;
+    providerData: unknown;
+  }) => void;
 }
 
 export type StoreWithPersist<T> = Mutate<
@@ -35,11 +38,38 @@ const withStorageDOMEvents = <T>(store: StoreWithPersist<T>) => {
 
 export const useAuthState = create<AuthState>()(
   persist(
-    (state) => ({
+    (set) => ({
       isAuthenticated: false,
       isPending: true,
       profile: null,
       providerData: null,
+      setAuthenticationPending: () =>
+        set(() => ({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        })),
+      setLoggedOut: () =>
+        set(() => ({
+          isAuthenticated: false,
+          isPending: false,
+          profile: null,
+          providerData: null,
+        })),
+      setLoggedIn: ({
+        profile,
+        providerData,
+      }: {
+        profile: UserProfile;
+        providerData: unknown;
+      }) =>
+        set(() => ({
+          isAuthenticated: true,
+          isPending: false,
+          profile,
+          providerData,
+        })),
     }),
     {
       merge: (persistedState, currentState) => {

package/src/lib/components/Autocomplete.tsx

@@ -26,7 +26,7 @@ const AutocompletePopover = ({
   options,
   onChange,
   className,
-  placeholder = "Enter value",
+  placeholder = "Value",
   onEnterPress,
   ref,
 }: AutocompleteProps) => {
@@ -39,6 +39,7 @@ const AutocompletePopover = ({
     <Popover open={open}>
       <PopoverAnchor>
         <CommandInlineInput
+          autoComplete="off"
           ref={(el) => {
             inputRef.current = el;
             if (typeof ref === "function") {
@@ -71,7 +72,7 @@ const AutocompletePopover = ({
         onMouseEnter={() => setDontClose(true)}
         onMouseLeave={() => setDontClose(false)}
         onOpenAutoFocus={(e) => e.preventDefault()}
-        className={cn("p-0 w-[--radix-popover-trigger-width]", {
+        className={cn("p-0 w-(--radix-popover-trigger-width)", {
           "border-0": count === 0,
         })}
         align="start"

package/src/lib/components/Banner.tsx

@@ -12,7 +12,7 @@ const COLOR_MAP = {
 } as const;
 
 export const Banner = () => {
-  const { page } = useZudoku();
+  const { site: page } = useZudoku();
   const [isBannerOpen, setIsBannerOpen] = useState(true);
 
   if (!page?.banner || !isBannerOpen) {
@@ -31,17 +31,16 @@ export const Banner = () => {
   return (
     <div
       className={cn(
-        "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center",
+        "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center lg:h-(--banner-height)",
         mappedColor,
       )}
-      data-pagefind-ignore="all"
       style={style}
     >
       <div className="w-full">{page.banner.message}</div>
       {page.banner.dismissible && (
         <button
           type="button"
-          className="md:absolute md:right-4 -m-1.5 p-1.5 hover:bg-accent-foreground/10 rounded-md"
+          className="md:absolute md:end-4 -m-1.5 p-1.5 hover:bg-accent-foreground/10 rounded-md"
           onClick={() => setIsBannerOpen(false)}
         >
           <CircleXIcon size={16} />

package/src/lib/components/BuildCheck.tsx

@@ -1,6 +1,6 @@
 import { useQuery } from "@tanstack/react-query";
 import { CircleFadingArrowUpIcon, LoaderCircleIcon } from "lucide-react";
-import { z } from "zod";
+import { z } from "zod/v4";
 import { Button } from "../ui/Button.js";
 
 const BuildStatusSchema = z.object({
@@ -11,17 +11,17 @@ const BuildStatusSchema = z.object({
 
 export const BuildCheck = ({
   buildId,
+  environmentType,
   endpoint = "/__zuplo/docs",
 }: {
   buildId?: string;
+  environmentType?: string;
   endpoint?: string;
 }) => {
   const buildStatusQuery = useQuery({
     queryKey: ["zuplo-build-check", buildId, endpoint],
     refetchInterval: 3000,
-    enabled:
-      typeof buildId !== "undefined" &&
-      import.meta.env.ZUPLO_ENVIRONMENT_TYPE === "WORKING_COPY",
+    enabled: buildId !== undefined && environmentType === "WORKING_COPY",
     retry: false,
     queryFn: () =>
       fetch(endpoint, { signal: AbortSignal.timeout(2000) })

package/src/lib/components/CategoryHeading.tsx

@@ -9,7 +9,10 @@ export const CategoryHeading = ({
   className?: string;
 }) => {
   return (
-    <div className={cx("text-sm font-semibold text-primary mb-2", className)}>
+    <div
+      className={cx("text-sm font-semibold text-primary mb-2", className)}
+      data-pagefind-ignore="all"
+    >
       {children}
     </div>
   );

package/src/lib/components/ErrorPage.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import { CategoryHeading } from "./CategoryHeading.js";
 import { Heading } from "./Heading.js";
-import { ProseClasses } from "./Markdown.js";
+import { Typography } from "./Typography.js";
 
 export const ErrorPage = ({
   title = "An error occurred",
@@ -13,7 +13,7 @@ export const ErrorPage = ({
   category?: ReactNode;
 }) => {
   return (
-    <div className={ProseClasses + " h-full pt-[--padding-content-top]"}>
+    <Typography className={"h-full pt-(--padding-content-top)"}>
       {category && <CategoryHeading>{category}</CategoryHeading>}
       {title && (
         <Heading level={1} className="flex gap-3.5 items-center">
@@ -21,6 +21,6 @@ export const ErrorPage = ({
         </Heading>
       )}
       <p>{message}</p>
-    </div>
+    </Typography>
   );
 };

package/src/lib/components/Footer.tsx

@@ -1,10 +1,10 @@
 import { ExternalLink as ExternalLinkIcon } from "lucide-react";
 import type { CSSProperties, ReactNode } from "react";
-import type { FooterSocialIcons } from "../../config/validators/common.js";
+import type { FooterSocialIcons } from "../../config/validators/validate.js";
 import { cn } from "../util/cn.js";
 import { AnchorLink } from "./AnchorLink.js";
 import { useZudoku } from "./index.js";
-import { Slotlet } from "./SlotletProvider.js";
+import { Slot } from "./Slot.js";
 
 const SocialIcon = ({
   icon,
@@ -26,7 +26,7 @@ const SocialIcon = ({
 const isExternalUrl = (href: string) => /^https?:/.test(href);
 
 export const Footer = () => {
-  const { page } = useZudoku();
+  const { site: page } = useZudoku();
   const footer = page?.footer;
 
   if (!footer) return null;
@@ -41,7 +41,7 @@ export const Footer = () => {
             "justify-end": footer.position === "end",
           })}
         >
-          <Slotlet name="footer-before" />
+          <Slot.Target name="footer-before" />
           {footer.columns && (
             <div
               className="w-full md:max-w-screen-md grid grid-cols-[1fr_1fr] gap-8 md:grid-cols-[repeat(var(--columns),minmax(0,1fr))]"
@@ -59,12 +59,12 @@ export const Footer = () => {
                 >
                   <span className="text-sm font-semibold">{column.title}</span>
                   <ul className="mt-4 space-y-2">
-                    {column.links.map((link, i) => {
+                    {column.links.map((link) => {
                       const className =
                         "flex flex-row gap-1 items-center text-sm text-muted-foreground hover:text-accent-foreground";
 
                       return (
-                        <li key={link.href + i}>
+                        <li key={link.href + link.label}>
                           {isExternalUrl(link.href) ? (
                             <a
                               href={link.href}
@@ -76,10 +76,7 @@ export const Footer = () => {
                               <ExternalLinkIcon size={12} />
                             </a>
                           ) : (
-                            <AnchorLink
-                              to={link.href + i}
-                              className={className}
-                            >
+                            <AnchorLink to={link.href} className={className}>
                               <span>{link.label}</span>
                             </AnchorLink>
                           )}
@@ -91,7 +88,7 @@ export const Footer = () => {
               ))}
             </div>
           )}
-          <Slotlet name="footer-after" />
+          <Slot.Target name="footer-after" />
         </div>
         <div
           className={cn(

package/src/lib/components/Framed.tsx

@@ -0,0 +1,51 @@
+import { cva } from "class-variance-authority";
+import type { PropsWithChildren } from "react";
+import { cn } from "../util/cn.js";
+
+const frameVariants = cva("", {
+  variants: {
+    size: {
+      sm: "max-w-sm",
+      md: "max-w-md",
+      lg: "max-w-lg",
+      xl: "max-w-xl",
+      "2xl": "max-w-2xl",
+      full: "max-w-full",
+    },
+    align: {
+      center: "mx-auto",
+      start: "me-auto",
+      end: "ms-auto",
+    },
+  },
+  defaultVariants: {
+    size: "xl",
+    align: "center",
+  },
+});
+
+export const Framed = ({
+  caption,
+  className,
+  size = "xl",
+  align = "center",
+  children,
+}: PropsWithChildren<{
+  caption?: string;
+  className?: string;
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+  align?: "center" | "start" | "end";
+}>) => (
+  <figure className={cn(frameVariants({ size, align }), className)}>
+    <div className="relative overflow-hidden rounded-lg border border-border bg-muted/50 p-1 shadow-sm">
+      <div className="not-prose rounded-md [&_img]:rounded-md! relative overflow-hidden bg-background">
+        {children}
+      </div>
+    </div>
+    {caption && (
+      <figcaption className="mt-3 text-center text-sm text-muted-foreground">
+        {caption}
+      </figcaption>
+    )}
+  </figure>
+);