zudoku 0.0.0-fix-downgrade-openapi-parser.aac00796 → 0.0.0-fix-firebase-export.2e421fda

package/src/lib/authentication/ui/ZudokuAuthUi.tsx

@@ -0,0 +1,335 @@
+import { useMutation } from "@tanstack/react-query";
+import React from "react";
+import { useForm } from "react-hook-form";
+import { Link, useNavigate, useSearchParams } from "react-router";
+import { ActionButton } from "zudoku/ui/ActionButton.js";
+import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
+import { Button, type ButtonProps } from "zudoku/ui/Button.js";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "zudoku/ui/Card.js";
+import { Input } from "zudoku/ui/Input.js";
+import { Separator } from "zudoku/ui/Separator.js";
+import {
+  Form,
+  FormControl,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "../../ui/Form.js";
+import { cn } from "../../util/cn.js";
+import createVariantComponent from "../../util/createVariantComponent.js";
+import AppleIcon from "./icons/Apple.js";
+import FacebookIcon from "./icons/Facebook.js";
+import GithubIcon from "./icons/Github.js";
+import GoogleIcon from "./icons/Google.js";
+import MicrosoftIcon from "./icons/Microsoft.js";
+import XIcon from "./icons/X.js";
+
+export const AUTH_PROVIDER_NAMES: Record<AuthProviderId, string> = {
+  google: "Google",
+  github: "GitHub",
+  facebook: "Facebook",
+  twitter: "X",
+  x: "X",
+  microsoft: "Microsoft",
+  apple: "Apple",
+  yahoo: "Yahoo",
+};
+
+export type AuthProviderId = keyof typeof ProviderIcons;
+
+const ProviderIcons = {
+  google: GoogleIcon,
+  github: GithubIcon,
+  facebook: FacebookIcon,
+  twitter: XIcon,
+  x: XIcon,
+  apple: AppleIcon,
+  microsoft: MicrosoftIcon,
+  yahoo: React.Fragment,
+} as const;
+
+const isValidAuthProviderId = (
+  provider: string,
+): provider is AuthProviderId => {
+  return provider in ProviderIcons;
+};
+
+const isAuthProviderIdArray = (
+  providers: string[],
+): providers is AuthProviderId[] => {
+  return providers.every(isValidAuthProviderId);
+};
+
+const AuthProviderButton = ({
+  providerId,
+  onClick,
+  ...buttonProps
+}: { providerId: AuthProviderId; onClick?: () => void } & ButtonProps) => {
+  const IconRenderer = ProviderIcons[providerId];
+  return (
+    <Button
+      variant="outline"
+      className="gap-2"
+      onClick={onClick}
+      {...buttonProps}
+    >
+      <IconRenderer className="w-4 h-4 fill-foreground" />
+      {AUTH_PROVIDER_NAMES[providerId]}
+    </Button>
+  );
+};
+
+type FormFields = {
+  email: string;
+  password: string;
+};
+
+const EmailPasswordForm = ({
+  form,
+  onSubmit,
+  submitLabel,
+  isPending,
+}: {
+  form: ReturnType<typeof useForm<FormFields>>;
+  onSubmit: (data: FormFields) => void;
+  submitLabel: string;
+  isPending: boolean;
+}) => {
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-col gap-2"
+      >
+        <FormItem>
+          <FormLabel>E-Mail</FormLabel>
+          <FormControl>
+            <Input placeholder="Email" {...form.register("email")} />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+        <FormItem>
+          <FormLabel>Password</FormLabel>
+          <FormControl>
+            <Input
+              placeholder="Password"
+              {...form.register("password")}
+              type="password"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+        <ActionButton type="submit" isPending={isPending}>
+          {submitLabel}
+        </ActionButton>
+      </form>
+    </Form>
+  );
+};
+
+export const ZudokuSignInUi = ({
+  providers,
+  onOAuthSignIn,
+  onUsernamePasswordSignIn,
+}: {
+  providers: string[];
+  onOAuthSignIn: (providerId: string) => Promise<void>;
+  onUsernamePasswordSignIn: (email: string, password: string) => Promise<void>;
+}) => {
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get("redirectTo");
+
+  if (!isAuthProviderIdArray(providers)) {
+    throw new Error("Invalid auth provider IDs");
+  }
+
+  const signInUsernameMutation = useMutation({
+    mutationFn: async ({ email, password }: FormFields) => {
+      await onUsernamePasswordSignIn(email, password);
+    },
+    onSuccess: () => {
+      void navigate(redirectTo ?? "/");
+    },
+  });
+  const signInByProviderMutation = useMutation({
+    mutationFn: async ({ providerId }: { providerId: string }) => {
+      await onOAuthSignIn(providerId);
+    },
+    onSuccess: () => {
+      void navigate(redirectTo ?? "/");
+    },
+  });
+
+  const form = useForm<FormFields>({
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  const pending =
+    signInUsernameMutation.isPending || signInByProviderMutation.isPending;
+
+  const error = signInUsernameMutation.error ?? signInByProviderMutation.error;
+
+  return (
+    <AuthCard>
+      <CardHeader>
+        <CardTitle>Sign in</CardTitle>
+        <CardDescription>Sign in to your account to continue.</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {error && (
+          <Alert variant="destructive">
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{error?.message}</AlertDescription>
+          </Alert>
+        )}
+        <EmailPasswordForm
+          form={form}
+          onSubmit={(data) =>
+            void signInUsernameMutation.mutate({
+              email: data.email,
+              password: data.password,
+            })
+          }
+          submitLabel="Sign in"
+          isPending={pending}
+        />
+        <ProviderSeparator providers={providers} />
+        <ProviderButtons
+          providers={providers}
+          onClick={(providerId) =>
+            signInByProviderMutation.mutate({ providerId })
+          }
+        />
+        <Link to="/signup" className="text-sm text-muted-foreground">
+          Don't have an account? Sign up.
+        </Link>
+      </CardContent>
+    </AuthCard>
+  );
+};
+
+export const ZudokuSignUpUi = ({
+  providers,
+  onOAuthSignUp,
+  onUsernamePasswordSignUp,
+}: {
+  providers: string[];
+  onOAuthSignUp: (providerId: string) => Promise<void>;
+  onUsernamePasswordSignUp: (email: string, password: string) => Promise<void>;
+}) => {
+  if (!isAuthProviderIdArray(providers)) {
+    throw new Error("Invalid auth provider IDs");
+  }
+
+  const signUpUsernameMutation = useMutation({
+    mutationFn: async ({ email, password }: FormFields) => {
+      await onUsernamePasswordSignUp(email, password);
+    },
+  });
+
+  const signUpByProviderMutation = useMutation({
+    mutationFn: async ({ providerId }: { providerId: string }) => {
+      await onOAuthSignUp(providerId);
+    },
+  });
+
+  const form = useForm<FormFields>({
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  const pending =
+    signUpUsernameMutation.isPending || signUpByProviderMutation.isPending;
+
+  const error = signUpUsernameMutation.error ?? signUpByProviderMutation.error;
+
+  return (
+    <AuthCard>
+      <CardHeader>
+        <CardTitle>Sign up</CardTitle>
+        <CardDescription>Sign up to your account to continue.</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {error && (
+          <Alert variant="destructive">
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{error?.message}</AlertDescription>
+          </Alert>
+        )}
+
+        <EmailPasswordForm
+          form={form}
+          onSubmit={(data) =>
+            void signUpUsernameMutation.mutate({
+              email: data.email,
+              password: data.password,
+            })
+          }
+          submitLabel="Sign up"
+          isPending={pending}
+        />
+        <ProviderSeparator providers={providers} />
+        <ProviderButtons
+          providers={providers}
+          onClick={(providerId) =>
+            signUpByProviderMutation.mutate({ providerId })
+          }
+        />
+        <Link to="/signin" className="text-sm text-muted-foreground">
+          Already have an account? Sign in.
+        </Link>
+      </CardContent>
+    </AuthCard>
+  );
+};
+
+const AuthCard = createVariantComponent(Card, "max-w-md w-full mt-10 mx-auto");
+
+const ProviderButtons = ({
+  providers,
+  onClick,
+}: {
+  providers: AuthProviderId[];
+  onClick: (providerId: string) => void;
+}) => {
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-2 gap-2",
+        providers.length % 2 === 0 ? "grid-cols-2" : "grid-cols-1",
+      )}
+    >
+      {providers.map((provider) => (
+        <AuthProviderButton
+          key={provider}
+          providerId={provider}
+          onClick={() => onClick(provider)}
+        />
+      ))}
+    </div>
+  );
+};
+
+const ProviderSeparator = ({ providers }: { providers: AuthProviderId[] }) => {
+  return (
+    providers.length > 0 && (
+      <Separator className="my-3 relative">
+        <span className="bg-card text-muted-foreground text-sm px-2 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+          or continue with
+        </span>
+      </Separator>
+    )
+  );
+};

package/src/lib/authentication/ui/icons/Apple.tsx

@@ -0,0 +1,10 @@
+import type { SVGProps } from "react";
+
+const AppleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <title>{"Apple"}</title>
+    <path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701" />
+  </svg>
+);
+
+export default AppleIcon;

