strapi-identity 0.1.2 → 0.2.0

package/README.md

@@ -7,6 +7,7 @@ Detailed Multi-Factor Authentication (MFA) plugin for Strapi v5+. Secure your St
 - **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.
+- **Email Passcode**: Option to receive a one-time passcode via email as an alternative MFA method.
 - **Native UI Integration**:
   - Matches Strapi's design system.
   - Profile integration for easy setup.
@@ -114,5 +115,5 @@ Below is the implementation status of planned features.
 - [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.
+- [x] **Email Passcode**: Alternative MFA method via Email.
 - [ ] **Enforced Mode**: Mandatory MFA for specific roles or all users.

package/dist/admin/{AdminReset-H453s-DE.mjs → AdminReset-B-WGECOX.mjs}

@@ -2,7 +2,7 @@ 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-D45I6rWF.mjs";
+import { g as getTranslation } from "./index-BfC6z9N5.mjs";
 import { g as getToken } from "./tokenHelpers-DagDzpso.mjs";
 import { useIntl } from "react-intl";
 const AdminReset = ({ id }) => {

package/dist/admin/{AdminReset-C0QibZXW.js → AdminReset-CqHhVBS_.js}

@@ -4,7 +4,7 @@ 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-BXZI8nMZ.js");
+const index = require("./index-D03zlFnm.js");
 const tokenHelpers = require("./tokenHelpers-jtoRu0q5.js");
 const reactIntl = require("react-intl");
 const AdminReset = ({ id }) => {

package/dist/admin/{ProfileToggle-DQeXCx34.mjs → ProfileToggle-BCtCsOvj.mjs}

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { Modal, Flex, Typography, Grid, Button, TextInput, Box, Field, Toggle } from "@strapi/design-system";
 import styled from "styled-components";
-import { g as getTranslation, I as InputOTP, a as InputOTPGroup, b as InputOTPSlot, c as InputOTPSeparator } from "./index-D45I6rWF.mjs";
+import { g as getTranslation, I as InputOTP, a as InputOTPGroup, b as InputOTPSlot, c as InputOTPSeparator } from "./index-BfC6z9N5.mjs";
 import { QRCodeCanvas } from "qrcode.react";
 import { useIntl } from "react-intl";
 import { g as getToken } from "./tokenHelpers-DagDzpso.mjs";
@@ -120,11 +120,155 @@ function RemoveModal({ open, onOpenChange, onSubmit }) {
     ] })
   ] }) }) });
 }
