zudoku 0.66.1 → 0.66.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zudoku",
-  "version": "0.66.1",
+  "version": "0.66.3",
   "type": "module",
   "homepage": "https://zudoku.dev",
   "repository": {
@@ -180,11 +180,11 @@
     "@radix-ui/react-visually-hidden": "1.2.4",
     "@scalar/openapi-parser": "0.23.2",
     "@sentry/node": "10.27.0",
-    "@shikijs/engine-javascript": "3.17.0",
-    "@shikijs/langs": "3.17.0",
-    "@shikijs/rehype": "3.17.0",
-    "@shikijs/themes": "3.17.0",
-    "@shikijs/transformers": "3.17.0",
+    "@shikijs/engine-javascript": "3.19.0",
+    "@shikijs/langs": "3.19.0",
+    "@shikijs/rehype": "3.19.0",
+    "@shikijs/themes": "3.19.0",
+    "@shikijs/transformers": "3.19.0",
     "@sindresorhus/slugify": "3.0.0",
     "@stefanprobst/rehype-extract-toc": "3.0.0",
     "@tailwindcss/typography": "0.5.19",
@@ -192,18 +192,20 @@
     "@tanem/react-nprogress": "5.0.56",
     "@tanstack/react-query": "5.85.5",
     "@types/react": "19.2.7",
-    "@types/react-dom": "19.2.0",
+    "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "5.1.0",
     "@x0k/json-schema-merge": "1.0.2",
     "@zudoku/httpsnippet": "10.0.9",
     "@zudoku/react-helmet-async": "2.0.5",
     "@zuplo/mcp": "^0.0.22",
+    "bs58": "^6.0.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "cmdk": "1.1.1",
+    "dotenv": "^17.2.3",
     "embla-carousel-react": "8.6.0",
     "estree-util-value-to-estree": "3.4.1",
-    "express": "5.2.0",
+    "express": "5.2.1",
     "fast-equals": "5.2.2",
     "glob": "13.0.0",
     "glob-parent": "6.0.2",
@@ -229,7 +231,7 @@
     "posthog-node": "5.14.1",
     "react-error-boundary": "6.0.0",
     "react-hook-form": "7.66.0",
-    "react-is": "19.2.0",
+    "react-is": "19.2.1",
     "react-markdown": "10.1.0",
     "react-router": "7.8.2",
     "rehype-mdx-import-media": "1.2.0",
@@ -243,11 +245,11 @@
     "remark-mdx-frontmatter": "5.2.0",
     "rollup": "4.52.5",
     "semver": "7.7.2",
-    "shiki": "3.17.0",
+    "shiki": "3.19.0",
     "sitemap": "9.0.0",
     "strip-ansi": "7.1.2",
     "tailwind-merge": "3.3.1",
-    "tailwindcss": "4.1.16",
+    "tailwindcss": "4.1.17",
     "tw-animate-css": "1.4.0",
     "unified": "^11.0.5",
     "unist-util-visit": "5.0.0",
@@ -266,14 +268,14 @@
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.0",
     "@types/estree": "1.0.8",
-    "@types/express": "5.0.5",
+    "@types/express": "5.0.6",
     "@types/glob-parent": "5.1.3",
     "@types/har-format": "1.2.16",
     "@types/hast": "^3.0.4",
     "@types/json-schema": "7.0.15",
     "@types/mdast": "4.0.4",
     "@types/mdx": "2.0.13",
-    "@types/node": "22.13.5",
+    "@types/node": "22.19.1",
     "@types/react-is": "19.2.0",
     "@types/semver": "7.7.0",
     "@types/unist": "^3.0.3",
@@ -282,12 +284,12 @@
     "esbuild": "0.27.0",
     "happy-dom": "20.0.10",
     "mdast-util-mdx": "3.0.0",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
+    "react": "19.2.1",
+    "react-dom": "19.2.1",
     "rollup-plugin-visualizer": "6.0.5",
     "tsx": "4.20.6",
     "typescript": "5.9.3",
-    "vitest": "4.0.6"
+    "vitest": "4.0.15"
   },
   "peerDependencies": {
     "@azure/msal-browser": "^4.13.0",

package/src/lib/auth/issuer.ts

@@ -32,7 +32,7 @@ export const getIssuer = async (config: ZudokuConfig) => {
       return config.authentication.issuer;
     }
     case "firebase": {
-      return config.authentication.authDomain;
+      return `https://securetoken.google.com/${config.authentication.projectId}`;
     }
     case undefined: {
       return undefined;

package/src/lib/authentication/authentication.ts

@@ -6,6 +6,7 @@ export type AuthActionOptions = { redirectTo?: string; replace?: boolean };
 
 export interface AuthenticationPlugin {
   initialize?(context: ZudokuContext): Promise<void>;
+  onPageLoad?(): void;
   setNavigate?(navigate: NavigateFunction): void;
 
   signUp(
@@ -18,12 +19,17 @@ export interface AuthenticationPlugin {
   ): Promise<void>;
 
   signOut({ navigate }: AuthActionContext): Promise<void>;
+
+  signRequest(request: Request): Promise<Request>;
+  requestEmailVerification?(
+    { navigate }: AuthActionContext,
+    options?: AuthActionOptions,
+  ): Promise<void>;
+
   /**
    * @deprecated use signRequest instead
    */
   getAccessToken?(): Promise<string>;
-  onPageLoad?(): void;
-  signRequest(request: Request): Promise<Request>;
 }
 
 export type AuthenticationProviderInitializer<TConfig> = (

package/src/lib/authentication/hook.ts

@@ -52,5 +52,21 @@ export const useAuth = () => {
         },
       );
     },
+    supportsEmailVerification:
+      typeof authentication?.requestEmailVerification === "function",
+
+    requestEmailVerification: async (options?: AuthActionOptions) => {
+      if (!isAuthEnabled) {
+        throw new Error("Authentication is not enabled.");
+      }
+
+      await authentication.requestEmailVerification?.(
+        { navigate },
+        {
+          ...options,
+          redirectTo: options?.redirectTo ?? window.location.href,
+        },
+      );
+    },
   };
 };

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