package/src/lib/authentication/ui/icons/Facebook.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from "react";
+
+const FacebookIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    fill="#0866FF"
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <title>{"Facebook"}</title>
+    <path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z" />
+  </svg>
+);
+
+export default FacebookIcon;

package/src/lib/authentication/ui/icons/Github.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+const GithubIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>{"GitHub"}</title>
+    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+  </svg>
+);
+
+export default GithubIcon;

package/src/lib/authentication/ui/icons/Google.tsx

@@ -0,0 +1,16 @@
+import type { SVGProps } from "react";
+
+const GoogleIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    {...props}
+  >
+    <title>{"Google"}</title>
+    <path d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z" />
+  </svg>
+);
+
+export default GoogleIcon;

package/src/lib/authentication/ui/icons/Microsoft.tsx

@@ -0,0 +1,12 @@
+import type { SVGProps } from "react";
+
+const MicrosoftIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path fill="#f25022" d="M1 1h9v9H1z" />
+    <path fill="#00a4ef" d="M1 11h9v9H1z" />
+    <path fill="#7fba00" d="M11 1h9v9h-9z" />
+    <path fill="#ffb900" d="M11 11h9v9h-9z" />
+  </svg>
+);
+
+export default MicrosoftIcon;

package/src/lib/authentication/ui/icons/X.tsx

