zudoku 0.0.0-ec30b50 → 0.0.0-ee328ec

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

@@ -1,18 +1,19 @@
 import logger from "loglevel";
 import * as oauth from "oauth4webapi";
-import { OpenIDAuthenticationConfig } from "../../../config/config.js";
+import { type OpenIDAuthenticationConfig } from "../../../config/config.js";
 import { ClientOnly } from "../../components/ClientOnly.js";
 import { joinUrl } from "../../util/joinUrl.js";
 import {
-  AuthenticationProvider,
-  AuthenticationProviderInitializer,
+  type AuthenticationProvider,
+  type AuthenticationProviderInitializer,
 } from "../authentication.js";
 import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
 import { CallbackHandler } from "../components/CallbackHandler.js";
 import { AuthorizationError, OAuthAuthorizationError } from "../errors.js";
-import { useAuthState, UserProfile } from "../state.js";
+import { useAuthState, type UserProfile } from "../state.js";
 
 const CODE_VERIFIER_KEY = "code-verifier";
+const STATE_KEY = "oauth-state";
 
 export interface OpenIdProviderData {
   accessToken: string;
@@ -22,18 +23,17 @@ export interface OpenIdProviderData {
   tokenType: string;
 }
 
+export const OPENID_CALLBACK_PATH = "/oauth/callback";
+
 class OpenIdAuthPlugin extends AuthenticationPlugin {
-  constructor(
-    private callbackUrlPath: string,
-    private handleCallback: () => Promise<string>,
-  ) {
+  constructor(private handleCallback: () => Promise<string>) {
     super();
   }
   getRoutes() {
     return [
       ...super.getRoutes(),
       {
-        path: this.callbackUrlPath,
+        path: OPENID_CALLBACK_PATH,
         element: (
           <ClientOnly>
             <CallbackHandler handleCallback={this.handleCallback} />
@@ -47,19 +47,20 @@ class OpenIdAuthPlugin extends AuthenticationPlugin {
 export class OpenIDAuthenticationProvider implements AuthenticationProvider {
   protected client: oauth.Client;
   protected issuer: string;
-
   protected authorizationServer: oauth.AuthorizationServer | undefined;
 
   protected callbackUrlPath: string;
-  protected logoutRedirectUrlPath: 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[];
 
   constructor({
     issuer,
@@ -67,8 +68,9 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     clientId,
     redirectToAfterSignUp,
     redirectToAfterSignIn,
-    redirectToAfterSignOut,
+    redirectToAfterSignOut = "/",
     basePath,
+    scopes,
   }: OpenIDAuthenticationConfig) {
     this.client = {
       client_id: clientId,
@@ -76,14 +78,13 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     };
     this.audience = audience;
     this.issuer = issuer;
-    this.callbackUrlPath = joinUrl(basePath, "/oauth/callback");
-
-    const root = joinUrl(basePath, "/");
+    // 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.logoutRedirectUrlPath = root;
-    this.redirectToAfterSignUp = redirectToAfterSignUp ?? root;
-    this.redirectToAfterSignIn = redirectToAfterSignIn ?? root;
-    this.redirectToAfterSignOut = redirectToAfterSignOut ?? root;
+    this.redirectToAfterSignUp = redirectToAfterSignUp;
+    this.redirectToAfterSignIn = redirectToAfterSignIn;
+    this.redirectToAfterSignOut = redirectToAfterSignOut;
   }
 
   protected async getAuthServer() {
@@ -129,14 +130,14 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
 
   async signUp({ redirectTo }: { redirectTo?: string } = {}) {
     return this.authorize({
-      redirectTo: redirectTo ?? this.redirectToAfterSignUp,
+      redirectTo: this.redirectToAfterSignUp ?? redirectTo ?? "/",
       isSignUp: true,
     });
   }
 
   async signIn({ redirectTo }: { redirectTo?: string } = {}) {
     return this.authorize({
-      redirectTo: redirectTo ?? this.redirectToAfterSignIn,
+      redirectTo: this.redirectToAfterSignIn ?? redirectTo ?? "/",
     });
   }
 
@@ -178,7 +179,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     authorizationUrl.searchParams.set("client_id", this.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("scope", this.scopes.join(" "));
     authorizationUrl.searchParams.set("code_challenge", codeChallenge);
     authorizationUrl.searchParams.set(
       "code_challenge_method",
@@ -194,16 +195,12 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     });
 
     /**
-     * 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.
+     * The state parameter is used to prevent CSRF attacks and should be used in all authorization requests.
+     * It is independent of PKCE and should be used regardless of PKCE support.
      */
-    if (
-      authorizationServer.code_challenge_methods_supported?.includes("S256") !==
-      true
-    ) {
-      const state = oauth.generateRandomState();
-      authorizationUrl.searchParams.set("state", state);
-    }
+    const state = oauth.generateRandomState();
+    sessionStorage.setItem(STATE_KEY, state);
+    authorizationUrl.searchParams.set("state", state);
 
     // now redirect the user to authorizationUrl.href
     location.href = authorizationUrl.href;
@@ -251,6 +248,12 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
     }
   }
 
+  signRequest = async (request: Request): Promise<Request> => {
+    const accessToken = await this.getAccessToken();
+    request.headers.set("Authorization", `Bearer ${accessToken}`);
+    return request;
+  };
+
   signOut = async () => {
     useAuthState.setState({
       isAuthenticated: false,
@@ -264,7 +267,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,
@@ -288,6 +291,12 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
   handleCallback = async () => {
     const url = new URL(window.location.href);
     const state = url.searchParams.get("state");
+    const storedState = sessionStorage.getItem(STATE_KEY);
+    sessionStorage.removeItem(STATE_KEY);
+
+    if (state !== storedState) {
+      throw new AuthorizationError("Invalid state parameter");
+    }
 
     // one eternity later, the user lands back on the redirect_uri
     // Authorization Code Grant Request & Response
@@ -372,7 +381,7 @@ export class OpenIDAuthenticationProvider implements AuthenticationProvider {
   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.callbackUrlPath, this.handleCallback);
+    return new OpenIdAuthPlugin(this.handleCallback);
   }
 }
 

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

@@ -0,0 +1,157 @@
+import {
+  createClient,
+  type Provider,
+  type Session,
+  type SupabaseClient,
+} from "@supabase/supabase-js";
+import { type SupabaseAuthenticationConfig } from "../../../config/config.js";
+import {
+  type AuthenticationProvider,
+  type AuthenticationProviderInitializer,
+} from "../authentication.js";
+import { AuthenticationPlugin } from "../AuthenticationPlugin.js";
+import { AuthorizationError } from "../errors.js";
+import { useAuthState, type UserProfile } from "../state.js";
+
+class SupabaseAuthPlugin extends AuthenticationPlugin {}
+
+class SupabaseAuthenticationProvider implements AuthenticationProvider {
+  private readonly client: SupabaseClient;
+  private readonly provider: Provider;
+  private readonly redirectToAfterSignUp: string;
+  private readonly redirectToAfterSignIn: string;
+  private readonly redirectToAfterSignOut: string;
+
+  constructor({
+    supabaseUrl,
+    supabaseKey,
+    provider,
+    redirectToAfterSignUp,
+    redirectToAfterSignIn,
+    redirectToAfterSignOut,
+    basePath,
+  }: SupabaseAuthenticationConfig) {
+    this.provider = provider;
+    this.client = createClient(supabaseUrl, supabaseKey, {
+      auth: {
+        autoRefreshToken: true,
+        persistSession: true,
+      },
+    });
+
+    const root = basePath ?? "/";
+
+    this.redirectToAfterSignUp = redirectToAfterSignUp ?? root;
+    this.redirectToAfterSignIn = redirectToAfterSignIn ?? root;
+    this.redirectToAfterSignOut = redirectToAfterSignOut ?? root;
+
+    this.client.auth.onAuthStateChange(async (event, session) => {
+      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,
+        });
+      }
+    });
+  }
+
+  private async updateUserState(session: Session) {
+    const { user } = session;
+
+    const profile: UserProfile = {
+      sub: user.id,
+      email: user.email,
+      name: user.user_metadata.full_name || user.user_metadata.name,
+      emailVerified: user.email_confirmed_at != null,
+      pictureUrl: user.user_metadata.avatar_url,
+    };
+
+    useAuthState.setState({
+      isAuthenticated: true,
+      isPending: false,
+      profile,
+      providerData: { session },
+    });
+  }
+
+  async getAccessToken(): Promise<string> {
+    const { data, error } = await this.client.auth.getSession();
+
+    if (error || !data.session) {
+      throw new AuthorizationError("User is not authenticated");
+    }
+
+    return data.session.access_token;
+  }
+
+  async signRequest(request: Request): Promise<Request> {
+    const accessToken = await this.getAccessToken();
+    request.headers.set("Authorization", `Bearer ${accessToken}`);
+    return request;
+  }
+
+  signUp = async ({ redirectTo }: { redirectTo?: string }) => {
+    const finalRedirectTo = redirectTo ?? this.redirectToAfterSignUp;
+
+    // Open Supabase Auth UI in a new window
+    await this.client.auth.signInWithOAuth({
+      provider: this.provider,
+      options: {
+        redirectTo: window.location.origin + finalRedirectTo,
+      },
+    });
+  };
+
+  signIn = async ({ redirectTo }: { redirectTo?: string }) => {
+    const finalRedirectTo = redirectTo ?? this.redirectToAfterSignIn;
+
+    await this.client.auth.signInWithOAuth({
+      provider: this.provider,
+      options: {
+        redirectTo: window.location.origin + finalRedirectTo,
+        queryParams: {
+          access_type: "offline",
+          prompt: "consent",
+        },
+      },
+    });
+  };
+
+  signOut = async () => {
+    await new Promise<void>((resolve) => {
+      const { data } = this.client.auth.onAuthStateChange(async (event) => {
+        if (event !== "SIGNED_OUT") return;
+        data.subscription.unsubscribe();
+        resolve();
+      });
+      void this.client.auth.signOut();
+    });
+
+    useAuthState.setState({
+      isAuthenticated: false,
+      isPending: false,
+      profile: undefined,
+      providerData: undefined,
+    });
+  };
+
+  getAuthenticationPlugin = () => new SupabaseAuthPlugin();
+
+  onPageLoad = async () => {
+    const { data, error } = await this.client.auth.getSession();
+
+    if (!error && data.session) {
+      await this.updateUserState(data.session);
+    }
+  };
+}
+
+const supabaseAuth: AuthenticationProviderInitializer<
+  SupabaseAuthenticationConfig
+> = (options) => new SupabaseAuthenticationProvider(options);
+
+export default supabaseAuth;

package/src/lib/authentication/state.ts

@@ -1,4 +1,3 @@
-import { useMemo } from "react";
 import { create, type Mutate, type StoreApi } from "zustand";
 import { createJSONStorage, persist } from "zustand/middleware";
 
@@ -20,7 +19,7 @@ export type StoreWithPersist<T> = Mutate<
   [["zustand/persist", unknown]]
 >;
 
-export const withStorageDOMEvents = <T>(store: StoreWithPersist<T>) => {
+const withStorageDOMEvents = <T>(store: StoreWithPersist<T>) => {
   const storageEventCallback = (e: StorageEvent) => {
     if (e.key === store.persist.getOptions().name && e.newValue) {
       void store.persist.rehydrate();
@@ -38,14 +37,20 @@ export const useAuthState = create<AuthState>()(
   persist(
     (state) => ({
       isAuthenticated: false,
-      isPending: false,
+      isPending: true,
       profile: null,
       providerData: null,
     }),
     {
+      merge: (persistedState, currentState) => {
+        return {
+          ...currentState,
+          isPending: false,
+          ...(typeof persistedState === "object" ? persistedState : {}),
+        };
+      },
       name: "auth-state",
       storage: createJSONStorage(() => localStorage),
-      // partialize: (s) => ({ state: s }),
     },
   ),
 );
@@ -62,36 +67,3 @@ export interface UserProfile {
   pictureUrl: string | undefined;
   [key: string]: string | boolean | undefined;
 }
-
-interface SelectedServerState {
-  selectedServer?: string;
-  setSelectedServer: (newServer: string) => void;
-}
-
-export const useSelectedServerStore = create<SelectedServerState>()(
-  persist(
-    (set) => ({
-      selectedServer: undefined,
-      setSelectedServer: (newServer: string) =>
-        set({ selectedServer: newServer }),
-    }),
-    { name: "zudoku-selected-server" },
-  ),
-);
-
-/**
- * Simple wrapper for `useSelectedServerStore` to fall back to first of the provided servers
- */
-export const useSelectedServer = (servers: Array<{ url: string }>) => {
-  const { selectedServer, setSelectedServer } = useSelectedServerStore();
-
-  const finalSelectedServer = useMemo(
-    () =>
-      selectedServer && servers.some((s) => s.url === selectedServer)
-        ? selectedServer
-        : (servers.at(0)?.url ?? ""),
-    [selectedServer, servers],
-  );
-
-  return { selectedServer: finalSelectedServer, setSelectedServer };
-};

package/src/lib/components/AnchorLink.tsx

@@ -1,22 +1,24 @@
-import React from "react";
-import { Link, type LinkProps, useLocation } from "react-router";
+import { type MouseEvent } from "react";
+import { NavLink, type NavLinkProps, useHref, useLocation } from "react-router";
 import { useScrollToHash } from "../util/useScrollToAnchor.js";
 
 /**
  * Link that scrolls to anchor even if the hash is already set in the URL.
  */
-export const AnchorLink = (props: LinkProps) => {
+export const AnchorLink = (props: NavLinkProps) => {
   const location = useLocation();
   const scrollToHash = useScrollToHash();
-  const hash = typeof props.to === "string" ? props.to : props.to.hash;
+  const href = useHref(props.to);
+  const [pathname, hash] = href.split("#");
 
-  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+  const handleClick = (event: MouseEvent<HTMLAnchorElement>) => {
     props.onClick?.(event);
-    if (!hash?.startsWith("#") || hash !== location.hash) return;
+    if (hash !== location.hash.slice(1) || pathname !== location.pathname)
+      return;
 
     event.preventDefault();
     scrollToHash(hash);
   };
 
-  return <Link {...props} onClick={handleClick} />;
+  return <NavLink {...props} onClick={handleClick} />;
 };

package/src/lib/components/Banner.tsx

@@ -34,13 +34,14 @@ export const Banner = () => {
         "relative text-primary-foreground text-sm font-medium px-4 py-2 flex gap-2 items-center",
         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/Bootstrap.tsx

@@ -13,6 +13,7 @@ import {
 } from "react-router";
 import { RouterProvider } from "react-router/dom";
 import { StaggeredRenderContext } from "../plugins/openapi/StaggeredRender.js";
+import { BypassProtectedRoutesContext } from "./context/BypassProtectedRoutesContext.js";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -32,11 +33,13 @@ const Bootstrap = ({
   <StrictMode>
     <QueryClientProvider client={queryClient}>
       <HydrationBoundary state={hydrate ? (window as any).DATA : undefined}>
-        <HelmetProvider>
-          <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
-            <RouterProvider router={router} />
-          </StaggeredRenderContext.Provider>
-        </HelmetProvider>
+        <BypassProtectedRoutesContext value={false}>
+          <HelmetProvider>
+            <StaggeredRenderContext.Provider value={{ stagger: !hydrate }}>
+              <RouterProvider router={router} />
+            </StaggeredRenderContext.Provider>
+          </HelmetProvider>
+        </BypassProtectedRoutesContext>
       </HydrationBoundary>
     </QueryClientProvider>
   </StrictMode>
@@ -47,16 +50,20 @@ const BootstrapStatic = ({
   context,
   queryClient,
   helmetContext,
+  bypassProtection = false,
 }: {
   helmetContext: HelmetData["context"];
   context: StaticHandlerContext;
   queryClient: QueryClient;
   router: ReturnType<typeof createStaticRouter>;
+  bypassProtection?: boolean;
 }) => (
   <StrictMode>
     <QueryClientProvider client={queryClient}>
       <HelmetProvider context={helmetContext}>
-        <StaticRouterProvider router={router} context={context} />
+        <BypassProtectedRoutesContext value={bypassProtection}>
+          <StaticRouterProvider router={router} context={context} />
+        </BypassProtectedRoutesContext>
       </HelmetProvider>
     </QueryClientProvider>
   </StrictMode>

package/src/lib/components/BuildCheck.tsx

@@ -0,0 +1,75 @@
+import { useQuery } from "@tanstack/react-query";
+import { CircleFadingArrowUpIcon, LoaderCircleIcon } from "lucide-react";
+import { z } from "zod";
+import { Button } from "../ui/Button.js";
+
+const BuildStatusSchema = z.object({
+  buildId: z.string(),
+  timestamp: z.string(),
+  status: z.enum(["in-progress", "success", "failed"]),
+});
+
+export const BuildCheck = ({
+  buildId,
+  endpoint = "/__zuplo/docs",
+}: {
+  buildId?: 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",
+    retry: false,
+    queryFn: () =>
+      fetch(endpoint, { signal: AbortSignal.timeout(2000) })
+        .then((res) => {
+          if (!res.ok) throw new Error("Failed to fetch build status");
+          return res.json();
+        })
+        .then((data) => BuildStatusSchema.parse(data)),
+  });
+
+  if (
+    buildStatusQuery.isError ||
+    !buildStatusQuery.data ||
+    buildStatusQuery.data.buildId === buildId
+  ) {
+    return null;
+  }
+
+  const isCompleted = buildStatusQuery.data.status === "success";
+
+  return (
+    <div className="fixed flex flex-col gap-3 p-4 rounded-xl w-96 border z-20 bg-background left-0 right-0 top-4 mx-auto shadow-lg">
+      {isCompleted ? (
+        <div className="flex flex-row items-center gap-2">
+          <CircleFadingArrowUpIcon size={16} />
+          <span className="text-sm">New version available</span>
+        </div>
+      ) : (
+        <div className="flex flex-row items-center gap-2">
+          <LoaderCircleIcon size={16} className="animate-spin" />
+          <span className="text-sm">Building new version...</span>
+        </div>
+      )}
+      <span className="text-xs">
+        {!isCompleted
+          ? "A new version of the developer portal will be available soon."
+          : "To see the new version, reload the page now."}
+      </span>
+      <Button
+        variant="outline"
+        size="sm"
+        className="w-full"
+        onClick={() => {
+          window.location.reload();
+        }}
+      >
+        Reload
+      </Button>
+    </div>
+  );
+};