@@ -3,12 +3,15 @@ import {
   type Auth,
   createUserWithEmailAndPassword,
   getAuth,
+  sendEmailVerification,
+  sendPasswordResetEmail,
   signInWithEmailAndPassword,
   signInWithPopup,
   signOut,
   type User,
 } from "firebase/auth";
 import type { FirebaseAuthenticationConfig } from "../../../config/config.js";
+import { ZudokuError } from "../../util/invariant.js";
 import { CoreAuthenticationPlugin } from "../AuthenticationPlugin.js";
 import type {
   AuthActionContext,
@@ -19,7 +22,12 @@ import type {
 import { SignOut } from "../components/SignOut.js";
 import { AuthorizationError } from "../errors.js";
 import { useAuthState } from "../state.js";
-import { ZudokuSignInUi, ZudokuSignUpUi } from "../ui/ZudokuAuthUi.js";
+import { EmailVerificationUi } from "../ui/EmailVerificationUi.js";
+import {
+  ZudokuPasswordResetUi,
+  ZudokuSignInUi,
+  ZudokuSignUpUi,
+} from "../ui/ZudokuAuthUi.js";
 
 class FirebaseAuthenticationProvider
   extends CoreAuthenticationPlugin
@@ -28,6 +36,7 @@ class FirebaseAuthenticationProvider
   private readonly app: FirebaseApp;
   private readonly auth: Auth;
   private readonly providers: string[];
+  private readonly enableUsernamePassword: boolean;
 
   constructor(config: FirebaseAuthenticationConfig) {
     super();
@@ -42,7 +51,13 @@ class FirebaseAuthenticationProvider
       measurementId: config.measurementId,
     });
     this.auth = getAuth(this.app);
-    this.providers = config.providers ?? [];
+    this.providers = config.providers?.filter((p) => p !== "password") ?? [];
+    this.enableUsernamePassword =
+      config.providers?.includes("password") ?? false;
+  }
+
+  async initialize() {
+    await this.auth.authStateReady();
   }
 
   async signRequest(request: Request): Promise<Request> {
@@ -76,13 +91,77 @@ class FirebaseAuthenticationProvider
     );
   };
 
