strapi-identity 0.0.1-debug.0

package/README.md

@@ -0,0 +1,112 @@
+# Strapi Plugin Strapi Identity
+
+Detailed Multi-Factor Authentication (MFA) plugin for Strapi v5+. Secure your Strapi Admin panel with TOTP-based 2FA, fully integrated into the Strapi interface.
+
+## Features
+
+- **MFA Login Interception**: Seamlessly integrates with the default Strapi login flow.
+- **TOTP Compatibility**: Works with all major authenticator apps (Google Authenticator, Authy, 1Password, etc.).
+- **Recovery Codes**: Generates secure recovery codes for emergency access.
+- **Native UI Integration**:
+  - Matches Strapi's design system.
+  - Profile integration for easy setup.
+  - Dedicated verification page.
+- **Global Configuration**:
+  - Enable/Disable globally.
+  - Custom "Issuer" name for authenticator apps.
+- **Role-Based Access Control**: Granular permissions for managing plugin settings.
+- **Multi-language Support**: Fully localized interface.
+
+## Installation
+
+To install this plugin, you'll need to include it in your Strapi project.
+
+1. **Install the dependency** (if published to npm) or link the local plugin.
+2. **Enable the plugin** in `config/plugins.ts`:
+
+```typescript
+export default {
+  // ...
+  'strapi-identity': {
+    enabled: true,
+    resolve: './src/plugins/strapi-identity', // If local
+  },
+  // ...
+};
+```
+
+3. **Build the admin panel**:
+
+```bash
+npm run build
+```
+
+4. **Restart Strapi**:
+
+```bash
+npm run develop
+```
+
+## Configuration
+
+Access the global settings via the admin panel:
+**Settings** -> **Global Settings** -> **Strapi Identify Settings**
+
+| Option      | Description                                                                                |
+| ----------- | ------------------------------------------------------------------------------------------ |
+| **Enabled** | Master switch to enable or disable the MFA interception logic globally.                    |
+| **Enforce** | _(Coming Soon)_ Force all users to set up MFA before accessing the dashboard.              |
+| **Issuer**  | The name that appears in the authenticator app (e.g., "My Project"). Defaults to "Strapi". |
+
+### Permissions
+
+Go to **Settings** -> **Administration Panel** -> **Roles** to configure who can manage these settings:
+
+- `plugins::strapi-identity.settings.read`: View configuration.
+- `plugins::strapi-identity.settings.update`: Modify configuration.
+
+## User Guide
+
+### Setting up MFA (User)
+
+1. Log in to the Strapi Admin panel.
+2. Click on your **User Profile** avatar in the top-right corner.
+3. Click **Profile**.
+4. In the "Two-Factor Authentication" section, toggle the switch to **Enable Two-Factor Authentication**.
+5. A modal will appear:
+   - **Scan the QR Code** with your authenticator app.
+   - Enter the **6-digit code** displayed in your app.
+   - **Save your Recovery Codes** in a safe place. You will not see them again!
+6. Click **Finish**.
+
+### Signing In
+
+1. Enter your Email and Password on the standard Strapi login page.
+2. If credentials are correct and MFA is enabled, you will be redirected to the Verification Page.
+3. Enter the code from your authenticator app.
+4. Upon success, you will be redirected to the dashboard.
+
+### Admin Reset (Super Admin)
+
+Administrators with the `settings.update` permission can reset MFA for other users:
+
+1. Navigate to **Settings** -> **Administration Panel** -> **Users**.
+2. Click the **Edit** (pencil) icon for the user you wish to manage.
+3. Locate the **Two-Factor Authentication** section in the user form.
+4. If MFA is enabled for that user, click the **Reset** button.
+   - This will disable 2FA for the user, allowing them to log in with just their password and set up MFA again.
+
+## Roadmap & Status
+
+Below is the implementation status of planned features.
+
+- [x] **MFA Login**: Intercepts admin login securely.
+- [x] **Recovery Codes**: Backup access method.
+- [x] **TOTP App Compatibility**: Standard RFC 6238 implementation.
+- [x] **Integrated Setup Screen**: User-friendly wizard in profile settings.
+- [x] **MFA Page Matches Theme**: Consistent UI/UX.
+- [x] **Custom Issuer**: Configurable app label.
+- [x] **Multi-language Support**: i18n ready.
+- [x] **Admin Reset**: Allow super-admins to reset MFA for other users who lost access.
+- [ ] **Email Passcode**: Alternative MFA method via Email.
+- [ ] **Enforced Mode**: Mandatory MFA for specific roles or all users.

