@carlonicora/nextjs-jsonapi 1.40.1 → 1.41.1

package/src/core/index.ts

@@ -30,6 +30,20 @@ export * from "../permissions";
 
 // Feature data classes, interfaces, and modules
 export * from "../features/auth/auth.module";
+export * from "../features/auth/totp-authenticator.module";
+export * from "../features/auth/totp-setup.module";
+export * from "../features/auth/totp-verify.module";
+export * from "../features/auth/totp-verify-login.module";
+export * from "../features/auth/passkey.module";
+export * from "../features/auth/passkey-registration-options.module";
+export * from "../features/auth/passkey-registration-verify.module";
+export * from "../features/auth/passkey-rename.module";
+export * from "../features/auth/passkey-verify-login.module";
+export * from "../features/auth/passkey-authentication-options.module";
+export * from "../features/auth/two-factor-enable.module";
+export * from "../features/auth/two-factor-challenge.module";
+export * from "../features/auth/two-factor-status.module";
+export * from "../features/auth/backup-code-verify.module";
 export * from "../features/auth/data";
 export * from "../features/auth/enums";
 export * from "../features/billing/data";

package/src/core/registry/DataClassRegistry.ts

@@ -2,6 +2,10 @@ import { ApiDataInterface } from "../interfaces/ApiDataInterface";
 import { ApiRequestDataTypeInterface } from "../interfaces/ApiRequestDataTypeInterface";
 
 export class DataClassRegistry {
+  // Use Map with string key (module.name) for reliable lookup
+  // String keys are stable across HMR and module re-evaluations
+  // Note: WeakMap with object identity was tried but fails during Next.js navigation
+  // because module re-evaluation creates new object instances with different identity
   private static _map = new Map<string, { new (): ApiDataInterface }>();
 
   public static registerObjectClass(
@@ -19,7 +23,9 @@ export class DataClassRegistry {
   } {
     const response = this._map.get(classKey.name);
     if (!response) {
-      throw new Error(`Class not registered for key: ${typeof classKey === "string" ? classKey : classKey.name}`);
+      throw new Error(
+        `Class not registered for key: ${typeof classKey === "string" ? classKey : classKey.name}. Ensure bootstrap() was called.`,
+      );
     }
 
     return response;

package/src/core/registry/ModuleRegistry.ts

@@ -32,6 +32,21 @@ export interface FoundationModuleDefinitions {
   // Waitlist modules
   Waitlist: ModuleWithPermissions;
   WaitlistStats: ModuleWithPermissions;
+  // Two-factor authentication modules
+  TotpAuthenticator: ModuleWithPermissions;
+  TotpSetup: ModuleWithPermissions;
+  TotpVerify: ModuleWithPermissions;
+  TotpVerifyLogin: ModuleWithPermissions;
+  Passkey: ModuleWithPermissions;
+  PasskeyRegistrationOptions: ModuleWithPermissions;
+  PasskeyRegistrationVerify: ModuleWithPermissions;
+  PasskeyRename: ModuleWithPermissions;
+  PasskeyVerifyLogin: ModuleWithPermissions;
+  PasskeyAuthenticationOptions: ModuleWithPermissions;
+  TwoFactorEnable: ModuleWithPermissions;
+  TwoFactorChallenge: ModuleWithPermissions;
+  TwoFactorStatus: ModuleWithPermissions;
+  BackupCodeVerify: ModuleWithPermissions;
 }
 
 // App-specific modules - apps will augment this interface ONLY

package/src/features/auth/backup-code-verify.module.ts

@@ -0,0 +1,9 @@
+import { ModuleFactory } from "../../permissions";
+import { BackupCodeVerify } from "./data/backup-code-verify";
+
+export const BackupCodeVerifyModule = (factory: ModuleFactory) =>
+  factory({
+    name: "backup-codes",
+    pageUrl: "/backup-codes",
+    model: BackupCodeVerify,
+  });

package/src/features/auth/components/containers/SecurityContainer.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { TwoFactorSettings } from "../two-factor/TwoFactorSettings";
+
+export function SecurityContainer() {
+  return (
+    <div className="space-y-6">
+      <TwoFactorSettings />
+    </div>
+  );
+}

package/src/features/auth/components/containers/index.ts

@@ -1 +1,2 @@
 export * from "./AuthContainer";
+export * from "./SecurityContainer";

package/src/features/auth/components/forms/Login.tsx

@@ -24,13 +24,14 @@ import { UserInterface } from "../../../user";
 import { useCurrentUserContext } from "../../../user/contexts";
 import { useAuthContext } from "../../contexts";
 import { AuthService } from "../../data/auth.service";
+import { TwoFactorChallengeInterface } from "../../data/two-factor-challenge.interface";
 import { AuthComponent } from "../../enums";
 import { GoogleSignInButton } from "../buttons/GoogleSignInButton";
 
 export function Login() {
   const t = useTranslations();
   const { setUser } = useCurrentUserContext<UserInterface>();
-  const { setComponentType } = useAuthContext();
+  const { setComponentType, setPendingTwoFactor } = useAuthContext();
   const generateUrl = usePageUrlGenerator();
   const i18nRouter = useI18nRouter();
   const nativeRouter = useRouter(); // For URLs that already include locale
@@ -54,11 +55,21 @@ export function Login() {
 
   const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = async (values: z.infer<typeof formSchema>) => {
     try {
-      const user: UserInterface = (await AuthService.login({
+      const response = await AuthService.login({
         email: values.email,
         password: values.password,
-      })) as UserInterface;
+      });
+
+      // Check if 2FA is required (response is TwoFactorChallengeInterface)
+      if ("pendingToken" in response) {
+        const challenge = response as TwoFactorChallengeInterface;
+        setPendingTwoFactor(challenge);
+        setComponentType(AuthComponent.TwoFactorChallenge);
+        return;
+      }
 
+      // Normal login flow
+      const user = response as UserInterface;
       setUser(user);
 
       // Redirect to callback URL if present, otherwise go to home
@@ -70,6 +81,7 @@ export function Login() {
         i18nRouter.replace(generateUrl({ page: `/` }));
       }
     } catch (e) {
+      console.error("[Login] Login error:", e);
       errorToast({
         title: t(`common.errors.error`),
         error: e,

package/src/features/auth/components/forms/Register.tsx

@@ -79,30 +79,22 @@ export default function Register() {
 
   useEffect(() => {
     async function validateInvite() {
-      console.log("[Register] validateInvite called. registrationMode:", registrationMode, "inviteCode:", inviteCode);
-
       if (registrationMode !== "waitlist" || !inviteCode) {
-        console.log("[Register] Skipping validation - not in waitlist mode or no invite code");
         return;
       }
 
       setIsValidatingInvite(true);
       try {
-        console.log("[Register] Calling WaitlistService.validateInvite...");
         const result = await WaitlistService.validateInvite(inviteCode);
-        console.log("[Register] Validation result:", JSON.stringify(result));
 
         if (result && result.valid) {
-          console.log("[Register] Invite valid! Email:", result.email);
           setInviteValidated(true);
           form.setValue("email", result.email);
         } else {
           const errorMsg = result ? t("waitlist.invite.error_expired") : t("waitlist.invite.error_invalid");
-          console.log("[Register] Invite invalid. result:", result, "errorMsg:", errorMsg);
           setInviteError(errorMsg);
         }
-      } catch (error) {
-        console.error("[Register] Validation exception:", error);
+      } catch (_error) {
         setInviteError(t("waitlist.invite.error_validation_failed"));
       } finally {
         setIsValidatingInvite(false);

package/src/features/auth/components/forms/TwoFactorChallenge.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useState } from "react";
+import { v4 } from "uuid";
+import { errorToast } from "../../../../components";
+import { useI18nRouter, usePageUrlGenerator } from "../../../../hooks";
+import {
+  Button,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Input,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../../../shadcnui";
+import { UserInterface } from "../../../user";
+import { useCurrentUserContext } from "../../../user/contexts";
+import { useAuthContext } from "../../contexts";
+import { AuthInterface } from "../../data/auth.interface";
+import { TwoFactorService } from "../../data/two-factor.service";
+import { PasskeyButton } from "../two-factor/PasskeyButton";
+import { TotpInput } from "../two-factor/TotpInput";
+
+export function TwoFactorChallenge() {
+  const t = useTranslations();
+  const { setUser } = useCurrentUserContext<UserInterface>();
+  const { pendingTwoFactor, setPendingTwoFactor } = useAuthContext();
+  const generateUrl = usePageUrlGenerator();
+  const i18nRouter = useI18nRouter();
+  const nativeRouter = useRouter();
+  const searchParams = useSearchParams();
+  const callbackUrl = searchParams.get("callbackUrl");
+
+  const [isVerifying, setIsVerifying] = useState(false);
+  const [totpError, setTotpError] = useState<string | undefined>();
+  const [backupCode, setBackupCode] = useState("");
+  const [backupError, setBackupError] = useState<string | undefined>();
+
+  if (!pendingTwoFactor) {
+    return null;
+  }
+
+  const handleSuccess = (auth: AuthInterface) => {
+    setPendingTwoFactor(undefined);
+    setUser(auth.user);
+
+    if (callbackUrl) {
+      nativeRouter.replace(callbackUrl);
+    } else {
+      i18nRouter.replace(generateUrl({ page: "/" }));
+    }
+  };
+
+  const handleTotpComplete = async (code: string) => {
+    setIsVerifying(true);
+    setTotpError(undefined);
+
+    try {
+      const auth = await TwoFactorService.verifyTotp({
+        id: v4(),
+        pendingToken: pendingTwoFactor.pendingToken,
+        code,
+      });
+      handleSuccess(auth);
+    } catch (error) {
+      setTotpError(t("auth.two_factor.invalid_code"));
+      errorToast({
+        title: t("common.errors.error"),
+        error,
+      });
+    } finally {
+      setIsVerifying(false);
+    }
+  };
+
+  const handlePasskeyError = (error: Error) => {
+    errorToast({
+      title: t("common.errors.error"),
+      error,
+    });
+  };
+
+  const handleBackupSubmit = async () => {
+    if (backupCode.length < 8) {
+      setBackupError(t("auth.two_factor.invalid_backup_code"));
+      return;
+    }
+
+    setIsVerifying(true);
+    setBackupError(undefined);
+
+    try {
+      const auth = await TwoFactorService.verifyBackupCode({
+        id: v4(),
+        pendingToken: pendingTwoFactor.pendingToken,
+        code: backupCode,
+      });
+      handleSuccess(auth);
+    } catch (error) {
+      setBackupError(t("auth.two_factor.invalid_backup_code"));
+      errorToast({
+        title: t("common.errors.error"),
+        error,
+      });
+    } finally {
+      setIsVerifying(false);
+    }
+  };
+
+  const availableMethods = pendingTwoFactor.availableMethods;
+  const hasTotp = availableMethods.includes("totp");
+  const hasPasskey = availableMethods.includes("passkey");
+  const hasBackup = availableMethods.includes("backup");
+
+  return (
+    <>
+      <CardHeader data-testid="page-2fa-challenge">
+        <CardTitle className="text-primary text-2xl">{t("auth.two_factor.verification_required")}</CardTitle>
+        <CardDescription>{t("auth.two_factor.enter_verification_code")}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Tabs defaultValue={hasTotp ? "totp" : hasPasskey ? "passkey" : "backup"}>
+          <TabsList className="grid w-full grid-cols-3">
+            {hasTotp && (
+              <TabsTrigger value="totp" data-testid="tab-totp">
+                {t("auth.two_factor.authenticator")}
+              </TabsTrigger>
+            )}
+            {hasPasskey && (
+              <TabsTrigger value="passkey" data-testid="tab-passkey">
+                {t("auth.two_factor.passkey")}
+              </TabsTrigger>
+            )}
+            {hasBackup && (
+              <TabsTrigger value="backup" data-testid="tab-backup">
+                {t("auth.two_factor.backup_code")}
+              </TabsTrigger>
+            )}
+          </TabsList>
+
+          {hasTotp && (
+            <TabsContent value="totp" className="mt-6">
+              <div className="flex flex-col items-center gap-4">
+                <p className="text-sm text-muted-foreground text-center">
+                  {t("auth.two_factor.enter_authenticator_code")}
+                </p>
+                <TotpInput onComplete={handleTotpComplete} disabled={isVerifying} error={totpError} />
+              </div>
+            </TabsContent>
+          )}
+
+          {hasPasskey && (
+            <TabsContent value="passkey" className="mt-6">
+              <div className="flex flex-col items-center gap-4">
+                <p className="text-sm text-muted-foreground text-center">
+                  {t("auth.two_factor.use_passkey_description")}
+                </p>
+                <PasskeyButton
+                  pendingToken={pendingTwoFactor.pendingToken}
+                  onSuccess={handleSuccess}
+                  onError={handlePasskeyError}
+                  disabled={isVerifying}
+                />
+              </div>
+            </TabsContent>
+          )}
+
+          {hasBackup && (
+            <TabsContent value="backup" className="mt-6">
+              <div className="flex flex-col items-center gap-4">
+                <p className="text-sm text-muted-foreground text-center">{t("auth.two_factor.enter_backup_code")}</p>
+                <Input
+                  type="text"
+                  value={backupCode}
+                  onChange={(e) => setBackupCode(e.target.value.toUpperCase())}
+                  placeholder="XXXXXXXX"
+                  maxLength={8}
+                  className={`w-48 text-center font-mono uppercase ${backupError ? "border-destructive" : ""}`}
+                  disabled={isVerifying}
+                  data-testid="backup-code-input"
+                />
+                {backupError && <p className="text-sm text-destructive">{backupError}</p>}
+                <Button
+                  onClick={handleBackupSubmit}
+                  disabled={isVerifying || backupCode.length < 8}
+                  data-testid="backup-code-submit"
+                >
+                  {t("auth.two_factor.verify")}
+                </Button>
+              </div>
+            </TabsContent>
+          )}
+        </Tabs>
+      </CardContent>
+    </>
+  );
+}

package/src/features/auth/components/forms/index.ts

@@ -7,3 +7,4 @@ export * from "./Logout";
 export * from "./RefreshUser";
 export * from "./Register";
 export * from "./ResetPassword";
+export * from "./TwoFactorChallenge";

package/src/features/auth/components/index.ts

@@ -2,3 +2,4 @@ export * from "./containers";
 export * from "./details";
 export * from "./forms";
 export * from "./GdprConsentSection";
+export * from "./two-factor";

package/src/features/auth/components/two-factor/BackupCodesDialog.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import { Copy, Download, RefreshCw } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { errorToast } from "../../../../components/errors/errorToast";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../../shadcnui";
+import { showToast } from "../../../../utils/toast";
+import { TwoFactorService } from "../../data/two-factor.service";
+
+interface BackupCodesDialogProps {
+  remainingCodes: number;
+  onRegenerate: () => void;
+  trigger?: React.ReactElement;
+}
+
+export function BackupCodesDialog({ remainingCodes, onRegenerate, trigger }: BackupCodesDialogProps) {
+  const t = useTranslations();
+  const [open, setOpen] = useState(false);
+  const [codes, setCodes] = useState<string[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [showCodes, setShowCodes] = useState(false);
+
+  const handleGenerate = async () => {
+    setIsLoading(true);
+    try {
+      const newCodes = await TwoFactorService.generateBackupCodes();
+      setCodes(newCodes);
+      setShowCodes(true);
+      onRegenerate();
+    } catch (error) {
+      errorToast({ title: t("common.errors.error"), error });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleCopyAll = async () => {
+    const text = codes.join("\n");
+    await navigator.clipboard.writeText(text);
+    showToast(t("auth.two_factor.codes_copied"));
+  };
+
+  const handleDownload = () => {
+    const text = `Backup Codes\n\n${codes.join("\n")}\n\nKeep these codes safe. Each code can only be used once.`;
+    const blob = new Blob([text], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "backup-codes.txt";
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+    if (!newOpen) {
+      setCodes([]);
+      setShowCodes(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      {trigger ? (
+        <DialogTrigger render={trigger} />
+      ) : (
+        <DialogTrigger render={<Button variant="outline">{t("auth.two_factor.manage_backup_codes")}</Button>} />
+      )}
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("auth.two_factor.backup_codes")}</DialogTitle>
+          <DialogDescription>
+            {showCodes ? t("auth.two_factor.save_backup_codes") : t("auth.two_factor.backup_codes_description")}
+          </DialogDescription>
+        </DialogHeader>
+
+        {!showCodes ? (
+          <div className="flex flex-col gap-4">
+            <p className="text-sm">
+              {t("auth.two_factor.remaining_codes")}: <strong>{remainingCodes}</strong>
+            </p>
+            <AlertDialog>
+              <AlertDialogTrigger
+                render={
+                  <Button variant="outline" className="w-full">
+                    <RefreshCw className="h-4 w-4 mr-2" />
+                    {t("auth.two_factor.generate_new_codes")}
+                  </Button>
+                }
+              />
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>{t("auth.two_factor.regenerate_codes")}</AlertDialogTitle>
+                  <AlertDialogDescription>{t("auth.two_factor.regenerate_codes_warning")}</AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>{t("common.buttons.cancel")}</AlertDialogCancel>
+                  <AlertDialogAction onClick={handleGenerate} disabled={isLoading}>
+                    {t("auth.two_factor.generate")}
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-4">
+            <div className="grid grid-cols-2 gap-2 p-4 bg-muted rounded-lg font-mono text-sm">
+              {codes.map((code, index) => (
+                <div key={index} className="text-center" data-testid={`backup-code-${index}`}>
+                  {code}
+                </div>
+              ))}
+            </div>
+            <div className="flex gap-2">
+              <Button variant="outline" className="flex-1" onClick={handleCopyAll}>
+                <Copy className="h-4 w-4 mr-2" />
+                {t("auth.two_factor.copy_all")}
+              </Button>
+              <Button variant="outline" className="flex-1" onClick={handleDownload}>
+                <Download className="h-4 w-4 mr-2" />
+                {t("auth.two_factor.download")}
+              </Button>
+            </div>
+            <p className="text-xs text-destructive text-center">{t("auth.two_factor.codes_shown_once")}</p>
+          </div>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/features/auth/components/two-factor/DisableTwoFactorDialog.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { errorToast } from "../../../../components/errors/errorToast";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../../../shadcnui";
+import { showToast } from "../../../../utils/toast";
+import { TwoFactorService } from "../../data/two-factor.service";
+import { TotpInput } from "./TotpInput";
+
+interface DisableTwoFactorDialogProps {
+  onSuccess: () => void;
+  trigger?: React.ReactElement;
+}
+
+export function DisableTwoFactorDialog({ onSuccess, trigger }: DisableTwoFactorDialogProps) {
+  const t = useTranslations();
+  const [open, setOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | undefined>();
+
+  const handleVerify = async (code: string) => {
+    setIsLoading(true);
+    setError(undefined);
+
+    try {
+      await TwoFactorService.disable({ code });
+      showToast(t("auth.two_factor.disabled_success"));
+      setOpen(false);
+      onSuccess();
+    } catch (err) {
+      setError(t("auth.two_factor.invalid_code"));
+      errorToast({ title: t("common.errors.error"), error: err });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
+    if (!newOpen) {
+      setError(undefined);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      {trigger ? (
+        <DialogTrigger render={trigger} />
+      ) : (
+        <DialogTrigger render={<Button variant="destructive">{t("auth.two_factor.disable")}</Button>} />
+      )}
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>{t("auth.two_factor.disable_2fa")}</DialogTitle>
+          <DialogDescription>{t("auth.two_factor.disable_warning")}</DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col items-center gap-4">
+          <p className="text-sm text-muted-foreground text-center">{t("auth.two_factor.enter_code_to_disable")}</p>
+          <TotpInput onComplete={handleVerify} disabled={isLoading} error={error} />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/features/auth/components/two-factor/PasskeyButton.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { startAuthentication } from "@simplewebauthn/browser";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+import { v4 } from "uuid";
+import { Button } from "../../../../shadcnui";
+import { TwoFactorService } from "../../data/two-factor.service";
+import { AuthInterface } from "../../data/auth.interface";
+
+interface PasskeyButtonProps {
+  pendingToken: string;
+  onSuccess: (auth: AuthInterface) => void;
+  onError: (error: Error) => void;
+  disabled?: boolean;
+}
+
+export function PasskeyButton({ pendingToken, onSuccess, onError, disabled = false }: PasskeyButtonProps) {
+  const t = useTranslations();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleClick = async () => {
+    setIsLoading(true);
+    try {
+      // 1. Get authentication options from backend
+      const { pendingId, options } = await TwoFactorService.getPasskeyAuthOptions({ pendingToken });
+
+      // 2. Trigger browser WebAuthn dialog
+      const credential = await startAuthentication({ optionsJSON: options });
+
+      // 3. Verify with backend
+      const auth = await TwoFactorService.verifyPasskey({
+        id: v4(),
+        pendingToken,
+        pendingId,
+        credential,
+      });
+
+      onSuccess(auth);
+    } catch (error) {
+      onError(error instanceof Error ? error : new Error("Passkey authentication failed"));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      onClick={handleClick}
+      disabled={disabled || isLoading}
+      className="w-full"
+      data-testid="passkey-auth-button"
+    >
+      {isLoading ? t("auth.two_factor.verifying") : t("auth.two_factor.use_passkey")}
+    </Button>
+  );
+}