@carlonicora/nextjs-jsonapi 1.40.1 → 1.41.0

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

@@ -0,0 +1,175 @@
+"use client";
+
+import { ShieldAlert, ShieldCheck } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useCallback, useEffect, useState } from "react";
+import { v4 } from "uuid";
+import { errorToast } from "../../../../components";
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Separator } from "../../../../shadcnui";
+import { showToast } from "../../../../utils/toast";
+import { PasskeyInterface } from "../../data/passkey.interface";
+import { TotpAuthenticatorInterface } from "../../data/totp-authenticator.interface";
+import { TwoFactorStatusInterface } from "../../data/two-factor-status.interface";
+import { TwoFactorService } from "../../data/two-factor.service";
+import { BackupCodesDialog } from "./BackupCodesDialog";
+import { DisableTwoFactorDialog } from "./DisableTwoFactorDialog";
+import { PasskeyList } from "./PasskeyList";
+import { PasskeySetupDialog } from "./PasskeySetupDialog";
+import { TotpAuthenticatorList } from "./TotpAuthenticatorList";
+import { TotpSetupDialog } from "./TotpSetupDialog";
+
+export function TwoFactorSettings() {
+  const t = useTranslations();
+  const [status, setStatus] = useState<TwoFactorStatusInterface | null>(null);
+  const [authenticators, setAuthenticators] = useState<TotpAuthenticatorInterface[]>([]);
+  const [passkeys, setPasskeys] = useState<PasskeyInterface[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isEnabling, setIsEnabling] = useState(false);
+  const [passkeyDialogOpen, setPasskeyDialogOpen] = useState(false);
+
+  const loadStatus = useCallback(async () => {
+    try {
+      // Load status and lists in parallel
+      const [statusData, authenticatorsList, passkeysList] = await Promise.all([
+        TwoFactorService.getStatus(),
+        TwoFactorService.listTotpAuthenticators(),
+        TwoFactorService.listPasskeys(),
+      ]);
+      setStatus(statusData);
+      setAuthenticators(authenticatorsList);
+      setPasskeys(passkeysList);
+    } catch (error) {
+      errorToast({ title: t("common.errors.error"), error });
+    } finally {
+      setIsLoading(false);
+    }
+  }, [t]);
+
+  useEffect(() => {
+    loadStatus();
+  }, [loadStatus]);
+
+  const handleRefresh = () => {
+    loadStatus();
+  };
+
+  const handleEnable2FA = async () => {
+    setIsEnabling(true);
+    try {
+      const preferredMethod = authenticators.length > 0 ? "totp" : "passkey";
+      await TwoFactorService.enable({ id: v4(), preferredMethod });
+      showToast(t("common.success"), { description: t("auth.two_factor.enabled_success") });
+      await loadStatus();
+    } catch (error) {
+      errorToast({ title: t("common.errors.error"), error });
+    } finally {
+      setIsEnabling(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <Card>
+        <CardContent className="flex items-center justify-center py-8">
+          <p className="text-muted-foreground">{t("common.loading")}</p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const isEnabled = status?.isEnabled ?? false;
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          {isEnabled ? (
+            <ShieldCheck className="h-6 w-6 text-green-600" />
+          ) : (
+            <ShieldAlert className="h-6 w-6 text-yellow-600" />
+          )}
+          <div>
+            <CardTitle>{t("auth.two_factor.title")}</CardTitle>
+            <CardDescription>
+              {isEnabled ? t("auth.two_factor.enabled_description") : t("auth.two_factor.disabled_description")}
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {/* Authenticator Apps Section */}
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="font-medium">{t("auth.two_factor.authenticator_apps")}</h3>
+              <p className="text-sm text-muted-foreground">{t("auth.two_factor.authenticator_apps_description")}</p>
+            </div>
+            <TotpSetupDialog onSuccess={handleRefresh} />
+          </div>
+          <TotpAuthenticatorList authenticators={authenticators} onDelete={handleRefresh} />
+        </div>
+
+        <Separator />
+
+        {/* Passkeys Section */}
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="font-medium">{t("auth.two_factor.passkeys")}</h3>
+              <p className="text-sm text-muted-foreground">{t("auth.two_factor.passkeys_description")}</p>
+            </div>
+            <Button variant="outline" onClick={() => setPasskeyDialogOpen(true)}>
+              {t("auth.two_factor.add_passkey")}
+            </Button>
+          </div>
+          <PasskeyList passkeys={passkeys} onRefresh={handleRefresh} />
+        </div>
+
+        <PasskeySetupDialog open={passkeyDialogOpen} onOpenChange={setPasskeyDialogOpen} onSuccess={handleRefresh} />
+
+        <Separator />
+
+        {/* Backup Codes Section */}
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="font-medium">{t("auth.two_factor.backup_codes")}</h3>
+              <p className="text-sm text-muted-foreground">{t("auth.two_factor.backup_codes_description")}</p>
+            </div>
+            <BackupCodesDialog remainingCodes={status?.backupCodesCount ?? 0} onRegenerate={handleRefresh} />
+          </div>
+        </div>
+
+        {/* Enable 2FA - shown when not enabled but methods exist */}
+        {!isEnabled && (authenticators.length > 0 || passkeys.length > 0) && (
+          <>
+            <Separator />
+            <div className="flex items-center justify-between">
+              <div>
+                <h3 className="font-medium text-green-600">{t("auth.two_factor.enable_2fa")}</h3>
+                <p className="text-sm text-muted-foreground">{t("auth.two_factor.enable_description")}</p>
+              </div>
+              <Button onClick={handleEnable2FA} disabled={isEnabling}>
+                {isEnabling ? t("common.loading") : t("auth.two_factor.enable_button")}
+              </Button>
+            </div>
+          </>
+        )}
+
+        {/* Disable 2FA */}
+        {isEnabled && (
+          <>
+            <Separator />
+            <div className="flex items-center justify-between">
+              <div>
+                <h3 className="font-medium text-destructive">{t("auth.two_factor.disable_2fa")}</h3>
+                <p className="text-sm text-muted-foreground">{t("auth.two_factor.disable_warning")}</p>
+              </div>
+              <DisableTwoFactorDialog onSuccess={handleRefresh} />
+            </div>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/features/auth/components/two-factor/index.ts

@@ -0,0 +1,9 @@
+export { PasskeySetupDialog } from "./PasskeySetupDialog";
+export { PasskeyList } from "./PasskeyList";
+export { TotpInput } from "./TotpInput";
+export { PasskeyButton } from "./PasskeyButton";
+export { BackupCodesDialog } from "./BackupCodesDialog";
+export { DisableTwoFactorDialog } from "./DisableTwoFactorDialog";
+export { TotpSetupDialog } from "./TotpSetupDialog";
+export { TotpAuthenticatorList } from "./TotpAuthenticatorList";
+export { TwoFactorSettings } from "./TwoFactorSettings";

package/src/features/auth/contexts/AuthContext.tsx

@@ -8,15 +8,19 @@ import {
   LandingComponent,
   Login,
   ResetPassword,
+  TwoFactorChallenge,
 } from "../components";
 import Register from "../components/forms/Register";
 import { AuthComponent } from "../enums";
+import { TwoFactorChallengeInterface } from "../data/two-factor-challenge.interface";
 
 interface AuthContextType {
   activeComponent: ReactElement<any> | null;
   setComponentType: (componentType: AuthComponent) => void;
   setParams: (params?: { code?: string }) => void;
   params?: { code?: string };
+  pendingTwoFactor?: TwoFactorChallengeInterface;
+  setPendingTwoFactor: (challenge?: TwoFactorChallengeInterface) => void;
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
@@ -32,6 +36,7 @@ export const AuthContextProvider = ({
 }) => {
   const [componentType, setComponentType] = useState<AuthComponent | undefined>(initialComponentType);
   const [params, setParams] = useState<{ code?: string } | undefined>(initialParams);
+  const [pendingTwoFactor, setPendingTwoFactor] = useState<TwoFactorChallengeInterface | undefined>();
 
   const activeComponent = useMemo(() => {
     if (componentType === undefined) return null;
@@ -49,6 +54,8 @@ export const AuthContextProvider = ({
         return <ResetPassword />;
       case AuthComponent.AcceptInvitation:
         return <AcceptInvitation />;
+      case AuthComponent.TwoFactorChallenge:
+        return <TwoFactorChallenge />;
       default:
         return <LandingComponent />;
     }
@@ -61,6 +68,8 @@ export const AuthContextProvider = ({
         setComponentType,
         setParams,
         params,
+        pendingTwoFactor,
+        setPendingTwoFactor,
       }}
     >
       {children}

package/src/features/auth/data/auth.service.ts

@@ -11,9 +11,14 @@ import {
 import { JsonApiDelete, JsonApiGet, JsonApiPost } from "../../../unified";
 import { UserInterface } from "../../user";
 import { getTokenHandler } from "../config";
+import { TwoFactorChallengeInterface } from "./two-factor-challenge.interface";
 
 export class AuthService extends AbstractService {
-  static async login(params: { email: string; password: string; language?: string }): Promise<UserInterface> {
+  static async login(params: {
+    email: string;
+    password: string;
+    language?: string;
+  }): Promise<UserInterface | TwoFactorChallengeInterface> {
     const language = params.language || "en-US";
 
     const apiResponse: ApiResponseInterface = await JsonApiPost({
@@ -25,6 +30,18 @@ export class AuthService extends AbstractService {
 
     if (!apiResponse.ok) throw new Error(apiResponse.error);
 
+    // POLYMORPHIC RESPONSE: Login can return EITHER Auth OR TwoFactorChallenge
+    // translateResponse used Modules.Auth for rehydration, but backend may return different type
+    // Check raw response type and manually rehydrate with correct module if needed
+    if (apiResponse.raw?.data?.type === "two-factor-challenge") {
+      const challenge = rehydrate<TwoFactorChallengeInterface>(Modules.TwoFactorChallenge, {
+        jsonApi: apiResponse.raw.data,
+        included: apiResponse.raw.included ?? [],
+      });
+      return challenge;
+    }
+
+    // Normal auth response
     const auth = apiResponse.data as AuthInterface;
 
     // Use injected token handler if configured

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

@@ -0,0 +1,20 @@
+import { AbstractApiData } from "../../../core";
+
+export type BackupCodeVerifyInput = {
+  id: string;
+  code: string;
+};
+
+export class BackupCodeVerify extends AbstractApiData {
+  createJsonApi(data: BackupCodeVerifyInput) {
+    return {
+      data: {
+        type: "backup-codes",
+        id: data.id,
+        attributes: {
+          code: data.code,
+        },
+      },
+    };
+  }
+}

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

@@ -1,3 +1,24 @@
 export * from "./auth";
 export * from "./auth.interface";
 export * from "./auth.service";
+export * from "./two-factor-status.interface";
+export * from "./two-factor-status";
+export * from "./totp-authenticator.interface";
+export * from "./totp-authenticator";
+export * from "./totp-setup.interface";
+export * from "./totp-setup";
+export * from "./passkey.interface";
+export * from "./passkey";
+export * from "./passkey-registration-options";
+export * from "./passkey-registration-verify";
+export * from "./passkey-authentication-options.interface";
+export * from "./passkey-authentication-options";
+export * from "./two-factor-challenge.interface";
+export * from "./two-factor.service";
+export * from "./totp-verify";
+export * from "./totp-verify-login";
+export * from "./passkey-rename";
+export * from "./passkey-verify-login";
+export * from "./two-factor-enable";
+export * from "./two-factor-challenge";
+export * from "./backup-code-verify";

package/src/features/auth/data/passkey-authentication-options.interface.ts

@@ -0,0 +1,7 @@
+import { PublicKeyCredentialRequestOptionsJSON } from "@simplewebauthn/browser";
+import { ApiDataInterface } from "../../../core";
+
+export interface PasskeyAuthenticationOptionsInterface extends ApiDataInterface {
+  get pendingId(): string;
+  get options(): PublicKeyCredentialRequestOptionsJSON;
+}

package/src/features/auth/data/passkey-authentication-options.ts

@@ -0,0 +1,37 @@
+import { PublicKeyCredentialRequestOptionsJSON } from "@simplewebauthn/browser";
+import { AbstractApiData, JsonApiHydratedDataInterface } from "../../../core";
+import { PasskeyAuthenticationOptionsInterface } from "./passkey-authentication-options.interface";
+
+export type PasskeyAuthenticationOptionsInput = {
+  id: string;
+};
+
+export class PasskeyAuthenticationOptions extends AbstractApiData implements PasskeyAuthenticationOptionsInterface {
+  private _pendingId: string = "";
+  private _options: PublicKeyCredentialRequestOptionsJSON = {} as PublicKeyCredentialRequestOptionsJSON;
+
+  get pendingId(): string {
+    return this._pendingId;
+  }
+
+  get options(): PublicKeyCredentialRequestOptionsJSON {
+    return this._options;
+  }
+
+  rehydrate(data: JsonApiHydratedDataInterface): this {
+    super.rehydrate(data);
+    this._pendingId = data.jsonApi.attributes.pendingId ?? this.id ?? "";
+    this._options = data.jsonApi.attributes.options ?? {};
+    return this;
+  }
+
+  createJsonApi(data: PasskeyAuthenticationOptionsInput) {
+    return {
+      data: {
+        type: "passkey-authentication-options",
+        id: data.id,
+        attributes: {},
+      },
+    };
+  }
+}

package/src/features/auth/data/passkey-registration-options.ts

@@ -0,0 +1,46 @@
+import { PublicKeyCredentialCreationOptionsJSON } from "@simplewebauthn/browser";
+import { AbstractApiData, JsonApiHydratedDataInterface } from "../../../core";
+
+export type PasskeyRegistrationOptionsInput = {
+  id: string;
+  userName: string;
+  userDisplayName?: string;
+};
+
+export interface PasskeyRegistrationOptionsInterface {
+  pendingId: string;
+  options: PublicKeyCredentialCreationOptionsJSON;
+}
+
+export class PasskeyRegistrationOptions extends AbstractApiData implements PasskeyRegistrationOptionsInterface {
+  private _pendingId: string = "";
+  private _options: PublicKeyCredentialCreationOptionsJSON = {} as PublicKeyCredentialCreationOptionsJSON;
+
+  get pendingId(): string {
+    return this._pendingId;
+  }
+
+  get options(): PublicKeyCredentialCreationOptionsJSON {
+    return this._options;
+  }
+
+  rehydrate(data: JsonApiHydratedDataInterface): this {
+    super.rehydrate(data);
+    this._pendingId = data.jsonApi.attributes.pendingId ?? this.id;
+    this._options = data.jsonApi.attributes.options ?? {};
+    return this;
+  }
+
+  createJsonApi(data: PasskeyRegistrationOptionsInput) {
+    return {
+      data: {
+        type: "passkeys",
+        id: data.id,
+        attributes: {
+          userName: data.userName,
+          userDisplayName: data.userDisplayName,
+        },
+      },
+    };
+  }
+}

package/src/features/auth/data/passkey-registration-verify.ts

@@ -0,0 +1,62 @@
+import { RegistrationResponseJSON } from "@simplewebauthn/browser";
+import { AbstractApiData, JsonApiHydratedDataInterface } from "../../../core";
+import { PasskeyInterface } from "./passkey.interface";
+
+export type PasskeyRegistrationVerifyInput = {
+  id: string;
+  pendingId: string;
+  name: string;
+  response: RegistrationResponseJSON;
+};
+
+export class PasskeyRegistrationVerify extends AbstractApiData implements PasskeyInterface {
+  private _name: string = "";
+  private _credentialId: string = "";
+  private _deviceType: string = "";
+  private _backedUp: boolean = false;
+  private _lastUsedAt?: Date;
+
+  get name(): string {
+    return this._name;
+  }
+
+  get credentialId(): string {
+    return this._credentialId;
+  }
+
+  get deviceType(): string {
+    return this._deviceType;
+  }
+
+  get backedUp(): boolean {
+    return this._backedUp;
+  }
+
+  get lastUsedAt(): Date | undefined {
+    return this._lastUsedAt;
+  }
+
+  rehydrate(data: JsonApiHydratedDataInterface): this {
+    super.rehydrate(data);
+    this._name = data.jsonApi.attributes.name ?? "";
+    this._credentialId = data.jsonApi.attributes.credentialId ?? "";
+    this._deviceType = data.jsonApi.attributes.deviceType ?? "";
+    this._backedUp = data.jsonApi.attributes.backedUp ?? false;
+    this._lastUsedAt = data.jsonApi.attributes.lastUsedAt ? new Date(data.jsonApi.attributes.lastUsedAt) : undefined;
+    return this;
+  }
+
+  createJsonApi(data: PasskeyRegistrationVerifyInput) {
+    return {
+      data: {
+        type: "passkeys",
+        id: data.id,
+        attributes: {
+          pendingId: data.pendingId,
+          name: data.name,
+          response: data.response,
+        },
+      },
+    };
+  }
+}

package/src/features/auth/data/passkey-rename.ts

@@ -0,0 +1,20 @@
+import { AbstractApiData } from "../../../core";
+
+export type PasskeyRenameInput = {
+  id: string;
+  name: string;
+};
+
+export class PasskeyRename extends AbstractApiData {
+  createJsonApi(data: PasskeyRenameInput) {
+    return {
+      data: {
+        type: "passkeys",
+        id: data.id,
+        attributes: {
+          name: data.name,
+        },
+      },
+    };
+  }
+}

package/src/features/auth/data/passkey-verify-login.ts

@@ -0,0 +1,23 @@
+import { AuthenticationResponseJSON } from "@simplewebauthn/browser";
+import { AbstractApiData } from "../../../core";
+
+export type PasskeyVerifyLoginInput = {
+  id: string;
+  pendingId: string;
+  response: AuthenticationResponseJSON;
+};
+
+export class PasskeyVerifyLogin extends AbstractApiData {
+  createJsonApi(data: PasskeyVerifyLoginInput) {
+    return {
+      data: {
+        type: "passkeys",
+        id: data.id,
+        attributes: {
+          pendingId: data.pendingId,
+          response: data.response,
+        },
+      },
+    };
+  }
+}

package/src/features/auth/data/passkey.interface.ts

@@ -0,0 +1,9 @@
+import { ApiDataInterface } from "../../../core";
+
+export interface PasskeyInterface extends ApiDataInterface {
+  get name(): string;
+  get credentialId(): string;
+  get deviceType(): string;
+  get backedUp(): boolean;
+  get lastUsedAt(): Date | undefined;
+}

package/src/features/auth/data/passkey.ts

@@ -0,0 +1,40 @@
+import { AbstractApiData, JsonApiHydratedDataInterface } from "../../../core";
+import { PasskeyInterface } from "./passkey.interface";
+
+export class Passkey extends AbstractApiData implements PasskeyInterface {
+  private _name: string = "";
+  private _credentialId: string = "";
+  private _deviceType: string = "";
+  private _backedUp: boolean = false;
+  private _lastUsedAt?: Date;
+
+  get name(): string {
+    return this._name;
+  }
+
+  get credentialId(): string {
+    return this._credentialId;
+  }
+
+  get deviceType(): string {
+    return this._deviceType;
+  }
+
+  get backedUp(): boolean {
+    return this._backedUp;
+  }
+
+  get lastUsedAt(): Date | undefined {
+    return this._lastUsedAt;
+  }
+
+  rehydrate(data: JsonApiHydratedDataInterface): this {
+    super.rehydrate(data);
+    this._name = data.jsonApi.attributes.name ?? "";
+    this._credentialId = data.jsonApi.attributes.credentialId ?? "";
+    this._deviceType = data.jsonApi.attributes.deviceType ?? "";
+    this._backedUp = data.jsonApi.attributes.backedUp ?? false;
+    this._lastUsedAt = data.jsonApi.attributes.lastUsedAt ? new Date(data.jsonApi.attributes.lastUsedAt) : undefined;
+    return this;
+  }
+}

package/src/features/auth/data/totp-authenticator.interface.ts

@@ -0,0 +1,7 @@
+import { ApiDataInterface } from "../../../core";
+
+export interface TotpAuthenticatorInterface extends ApiDataInterface {
+  get name(): string;
+  get verified(): boolean;
+  get lastUsedAt(): Date | undefined;
+}

package/src/features/auth/data/totp-authenticator.ts

@@ -0,0 +1,28 @@
+import { AbstractApiData, JsonApiHydratedDataInterface } from "../../../core";
+import { TotpAuthenticatorInterface } from "./totp-authenticator.interface";
+
+export class TotpAuthenticator extends AbstractApiData implements TotpAuthenticatorInterface {
+  private _name: string = "";
+  private _verified: boolean = false;
+  private _lastUsedAt?: Date;
+
+  get name(): string {
+    return this._name;
+  }
+
+  get verified(): boolean {
+    return this._verified;
+  }
+
+  get lastUsedAt(): Date | undefined {
+    return this._lastUsedAt;
+  }
+
+  rehydrate(data: JsonApiHydratedDataInterface): this {
+    super.rehydrate(data);
+    this._name = data.jsonApi.attributes.name ?? "";
+    this._verified = data.jsonApi.attributes.verified ?? false;
+    this._lastUsedAt = data.jsonApi.attributes.lastUsedAt ? new Date(data.jsonApi.attributes.lastUsedAt) : undefined;
+    return this;
+  }
+}

package/src/features/auth/data/totp-setup.interface.ts

@@ -0,0 +1,5 @@
+export interface TotpSetupInterface {
+  get secret(): string;
+  get qrCodeUri(): string;
+  get authenticatorId(): string;
+}

package/src/features/auth/data/totp-setup.ts

@@ -0,0 +1,48 @@
+import { AbstractApiData, JsonApiHydratedDataInterface } from "../../../core";
+import { TotpSetupInterface } from "./totp-setup.interface";
+
+export type TotpSetupInput = {
+  id: string;
+  name: string;
+  accountName: string;
+};
+
+export class TotpSetup extends AbstractApiData implements TotpSetupInterface {
+  private _qrCodeUri: string = "";
+  private _secret: string = "";
+  private _authenticatorId: string = "";
+
+  get qrCodeUri(): string {
+    return this._qrCodeUri;
+  }
+
+  get secret(): string {
+    return this._secret;
+  }
+
+  get authenticatorId(): string {
+    return this._authenticatorId;
+  }
+
+  rehydrate(data: JsonApiHydratedDataInterface): this {
+    super.rehydrate(data);
+    this._qrCodeUri = data.jsonApi.attributes.qrCodeUri ?? "";
+    this._secret = data.jsonApi.attributes.secret ?? "";
+    // authenticatorId is the entity ID, not an attribute
+    this._authenticatorId = data.jsonApi.id ?? "";
+    return this;
+  }
+
+  createJsonApi(data: TotpSetupInput) {
+    return {
+      data: {
+        type: "totp-authenticators",
+        id: data.id,
+        attributes: {
+          name: data.name,
+          accountName: data.accountName,
+        },
+      },
+    };
+  }
+}

package/src/features/auth/data/totp-verify-login.ts

@@ -0,0 +1,20 @@
+import { AbstractApiData } from "../../../core";
+
+export type TotpVerifyLoginInput = {
+  id: string;
+  code: string;
+};
+
+export class TotpVerifyLogin extends AbstractApiData {
+  createJsonApi(data: TotpVerifyLoginInput) {
+    return {
+      data: {
+        type: "totp-authenticators",
+        id: data.id,
+        attributes: {
+          code: data.code,
+        },
+      },
+    };
+  }
+}