package/dist/_chunks/AdminReset-B7_r8Jh1.mjs

@@ -0,0 +1,112 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { W as WarningAlert } from "./WarningAlert-VU011LVF.mjs";
+import { Box, Flex, Typography, Grid, Button } from "@strapi/design-system";
+import { g as getTranslation } from "./index-Df5ytRzw.mjs";
+import { g as getToken } from "./tokenHelpers-DagDzpso.mjs";
+import { useIntl } from "react-intl";
+const AdminReset = ({ id }) => {
+  const { formatMessage } = useIntl();
+  const [is2FAEnabled, setIs2FAEnabled] = useState(false);
+  const [warningOpen, setWarningOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const handleReset = async () => {
+    const token = getToken();
+    setLoading(true);
+    try {
+      const response = await fetch(`/strapi-identity/admin/user/${id}`, {
+        headers: { Authorization: `Bearer ${token}` },
+        method: "DELETE"
+      });
+      if (!response.ok) throw new Error("Failed to fetch 2FA status for user");
+      setIs2FAEnabled(false);
+    } catch (error) {
+      console.error("Error resetting 2FA for user:", error);
+    } finally {
+      setLoading(false);
+      setWarningOpen(false);
+    }
+  };
+  useEffect(() => {
+    if (!id) return;
+    const ac = new AbortController();
+    const token = getToken();
+    (async () => {
+      try {
+        const response = await fetch(`/strapi-identity/admin/user/${id}`, {
+          headers: { Authorization: `Bearer ${token}` },
+          signal: ac.signal
+        });
+        if (!response.ok) throw new Error("Failed to fetch 2FA status for user");
+        const data = await response.json();
+        setIs2FAEnabled(data.data);
+      } catch (error) {
+        console.error("Error fetching 2FA status for user:", error);
+      }
+    })();
+  }, [id]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        background: "neutral0",
+        hasRadius: true,
+        shadow: "filterShadow",
+        paddingTop: 6,
+        paddingBottom: 6,
+        paddingLeft: 7,
+        paddingRight: 7,
+        children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+          /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "delta", tag: "h2", children: formatMessage({
+              id: getTranslation("admin.title"),
+              defaultMessage: "Two-Factor Authentication"
+            }) }),
+            /* @__PURE__ */ jsx(Typography, { children: formatMessage({
+              id: getTranslation("admin.subtitle"),
+              defaultMessage: "Reset the Two-Factor Authentication for a user."
+            }) })
+          ] }),
+          /* @__PURE__ */ jsx(Grid.Root, { children: /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, alignItems: "stretch", children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              disabled: !is2FAEnabled,
+              variant: "danger",
+              onClick: () => setWarningOpen(true),
+              children: formatMessage({
+                id: getTranslation("app.components.Button.reset"),
+                defaultMessage: "Reset"
+              })
+            }
+          ) }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      WarningAlert,
+      {
+        loading,
+        title: formatMessage({
+          id: getTranslation("admin.warn-title"),
+          defaultMessage: "Reset 2FA for this user?"
+        }),
+        open: warningOpen,
+        onCancel: () => setWarningOpen(false),
+        onConfirm: handleReset,
+        children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "omega", textAlign: "center", children: formatMessage({
+            id: getTranslation("admin.warning"),
+            defaultMessage: "Resetting the Two-Factor Authentication will allow the user to set it up again with a new device. This action cannot be undone."
+          }) }),
+          /* @__PURE__ */ jsx(Typography, { textAlign: "center", fontWeight: "semiBold", children: formatMessage({
+            id: getTranslation("app.confirm.body"),
+            defaultMessage: "Are you sure?"
+          }) })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  AdminReset as default
+};