+  requestEmailVerification = async (
+    { navigate }: AuthActionContext,
+    { redirectTo }: AuthActionOptions,
+  ) => {
+    if (!this.auth.currentUser) {
+      throw new ZudokuError("User is not authenticated", {
+        title: "User not authenticated",
+      });
+    }
+
+    await sendEmailVerification(this.auth.currentUser);
+    void navigate(
+      redirectTo
+        ? `/verify-email?redirectTo=${encodeURIComponent(redirectTo)}`
+        : `/verify-email`,
+    );
+  };
+
   getRoutes = () => {
     return [
+      {
+        path: "/verify-email",
+        element: (
+          <EmailVerificationUi
+            onResendVerification={async () => {
+              if (!this.auth.currentUser) {
+                throw new ZudokuError("User is not authenticated", {
+                  title: "User not authenticated",
+                });
+              }
+              await sendEmailVerification(this.auth.currentUser);
+            }}
+            onCheckVerification={async () => {
+              if (!this.auth.currentUser) {
+                throw new ZudokuError("User is not authenticated", {
+                  title: "User not authenticated",
+                });
+              }
+              await this.auth.currentUser.reload();
+              const isVerified = this.auth.currentUser.emailVerified;
+
+              if (isVerified) {
+                await this.auth.currentUser.getIdToken(true);
+                await this.setUserLoggedIn(this.auth.currentUser);
+              }
+
+              return isVerified;
+            }}
+          />
+        ),
+      },
+      {
+        path: "/reset-password",
+        element: (
+          <ZudokuPasswordResetUi
+            onPasswordReset={async (email: string) => {
+              try {
+                await sendPasswordResetEmail(this.auth, email);
+              } catch (error) {
+                throw Error(getFirebaseErrorMessage(error), { cause: error });
+              }
+            }}
+          />
+        ),
+      },
       {
         path: "/signin",
         element: (
           <ZudokuSignInUi
             providers={this.providers}
+            enableUsernamePassword={this.enableUsernamePassword}
             onOAuthSignIn={async (providerId: string) => {
               useAuthState.setState({ isPending: true });
               const provider = await getProviderForId(providerId);
@@ -109,7 +188,13 @@ class FirebaseAuthenticationProvider
               password: string,
             ) => {
               try {
-                await signInWithEmailAndPassword(this.auth, email, password);
+                useAuthState.setState({ isPending: false });
+                const result = await signInWithEmailAndPassword(
+                  this.auth,
+                  email,
+                  password,
+                );
+                await this.setUserLoggedIn(result.user);
               } catch (error) {
                 throw Error(getFirebaseErrorMessage(error), { cause: error });
               }
@@ -122,6 +207,7 @@ class FirebaseAuthenticationProvider
         element: (
           <ZudokuSignUpUi
             providers={this.providers}
+            enableUsernamePassword={this.enableUsernamePassword}
             onOAuthSignUp={async (providerId: string) => {
               const provider = await getProviderForId(providerId);
               if (!provider) {
@@ -135,7 +221,13 @@ class FirebaseAuthenticationProvider
               email: string,
               password: string,
             ) => {
-              await createUserWithEmailAndPassword(this.auth, email, password);
+              useAuthState.setState({ isPending: true });
+              const createUser = await createUserWithEmailAndPassword(
+                this.auth,
+                email,
+                password,
+              );
+              await this.setUserLoggedIn(createUser.user);
             }}
           />
         ),
@@ -162,13 +254,13 @@ class FirebaseAuthenticationProvider
     const user = this.auth.currentUser;
 
     if (user) {
-      await this.updateUserState(user);
+      await this.setUserLoggedIn(user);
     } else {
       useAuthState.setState({ isPending: false });
     }
   };
 
-  private async updateUserState(user: User) {
+  private async setUserLoggedIn(user: User) {
     useAuthState.getState().setLoggedIn({
       profile: {
         sub: user.uid,

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

@@ -0,0 +1,129 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { CheckIcon, MailCheck, RefreshCw } from "lucide-react";
+import { Navigate, useSearchParams } from "react-router";
+import { ActionButton } from "zudoku/ui/ActionButton.js";
+import { Alert, AlertDescription, AlertTitle } from "zudoku/ui/Alert.js";
+import { Button } from "zudoku/ui/Button.js";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "zudoku/ui/Card.js";
+import createVariantComponent from "../../util/createVariantComponent.js";
+import { getRelativeRedirectUrl } from "../utils/relativeRedirectUrl.js";
+
+export const EmailVerificationUi = ({
+  onResendVerification,
+  onCheckVerification,
+}: {
+  onResendVerification: () => Promise<void>;
+  onCheckVerification: () => Promise<boolean>;
+}) => {
+  const [searchParams] = useSearchParams();
+  const redirectTo = searchParams.get("redirectTo");
+  const relativeRedirectTo = getRelativeRedirectUrl(redirectTo);
+
+  const resendMutation = useMutation({
+    mutationFn: async () => {
+      await onResendVerification();
+    },
+  });
+
+  const checkVerificationMutation = useQuery({
+    queryKey: ["check-verification"],
+    queryFn: async () => {
+      const isVerified = await onCheckVerification();
+      return isVerified;
+    },
+  });
+
+  const error = resendMutation.error ?? checkVerificationMutation.error ?? null;
+
+  return (
+    <AuthCard>
+      {checkVerificationMutation.data === true && (
+        <Navigate to={relativeRedirectTo} />
+      )}
+      <CardHeader className="text-center">
+        <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-primary/10">
+          <MailCheck className="h-8 w-8 text-primary" />
+        </div>
+        <CardTitle>Verify your email</CardTitle>
+        <CardDescription>We've sent a verification link</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-4">
+        {error && (
+          <Alert variant="destructive">
+            <AlertTitle>Error</AlertTitle>
+            <AlertDescription>{error?.message}</AlertDescription>
+          </Alert>
+        )}
+
+        {resendMutation.isSuccess && (
+          <Alert>
+            <AlertTitle>Email sent</AlertTitle>
+            <AlertDescription>
+              A new verification email has been sent. Please check your inbox.
+            </AlertDescription>
+          </Alert>
+        )}
+
+        {checkVerificationMutation.isSuccess &&
+          !checkVerificationMutation.data && (
+            <Alert>
+              <AlertDescription>
+                {checkVerificationMutation.isFetching
+                  ? "Checking verification..."
+                  : "Your email hasn't been verified yet. Please check your inbox and click the verification link."}
+              </AlertDescription>
+            </Alert>
+          )}
+
+        <div className="space-y-4">
+          <ActionButton
+            onClick={() => void checkVerificationMutation.refetch()}
+            isPending={checkVerificationMutation.isFetching}
+            className="w-full"
+          >
+            <div className="flex items-center gap-2">
+              <CheckIcon className="h-4 w-4" /> Continue
+            </div>
+          </ActionButton>
+
+          <div className="relative">
+            <div className="absolute inset-0 flex items-center">
+              <span className="w-full border-t" />
+            </div>
+            <div className="relative flex justify-center text-sm">
+              <span className="bg-card px-2 text-muted-foreground">
+                Didn't receive the email?
+              </span>
+            </div>
+          </div>
+
+          <Button
+            variant="outline"
+            onClick={() => void resendMutation.mutate()}
+            disabled={resendMutation.isPending}
+            className="w-full gap-2"
+          >
+            {resendMutation.isPending ? (
+              <RefreshCw className="h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="h-4 w-4" />
+            )}
+            Resend verification email
+          </Button>
+        </div>
+
+        <p className="text-center text-xs text-muted-foreground">
+          Make sure to check your spam folder if you don't see the email.
+        </p>
+      </CardContent>
+    </AuthCard>
+  );
+};
+
+const AuthCard = createVariantComponent(Card, "max-w-md w-full mt-10 mx-auto");