@@ -0,0 +1,10 @@
+import type { SVGProps } from "react";
+
+const XIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <title>{"X"}</title>
+    <path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z" />
+  </svg>
+);
+
+export default XIcon;

package/src/lib/components/Autocomplete.tsx

@@ -11,12 +11,14 @@ import { Popover, PopoverContent } from "zudoku/ui/Popover.js";
 import { cn } from "../util/cn.js";
 
 type AutocompleteProps = {
-  value: string;
+  value?: string | number | readonly string[] | undefined;
   options: readonly string[];
   onChange: (e: string) => void;
+  onSelect?: (e: string) => void;
   className?: string;
   placeholder?: string;
   onEnterPress?: (e: KeyboardEvent<HTMLInputElement>) => void;
+  onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void;
   ref?: Ref<HTMLInputElement>;
   shouldFilter?: boolean;
 };
@@ -28,7 +30,9 @@ const AutocompletePopover = ({
   className,
   placeholder = "Value",
   onEnterPress,
+  onKeyDown,
   ref,
+  onSelect,
 }: AutocompleteProps) => {
   const [open, setOpen] = useState(false);
   const [dontClose, setDontClose] = useState(false);
@@ -48,7 +52,7 @@ const AutocompletePopover = ({
               ref.current = el;
             }
           }}