package/dist/_chunks/AdminReset-BohoWW_F.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const WarningAlert = require("./WarningAlert-DFE5euMk.js");
+const designSystem = require("@strapi/design-system");
+const index = require("./index-CeYv7uJ3.js");
+const tokenHelpers = require("./tokenHelpers-jtoRu0q5.js");
+const reactIntl = require("react-intl");
+const AdminReset = ({ id }) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const [is2FAEnabled, setIs2FAEnabled] = React.useState(false);
+  const [warningOpen, setWarningOpen] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+  const handleReset = async () => {
+    const token = tokenHelpers.getToken();
+    setLoading(true);
+    try {
+      const response = await fetch(`/strapi-identity/admin/user/${id}`, {
+        headers: { Authorization: `Bearer ${token}` },
+        method: "DELETE"
+      });
+      if (!response.ok) throw new Error("Failed to fetch 2FA status for user");
+      setIs2FAEnabled(false);
+    } catch (error) {
+      console.error("Error resetting 2FA for user:", error);
+    } finally {
+      setLoading(false);
+      setWarningOpen(false);
+    }
+  };
+  React.useEffect(() => {
+    if (!id) return;
+    const ac = new AbortController();
+    const token = tokenHelpers.getToken();
+    (async () => {
+      try {
+        const response = await fetch(`/strapi-identity/admin/user/${id}`, {
+          headers: { Authorization: `Bearer ${token}` },
+          signal: ac.signal
+        });
+        if (!response.ok) throw new Error("Failed to fetch 2FA status for user");
+        const data = await response.json();
+        setIs2FAEnabled(data.data);
+      } catch (error) {
+        console.error("Error fetching 2FA status for user:", error);
+      }
+    })();
+  }, [id]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Box,
+      {
+        background: "neutral0",
+        hasRadius: true,
+        shadow: "filterShadow",
+        paddingTop: 6,
+        paddingBottom: 6,
+        paddingLeft: 7,
+        paddingRight: 7,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "h2", children: formatMessage({
+              id: index.getTranslation("admin.title"),
+              defaultMessage: "Two-Factor Authentication"
+            }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({
+              id: index.getTranslation("admin.subtitle"),
+              defaultMessage: "Reset the Two-Factor Authentication for a user."
+            }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsx(
+            designSystem.Button,
+            {
+              disabled: !is2FAEnabled,
+              variant: "danger",
+              onClick: () => setWarningOpen(true),
+              children: formatMessage({
+                id: index.getTranslation("app.components.Button.reset"),
+                defaultMessage: "Reset"
+              })
+            }
+          ) }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      WarningAlert.WarningAlert,
+      {
+        loading,
+        title: formatMessage({
+          id: index.getTranslation("admin.warn-title"),
+          defaultMessage: "Reset 2FA for this user?"
+        }),
+        open: warningOpen,
+        onCancel: () => setWarningOpen(false),
+        onConfirm: handleReset,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textAlign: "center", children: formatMessage({
+            id: index.getTranslation("admin.warning"),
+            defaultMessage: "Resetting the Two-Factor Authentication will allow the user to set it up again with a new device. This action cannot be undone."
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textAlign: "center", fontWeight: "semiBold", children: formatMessage({
+            id: index.getTranslation("app.confirm.body"),
+            defaultMessage: "Are you sure?"
+          }) })
+        ]
+      }
+    )
+  ] });
+};
+exports.default = AdminReset;

package/dist/_chunks/ProfileToggle-CHVH6P3j.js