+function EmailOTPModal({
+  mode,
+  open,
+  email,
+  onOpenChange,
+  onSuccess
+}) {
+  const { formatMessage } = useIntl();
+  const [step, setStep] = useState("send");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const handleOpenChange = (nextOpen) => {
+    if (!nextOpen) {
+      setStep("send");
+      setError(null);
+    }
+    onOpenChange(nextOpen);
+  };
+  const handleSend = async () => {
+    const token = getToken();
+    setLoading(true);
+    setError(null);
+    try {
+      const endpoint = mode === "setup" ? "/strapi-identity/enable-email" : "/strapi-identity/disable-email/request";
+      const response = await fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", authorization: `Bearer ${token}` }
+      });
+      const body = await response.json();
+      if (!response.ok) {
+        throw new Error(body.error || "Failed to send verification email");
+      }
+      setStep("confirm");
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleConfirm = async (e) => {
+    e.preventDefault();
+    const token = getToken();
+    const formData = new FormData(e.target);
+    const code = formData.get("otp");
+    setLoading(true);
+    setError(null);
+    try {
+      const endpoint = mode === "setup" ? "/strapi-identity/setup-email" : "/strapi-identity/disable";
+      const response = await fetch(endpoint, {
+        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(body.error || "Invalid or expired code");
+      }
+      handleOpenChange(false);
+      onSuccess();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const title = mode === "setup" ? formatMessage({
+    id: getTranslation("email_otp.setup_title"),
+    defaultMessage: "Enable Email OTP"
+  }) : formatMessage({
+    id: getTranslation("email_otp.disable_title"),
+    defaultMessage: "Disable Email OTP"
+  });
+  return /* @__PURE__ */ jsx(Modal.Root, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(Modal.Content, { children: [
+    /* @__PURE__ */ jsx(Modal.Header, { children: /* @__PURE__ */ jsx(Modal.Title, { children: title }) }),
+    step === "send" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "center", gap: 4, marginTop: 4, marginBottom: 4, children: [
+        /* @__PURE__ */ jsx(Typography, { textAlign: "center", children: mode === "setup" ? formatMessage(
+          {
+            id: getTranslation("email_otp.setup_description"),
+            defaultMessage: "We'll send a 6-digit verification code to {email}. Enter it to enable Email OTP."
+          },
+          { email: /* @__PURE__ */ jsx("strong", { children: email }) }
+        ) : formatMessage(
+          {
+            id: getTranslation("email_otp.disable_description"),
+            defaultMessage: "We'll send a 6-digit verification code to {email}. Enter it to disable Email OTP."
+          },
+          { email: /* @__PURE__ */ jsx("strong", { children: email }) }
+        ) }),
+        error ? /* @__PURE__ */ jsx(Typography, { role: "alert", textColor: "danger600", textAlign: "center", children: error }) : null
+      ] }) }),
+      /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+        /* @__PURE__ */ jsx(Modal.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", children: formatMessage({ id: "app.components.Button.cancel", defaultMessage: "Cancel" }) }) }),
+        /* @__PURE__ */ jsx(Button, { onClick: handleSend, loading, children: formatMessage({
+          id: getTranslation("email_otp.send_code"),
+          defaultMessage: "Send verification email"
+        }) })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleConfirm, children: [
+      /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", alignItems: "center", gap: 4, marginTop: 4, marginBottom: 4, children: [
+        /* @__PURE__ */ jsx(Typography, { textAlign: "center", children: formatMessage(
+          {
+            id: getTranslation("email_otp.confirm_description"),
+            defaultMessage: "Enter the 6-digit code sent to {email}."
+          },
+          { email: /* @__PURE__ */ jsx("strong", { children: email }) }
+        ) }),
+        /* @__PURE__ */ jsxs(InputOTP, { maxLength: 6, name: "otp", id: "otp", autoFocus: true, children: [
+          /* @__PURE__ */ jsxs(InputOTPGroup, { children: [
+            /* @__PURE__ */ jsx(InputOTPSlot, { index: 0 }),
+            /* @__PURE__ */ jsx(InputOTPSlot, { index: 1 }),
+            /* @__PURE__ */ jsx(InputOTPSlot, { index: 2 })
+          ] }),
+          /* @__PURE__ */ jsx(InputOTPSeparator, {}),
+          /* @__PURE__ */ jsxs(InputOTPGroup, { children: [
+            /* @__PURE__ */ jsx(InputOTPSlot, { index: 3 }),
+            /* @__PURE__ */ jsx(InputOTPSlot, { index: 4 }),
+            /* @__PURE__ */ jsx(InputOTPSlot, { index: 5 })
+          ] })
+        ] }),
+        error ? /* @__PURE__ */ jsx(Typography, { role: "alert", textColor: "danger600", textAlign: "center", children: error }) : null,
+        /* @__PURE__ */ jsx(Button, { variant: "ghost", type: "button", onClick: () => handleSend(), children: formatMessage({
+          id: getTranslation("email_otp.resend_code"),
+          defaultMessage: "Resend code"
+        }) })
+      ] }) }),
+      /* @__PURE__ */ jsxs(Modal.Footer, { children: [
+        /* @__PURE__ */ jsx(Modal.Close, { children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", children: formatMessage({
+          id: "app.components.Button.cancel",
+          defaultMessage: "Cancel"
+        }) }) }),
+        /* @__PURE__ */ jsx(Button, { type: "submit", loading, children: formatMessage({
+          id: "app.components.Button.confirm",
+          defaultMessage: "Confirm"
+        }) })
+      ] })
+    ] })
+  ] }) });
+}
 const ProfileToggle = () => {
   const { formatMessage } = useIntl();
   const [enabled, setEnabled] = useState(null);
+  const [mfaType, setMfaType] = useState(null);
   const [mfaEnabled, setMfaEnabled] = useState(false);
+  const [emailConfigured, setEmailConfigured] = useState(false);
+  const [userEmail, setUserEmail] = useState("");
   const [disableDialogOpen, setDisableDialogOpen] = useState(false);
+  const [emailSetupOpen, setEmailSetupOpen] = useState(false);
+  const [emailDisableOpen, setEmailDisableOpen] = useState(false);
   const [modalOpen, setModalOpen] = useState(false);
   const [uri, setUri] = useState(null);
   const [secret, setSecret] = useState(null);
@@ -136,6 +280,9 @@ const ProfileToggle = () => {
       setDisableDialogOpen(true);
       return;
     }
+    if (enable && enabled === "full" && mfaType === "email") {
+      return;
+    }
     try {
       const response = await fetch("/strapi-identity/enable", {
         method: "POST",
@@ -154,11 +301,25 @@ const ProfileToggle = () => {
       setUri(data?.uri || null);
       setSecret(data?.secret || null);
       setEnabled(enable ? "temp" : null);
+      if (enable) setMfaType("totp");
     } catch (error) {
       console.error(error);
       setEnabled(null);
     }
   };
+  const handleEmailToggle = ({ target }) => {
+    const enable = target?.checked || false;
+    if (!enable && enabled === "full" && mfaType === "email") {
+      setEmailDisableOpen(true);
+      return;
+    }
+    if (enable && enabled === "full") {
+      return;
+    }
+    if (enable) {
+      setEmailSetupOpen(true);
+    }
+  };
   const handleConfirm = async (e) => {
     e.preventDefault();
     const form = e.target;
@@ -183,6 +344,7 @@ const ProfileToggle = () => {
       setUri(null);
       setSecret(null);
       setEnabled("full");
+      setMfaType("totp");
     } catch (error) {
       console.error(error);
     }
@@ -214,6 +376,7 @@ const ProfileToggle = () => {
       setUri(null);
       setSecret(null);
       setEnabled(null);
+      setMfaType(null);
     } catch (error) {
       console.error(error);
     }
@@ -223,7 +386,7 @@ const ProfileToggle = () => {
     (async () => {
       const token = getToken();
       try {
-        const [status, enabled2] = await Promise.all([
+        const [statusRes, enabledRes, meRes] = await Promise.all([
           fetch("/strapi-identity/status", {
             method: "GET",
             headers: { "Content-Type": "application/json", authorization: `Bearer ${token}` },
@@ -233,18 +396,37 @@ const ProfileToggle = () => {
             method: "GET",
             headers: { "Content-Type": "application/json", authorization: `Bearer ${token}` },
             signal: ac.signal
+          }),
+          fetch("/admin/users/me", {
+            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"}`);
+        const statusBody = await statusRes.json();
+        const enabledBody = await enabledRes.json();
+        if (!statusRes.ok) {
+          throw new Error(`${statusRes.status} - ${statusBody.error || "Failed to get MFA status"}`);
         }
-        if (!enabled2.ok) {
-          throw new Error(`${enabled2.status} - ${enabledBody.error || "Failed to get MFA config"}`);
+        if (!enabledRes.ok) {
+          throw new Error(`${enabledRes.status} - ${enabledBody.error || "Failed to get MFA config"}`);
         }
         setMfaEnabled(enabledBody.data);
         setEnabled(statusBody.data?.status || null);
+        setMfaType(statusBody.data?.type || null);
+        if (meRes.ok) {
+          const meBody = await meRes.json();
+          setUserEmail(meBody.data?.email || "");
+          const configRes = await fetch("/strapi-identity/config", {
+            method: "GET",
+            headers: { "Content-Type": "application/json", authorization: `Bearer ${token}` },
+            signal: ac.signal
+          });
+          if (configRes.ok) {
+            const configBody = await configRes.json();
+            setEmailConfigured(!!configBody.data?.email_enabled);
+          }
+        }
       } catch (error) {
         if (error.name === "AbortError") return;
         console.error("Failed to fetch MFA status:", error);
@@ -253,6 +435,10 @@ const ProfileToggle = () => {
     return () => ac.abort();
   }, []);
   if (!mfaEnabled) return null;
+  const totpChecked = enabled !== null && mfaType === "totp";
+  const emailChecked = enabled !== null && mfaType === "email";
+  const totpDisabled = enabled !== null && mfaType === "email";
+  const emailDisabled = enabled !== null && mfaType === "totp";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Box,
@@ -275,36 +461,78 @@ const ProfileToggle = () => {
               defaultMessage: "Add an additional layer of security to your account."
             }) })
           ] }),
-          /* @__PURE__ */ jsx(Grid.Root, { tag: "div", gap: 5, children: /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, alignItems: "stretch", children: /* @__PURE__ */ jsxs(
-            Field.Root,
-            {
-              width: "100%",
-              name: "two-factor-authentication",
-              id: "two-factor-authentication",
-              children: [
-                /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
-                  id: getTranslation("profile.toggle_label"),
-                  defaultMessage: "Enable Two-Factor Authentication"
-                }) }),
-                /* @__PURE__ */ jsx(
-                  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__ */ jsx(Field.Hint, {})
-              ]
-            }
-          ) }) })
+          /* @__PURE__ */ jsxs(Grid.Root, { tag: "div", gap: 5, children: [
+            /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, alignItems: "stretch", children: /* @__PURE__ */ jsxs(
+              Field.Root,
+              {
+                width: "100%",
+                name: "two-factor-authentication",
+                id: "two-factor-authentication",
+                hint: totpDisabled ? formatMessage({
+                  id: getTranslation("profile.totp_disabled_hint"),
+                  defaultMessage: "Disable Email OTP first to enable the authenticator app."
+                }) : void 0,
+                children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+                    id: getTranslation("profile.toggle_label"),
+                    defaultMessage: "Enable Two-Factor Authentication"
+                  }) }),
+                  /* @__PURE__ */ jsx(
+                    Toggle,
+                    {
+                      offLabel: formatMessage({
+                        id: "app.components.ToggleCheckbox.off-label",
+                        defaultMessage: "False"
+                      }),
+                      onLabel: formatMessage({
+                        id: "app.components.ToggleCheckbox.on-label",
+                        defaultMessage: "True"
+                      }),
+                      checked: totpChecked,
+                      onChange: handleToggle,
+                      disabled: totpDisabled
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Field.Hint, {})
+                ]
+              }
+            ) }),
+            emailConfigured && /* @__PURE__ */ jsx(Grid.Item, { col: 6, s: 12, alignItems: "stretch", children: /* @__PURE__ */ jsxs(
+              Field.Root,
+              {
+                width: "100%",
+                name: "email-otp",
+                id: "email-otp",
+                hint: emailDisabled ? formatMessage({
+                  id: getTranslation("profile.email_otp_disabled_hint"),
+                  defaultMessage: "Disable the authenticator app first to enable Email OTP."
+                }) : void 0,
+                children: [
+                  /* @__PURE__ */ jsx(Field.Label, { children: formatMessage({
+                    id: getTranslation("profile.email_otp_label"),
+                    defaultMessage: "Enable Email OTP"
+                  }) }),
+                  /* @__PURE__ */ jsx(
+                    Toggle,
+                    {
+                      offLabel: formatMessage({
+                        id: "app.components.ToggleCheckbox.off-label",
+                        defaultMessage: "False"
+                      }),
+                      onLabel: formatMessage({
+                        id: "app.components.ToggleCheckbox.on-label",
+                        defaultMessage: "True"
+                      }),
+                      checked: emailChecked,
+                      onChange: handleEmailToggle,
+                      disabled: emailDisabled
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Field.Hint, {})
+                ]
+              }
+            ) })
+          ] })
         ] })
       }
     ),
@@ -326,6 +554,38 @@ const ProfileToggle = () => {
         onOpenChange: setDisableDialogOpen,
         onSubmit: handleDisable
       }
+    ),
+    /* @__PURE__ */ jsx(
+      EmailOTPModal,
+      {
+        mode: "setup",
+        open: emailSetupOpen,
+        email: userEmail,
+        onOpenChange: (open) => {
+          if (!open) setEmailSetupOpen(false);
+        },
+        onSuccess: () => {
+          setEnabled("full");
+          setMfaType("email");
+          setEmailSetupOpen(false);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      EmailOTPModal,
+      {
+        mode: "disable",
+        open: emailDisableOpen,
+        email: userEmail,
+        onOpenChange: (open) => {
+          if (!open) setEmailDisableOpen(false);
+        },
+        onSuccess: () => {
+          setEnabled(null);
+          setMfaType(null);
+          setEmailDisableOpen(false);
+        }
+      }
     )
   ] });
 };