-          value={value}
+          value={value ? String(value) : undefined}
           placeholder={placeholder}
           className={cn("h-9 bg-transparent", className)}
           onFocus={() => setOpen(true)}
@@ -59,6 +63,10 @@ const AutocompletePopover = ({
             setOpen(false);
           }}
           onKeyDown={(e) => {
+            onKeyDown?.(e);
+
+            if (e.defaultPrevented) return;
+
             if (e.key === "Enter") {
               setOpen(false);
               inputRef.current?.blur();
@@ -91,6 +99,7 @@ const AutocompletePopover = ({
               key={enumValue}
               value={enumValue}
               onSelect={(selected) => {
+                onSelect?.(selected);
                 onChange(selected);
                 setOpen(false);
               }}

package/src/lib/components/Layout.tsx

@@ -1,5 +1,6 @@
 import { type ReactNode, Suspense, useEffect } from "react";
 import { Outlet } from "react-router";
+import { TooltipProvider } from "zudoku/ui/Tooltip.js";
 import { cn } from "../util/cn.js";
 import { useScrollToAnchor } from "../util/useScrollToAnchor.js";
 import { useScrollToTop } from "../util/useScrollToTop.js";
@@ -28,7 +29,7 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
   }, [authentication]);
 
   return (
-    <>
+    <TooltipProvider>
       <Slot.Target name="layout-before-head" />
       <Header />
       <Slot.Target name="layout-after-head" />
@@ -45,6 +46,6 @@ export const Layout = ({ children }: { children?: ReactNode }) => {
         </Suspense>
       </div>
       <Footer />
-    </>
+    </TooltipProvider>
   );
 };

package/src/lib/components/Mermaid.tsx

@@ -0,0 +1,68 @@
+import { useQuery } from "@tanstack/react-query";
+import type { MermaidConfig } from "mermaid";
+import type { ComponentProps } from "react";
+import { useId } from "react";
+import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
+import { useTheme } from "../hooks/index.js";
+import { Spinner } from "./Spinner.js";
+
+export type MermaidProps = {
+  chart: string;
+  config?: MermaidConfig;
+} & ComponentProps<"div">;
+
+let mermaidPromise: Promise<typeof import("mermaid").default> | null = null;
+
+const loadMermaid = () => {
+  if (!mermaidPromise) {
+    mermaidPromise = import("mermaid")
+      .then((mod) => mod.default)
+      .catch((error) => {
+        throw new Error(
+          "Mermaid is not installed. Please install it with: npm install mermaid",
+          { cause: error },
+        );
+      });
+  }
+  return mermaidPromise;
+};
+
+export const Mermaid = ({ chart, config, ...props }: MermaidProps) => {
+  const id = useId();
+  const theme = useTheme();
+
+  const {
+    data: svg,
+    error,
+    isPending,
+  } = useQuery({
+    queryKey: ["mermaid", chart, config, theme.resolvedTheme],
+    queryFn: async () => {
+      const mermaid = await loadMermaid();
+      mermaid.initialize({
+        theme: theme.resolvedTheme === "dark" ? "dark" : "base",
+        ...config,
+      });
+
+      const { svg } = await mermaid.render(id, chart);
+      return svg;
+    },
+    enabled: typeof window !== "undefined",
+    retry: false,
+  });
+
+  if (error)
+    return (
+      <Alert className="flex flex-col gap-2" variant="destructive">
+        <AlertTitle>Mermaid Error</AlertTitle>
+        <AlertDescription className="overflow-auto wrap-break-word whitespace-pre-wrap font-mono text-xs">
+          {error.message}
+        </AlertDescription>
+      </Alert>
+    );
+
+  if (isPending) return <Spinner />;
+
+  // biome-ignore lint/security/noDangerouslySetInnerHtml: Mermaid generates valid SVG
+  return <div {...props} dangerouslySetInnerHTML={{ __html: svg }} />;
+};

package/src/lib/components/PagefindSearchMeta.tsx

@@ -0,0 +1,14 @@
+import type { PropsWithChildren } from "react";
+
+/**
+ * Adds metadata to be captured by Pagefind for search results.
+ * Content is visually hidden but indexed by the search engine.
+ */
+export const PagefindSearchMeta = ({
+  name,
+  children,
+}: PropsWithChildren<{ name?: string }>) => (
+  <span data-pagefind-meta={name} className="sr-only">
+    {children}
+  </span>
+);

package/src/lib/components/Zudoku.tsx

@@ -74,16 +74,13 @@ const ZudokuInner = memo(
 
     zudokuContext ??= new ZudokuContext(props, queryClient);
 
-    const heads = props.plugins
-      ?.flatMap((plugin) =>
-        hasHead(plugin) ? (plugin.getHead?.({ location }) ?? []) : [],
-      )
-      // biome-ignore lint/suspicious/noArrayIndexKey: No other key is available
-      .map((entry, i) => <Helmet key={i}>{entry}</Helmet>);
+    const heads = props.plugins?.flatMap((plugin) =>
+      hasHead(plugin) ? (plugin.getHead?.({ location }) ?? []) : [],
+    );
 
     return (
       <>
-        {heads}
+        <Helmet>{heads}</Helmet>
         <StaggeredRenderContext.Provider value={staggeredValue}>
           <ZudokuProvider context={zudokuContext}>
             <RouterEventsEmitter />

package/src/lib/components/navigation/NavigationItem.tsx

@@ -1,13 +1,7 @@
 import { ExternalLinkIcon } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { NavLink, useLocation } from "react-router";
-import {
-  Tooltip,
-  TooltipArrow,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "zudoku/ui/Tooltip.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "zudoku/ui/Tooltip.js";
 import type { NavigationItem as NavigationItemType } from "../../../config/validators/NavigationSchema.js";
 import { useAuth } from "../../authentication/hook.js";
 import { cn } from "../../util/cn.js";
@@ -47,19 +41,12 @@ const TruncatedLabel = ({
         {label}
       </span>
       {isTruncated && (
-        <TooltipProvider delayDuration={500}>
-          <Tooltip disableHoverableContent>
-            <TooltipTrigger className="absolute inset-0 z-10" />
-            <TooltipContent
-              className="max-w-64 rounded-lg"
-              side="bottom"
-              align="center"
-            >
-              <TooltipArrow />
-              {label}
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
+        <Tooltip disableHoverableContent>
+          <TooltipTrigger className="absolute inset-0 z-10" />
+          <TooltipContent className="max-w-64" side="bottom" align="center">
+            {label}
+          </TooltipContent>
+        </Tooltip>
       )}
     </>
   );

package/src/lib/core/RouteGuard.tsx

@@ -38,6 +38,14 @@ export const RouteGuard = () => {
   const needsToSignIn =
     isProtectedRoute && !authCheckFn({ auth, context: zudoku });
 
+  if (isProtectedRoute && !auth.isAuthEnabled) {
+    throw new ZudokuError("Authentication is not enabled", {
+      title: "Authentication is not enabled",
+      developerHint:
+        "To use protectedRoutes you need authentication to be enabled",
+    });
+  }
+
   if (needsToSignIn && auth.isPending && typeof window !== "undefined") {
     return null;
   }
@@ -91,17 +99,9 @@ export const RouteGuard = () => {
     );
   }
 
-  if (isProtectedRoute && !auth.isAuthEnabled) {
-    throw new ZudokuError("Authentication is not enabled", {
-      title: "Authentication is not enabled",
-      developerHint:
-        "To use protectedRoutes you need authentication to be enabled",
-    });
-  }
-
   return (
     <>
-      {shouldBypass && (
+      {shouldBypass && isProtectedRoute && (
         <Helmet>
           <meta
             name="pagefind"