@@ -0,0 +1,339 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const designSystem = require("@strapi/design-system");
+const index = require("./index-CeYv7uJ3.js");
+const QRCode = require("react-qr-code");
+const reactIntl = require("react-intl");
+const tokenHelpers = require("./tokenHelpers-jtoRu0q5.js");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const QRCode__default = /* @__PURE__ */ _interopDefault(QRCode);
+function ConfirmModal({
+  open,
+  onOpenChange,
+  onSubmit,
+  qrCodeUri,
+  secret,
+  passcodes
+}) {
+  const { formatMessage } = reactIntl.useIntl();
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: formatMessage({
+      id: index.getTranslation("profile.setup"),
+      defaultMessage: "Set up Two-Factor Authentication"
+    }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: passcodes ? /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 4, marginTop: 4, marginBottom: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textAlign: "center", children: formatMessage({
+        id: index.getTranslation("profile.recovery_codes"),
+        defaultMessage: "Please save the following recovery codes in a safe place. Each code can only be used once to access your account if you lose access to your authenticator app."
+      }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { gap: 4, marginTop: 4, marginBottom: 4, children: passcodes.map((code) => /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: code }) }, code)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textAlign: "center", children: formatMessage({
+        id: index.getTranslation("profile.recovery_codes_warning"),
+        defaultMessage: "If you lose both your authenticator app and your recovery codes, you will need to contact an administrator to regain access to your account."
+      }) })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 4, marginTop: 4, marginBottom: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({
+          id: index.getTranslation("profile.scan_qr"),
+          defaultMessage: "You will need an authenticator app to scan the QR code below."
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(QRCode__default.default, { value: qrCodeUri || "" }),
+        secret && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", children: secret || "" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "hr",
+        {
+          style: {
+            height: "1px",
+            border: "0",
+            backgroundColor: "#e5e5e5"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 4, marginTop: 4, marginBottom: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({
+          id: index.getTranslation("profile.enter_otp"),
+          defaultMessage: "Enter the 6-digit code from your authenticator app to confirm."
+        }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(index.InputOTP, { maxLength: 6, name: "otp", id: "otp", autoFocus: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(index.InputOTPGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 0 }),
+            /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 1 }),
+            /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 2 })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSeparator, {}),
+          /* @__PURE__ */ jsxRuntime.jsxs(index.InputOTPGroup, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 3 }),
+            /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 4 }),
+            /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 5 })
+          ] })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
+      passcodes && /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Close, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: passcodes ? void 0 : "tertiary", children: passcodes ? formatMessage({ id: "global.close", defaultMessage: "Close" }) : formatMessage({ id: "app.components.Button.cancel", defaultMessage: "Cancel" }) }) }),
+      !passcodes && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { type: "submit", children: formatMessage({ id: "app.components.Button.confirm", defaultMessage: "Confirm" }) })
+    ] })
+  ] }) }) });
+}
+function RemoveModal({ open, onOpenChange, onSubmit }) {
+  const { formatMessage } = reactIntl.useIntl();
+  const [showRecovery, setShowRecovery] = React.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: formatMessage({
+      id: index.getTranslation("profile.disable_title"),
+      defaultMessage: "Disable Two-Factor Authentication"
+    }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "center", gap: 4, marginTop: 4, marginBottom: 4, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({
+        id: index.getTranslation("profile.disable_instruction"),
+        defaultMessage: "Enter the 6-digit code from your authenticator app to disable Two-Factor Authentication."
+      }) }),
+      showRecovery ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.TextInput, { name: "otp", id: "otp", autoFocus: true }) : /* @__PURE__ */ jsxRuntime.jsxs(index.InputOTP, { maxLength: 6, name: "otp", id: "otp", autoFocus: true, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(index.InputOTPGroup, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 0 }),
+          /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 1 }),
+          /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 2 })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSeparator, {}),
+        /* @__PURE__ */ jsxRuntime.jsxs(index.InputOTPGroup, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 3 }),
+          /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 4 }),
+          /* @__PURE__ */ jsxRuntime.jsx(index.InputOTPSlot, { index: 5 })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        designSystem.Button,
+        {
+          variant: "ghost",
+          type: "button",
+          onClick: () => setShowRecovery((prev) => !prev),
+          children: showRecovery ? formatMessage({
+            id: index.getTranslation("general.use_verification_code"),
+            defaultMessage: "Use verification code"
+          }) : formatMessage({
+            id: index.getTranslation("general.use_recovery_code"),
+            defaultMessage: "Use recovery code"
+          })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Close, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "Cancel" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { type: "submit", children: formatMessage({ id: "app.components.Button.confirm", defaultMessage: "Confirm" }) })
+    ] })
+  ] }) }) });
+}
+const ProfileToggle = () => {
+  const { formatMessage } = reactIntl.useIntl();
+  const [enabled, setEnabled] = React.useState(null);
+  const [mfaEnabled, setMfaEnabled] = React.useState(false);
+  const [disableDialogOpen, setDisableDialogOpen] = React.useState(false);
+  const [modalOpen, setModalOpen] = React.useState(false);
+  const [uri, setUri] = React.useState(null);
+  const [secret, setSecret] = React.useState(null);
+  const [passcodes, setPasscodes] = React.useState(null);
+  const handleToggle = async ({ target }) => {
+    const token = tokenHelpers.getToken();
+    const enable = target?.checked || false;
+    if (!enable && enabled === "full") {
+      setDisableDialogOpen(true);
+      return;
+    }
+    try {
+      const response = await fetch("/strapi-identity/enable", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", authorization: `Bearer ${token}` },
+        body: JSON.stringify({ enable })
+      });
+      const body = await response.json();
+      if (!response.ok) {
+        throw new Error(`${response.status} - ${body.error || "Failed to update MFA status"}`);
+      }
+      const data = body.data;
+      if (!data) {
+        throw new Error("No data returned from server");
+      }
+      if (enable) setModalOpen(true);
+      setUri(data?.uri || null);
+      setSecret(data?.secret || null);
+      setEnabled(enable ? "temp" : null);
+    } catch (error) {
+      console.error(error);
+      setEnabled(null);
+    }
+  };
+  const handleConfirm = async (e) => {
+    e.preventDefault();
+    const form = e.target;
+    const formData = new FormData(form);
+    const code = formData.get("otp");
+    const token = tokenHelpers.getToken();
+    try {
+      const response = await fetch("/strapi-identity/setup", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", authorization: `Bearer ${token}` },
+        body: JSON.stringify({ code })
+      });
+      const body = await response.json();
+      if (!response.ok) {
+        throw new Error(`${response.status} - ${body.error || "Failed to set up MFA"}`);
+      }
+      if (body.data?.recoveryCodes) {
+        setPasscodes(body.data.recoveryCodes);
+      } else {
+        setModalOpen(false);
+      }
+      setUri(null);
+      setSecret(null);
+      setEnabled("full");
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  const handleClose = () => {
+    if (!passcodes) setEnabled(null);
+    setModalOpen(false);
+    setUri(null);
+    setSecret(null);
+    setPasscodes(null);
+  };
+  const handleDisable = async (e) => {
+    e.preventDefault();
+    const form = e.target;
+    const formData = new FormData(form);
+    const code = formData.get("otp");
+    const token = tokenHelpers.getToken();
+    try {
+      const response = await fetch("/strapi-identity/disable", {
+        method: "POST",
+        headers: { "Content-Type": "application/json", authorization: `Bearer ${token}` },
+        body: JSON.stringify({ code })
+      });
+      const body = await response.json();
+      if (!response.ok) {
+        throw new Error(`${response.status} - ${body.error || "Failed to disable MFA"}`);
+      }
+      setDisableDialogOpen(false);
+      setUri(null);
+      setSecret(null);
+      setEnabled(null);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  React.useEffect(() => {
+    const ac = new AbortController();
+    (async () => {
+      const token = tokenHelpers.getToken();
+      try {
+        const [status, enabled2] = await Promise.all([
+          fetch("/strapi-identity/status", {
+            method: "GET",
+            headers: { "Content-Type": "application/json", authorization: `Bearer ${token}` },
+            signal: ac.signal
+          }),
+          fetch("/strapi-identity/config/enabled", {
+            method: "GET",
+            headers: { "Content-Type": "application/json", authorization: `Bearer ${token}` },
+            signal: ac.signal
+          })
+        ]);
+        const statusBody = await status.json();
+        const enabledBody = await enabled2.json();
+        if (!status.ok) {
+          throw new Error(`${status.status} - ${statusBody.error || "Failed to set up MFA"}`);
+        }
+        if (!enabled2.ok) {
+          throw new Error(`${enabled2.status} - ${enabledBody.error || "Failed to get MFA config"}`);
+        }
+        setMfaEnabled(enabledBody.data);
+        setEnabled(statusBody.data?.status || null);
+      } catch (error) {
+        if (error.name === "AbortError") return;
+        console.error("Failed to fetch MFA status:", error);
+      }
+    })();
+    return () => ac.abort();
+  }, []);
+  if (!mfaEnabled) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.Box,
+      {
+        background: "neutral0",
+        hasRadius: true,
+        shadow: "filterShadow",
+        paddingTop: 6,
+        paddingBottom: 6,
+        paddingLeft: 7,
+        paddingRight: 7,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 4, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "delta", tag: "h2", children: formatMessage({
+              id: index.getTranslation("profile.title"),
+              defaultMessage: "Two-Factor Authentication"
+            }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: formatMessage({
+              id: index.getTranslation("profile.subtitle"),
+              defaultMessage: "Add an additional layer of security to your account."
+            }) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Root, { tag: "div", gap: 5, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Grid.Item, { col: 6, s: 12, alignItems: "stretch", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            designSystem.Field.Root,
+            {
+              width: "100%",
+              name: "two-factor-authentication",
+              id: "two-factor-authentication",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: formatMessage({
+                  id: index.getTranslation("profile.toggle_label"),
+                  defaultMessage: "Enable Two-Factor Authentication"
+                }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  designSystem.Toggle,
+                  {
+                    offLabel: formatMessage({
+                      id: "app.components.ToggleCheckbox.off-label",
+                      defaultMessage: "False"
+                    }),
+                    onLabel: formatMessage({
+                      id: "app.components.ToggleCheckbox.on-label",
+                      defaultMessage: "True"
+                    }),
+                    checked: enabled !== null,
+                    onChange: handleToggle
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
+              ]
+            }
+          ) }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ConfirmModal,
+      {
+        open: modalOpen,
+        onOpenChange: handleClose,
+        qrCodeUri: uri,
+        secret,
+        passcodes,
+        onSubmit: handleConfirm
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      RemoveModal,
+      {
+        open: disableDialogOpen,
+        onOpenChange: setDisableDialogOpen,
+        onSubmit: handleDisable
+      }
+    )
+  ] });
+};
+exports.default = ProfileToggle;