@kendevelops/auth-flow-kit 1.2.1 → 1.2.3

package/dist/index.cjs

@@ -34,9 +34,9 @@ var import_react = require("react");
 
 // src/http.ts
 function makeURL(baseURL, path) {
-  const sanitizedBaseURL = baseURL.replace(/\/$/, "");
-  const resolvedPath = path.startsWith("/") ? path : `/${path}`;
-  return `${sanitizedBaseURL}${resolvedPath}`;
+  const normalizedBase = baseURL.replace(/\/$/, "");
+  const normalizedPath = path.startsWith("/") ? path : `/${path}`;
+  return `${normalizedBase}${normalizedPath}`;
 }
 function getStoredAccessToken() {
   try {
@@ -47,65 +47,65 @@ function getStoredAccessToken() {
 }
 function setStoredAccessToken(token) {
   try {
-    if (token === null) {
-      localStorage.removeItem("afk_access_token");
+    if (token !== null) {
+      localStorage.setItem("afk_access_token", token);
       return;
     }
-    localStorage.setItem("afk_access_token", token);
+    localStorage.removeItem("afk_access_token");
   } catch {
   }
 }
 async function httpJSON(url, opts = {}, withAuth = false) {
-  const requestHeaders = {
+  const headers = {
     "Content-Type": "application/json"
   };
-  if (withAuth) {
-    const accessToken = getStoredAccessToken();
-    if (accessToken) {
-      requestHeaders["Authorization"] = `Bearer ${accessToken}`;
+  if (withAuth === true) {
+    const token = getStoredAccessToken();
+    if (token) {
+      headers["Authorization"] = `Bearer ${token}`;
     }
   }
   const response = await fetch(url, {
     ...opts,
     headers: {
-      ...requestHeaders,
+      ...headers,
       ...opts.headers || {}
     }
   });
-  if (!response.ok) {
-    let errorMessage = `Request failed (${response.status})`;
-    const responseType = response.headers.get("content-type") || "";
-    if (responseType.includes("application/json")) {
-      try {
-        const errorPayload = await response.json();
-        if (errorPayload?.message) {
-          errorMessage = errorPayload.message;
-        }
-      } catch {
-      }
-    }
-    if (responseType.includes("text/html")) {
-      if (response.status === 404 && url.includes("forgot")) {
-        errorMessage = "The forgot password endpoint you added in config.endpoints.forgot does not exist in your server. Please check and update your config.endpoints.forgot";
-      } else {
-        errorMessage = "Unexpected server error";
+  if (response.ok) {
+    return response.json();
+  }
+  let message = `Request failed (${response.status})`;
+  const contentType = response.headers.get("content-type") || "";
+  if (contentType.includes("application/json")) {
+    try {
+      const data = await response.json();
+      if (data?.message) {
+        message = data.message;
       }
+    } catch {
     }
+  }
+  if (contentType.includes("text/html")) {
     if (response.status === 404 && url.includes("forgot")) {
-      console.error(
-        `[auth-flow-kit] Password reset endpoint not found.
+      message = "The forgot password endpoint you added in config.endpoints.forgot does not exist in your server. Please check and update your config.endpoints.forgot";
+    } else {
+      message = "Unexpected server error";
+    }
+  }
+  if (response.status === 404 && url.includes("forgot")) {
+    console.error(
+      `[auth-flow-kit] Password reset endpoint not found.
 
-        Expected a POST route matching:
-          ${url}
+Expected a POST route matching:
+  ${url}
 
-        Fix this by either:
-        - Adding the route on your backend, or
-        - Updating config.endpoints.forgot`
-      );
-    }
-    throw new Error(errorMessage);
+Fix this by either:
+- Adding the route on your backend, or
+- Updating config.endpoints.forgot`
+    );
   }
-  return response.json();
+  throw new Error(message);
 }
 
 // src/AuthContext.tsx
@@ -200,18 +200,29 @@ function PasswordResetScreen() {
   const [email, setEmail] = (0, import_react3.useState)("");
   const [sent, setSent] = (0, import_react3.useState)(false);
   const [error, setError] = (0, import_react3.useState)(null);
+  const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
   const requestReset = async (e) => {
     e.preventDefault();
     setError(null);
+    const trimmedEmail = email.trim();
+    if (!trimmedEmail) {
+      setError("Email is required.");
+      return;
+    }
+    if (!isValidEmail(trimmedEmail)) {
+      setError("Enter a valid email address.");
+      return;
+    }
     try {
       const url = makeURL(config.baseURL, config.endpoints.forgot);
       await httpJSON(url, {
         method: "POST",
-        body: JSON.stringify({ email })
+        body: JSON.stringify({ email: trimmedEmail })
       });
       setSent(true);
     } catch (err) {
-      setError(err?.message || "Failed to request reset");
+      const message = err instanceof Error ? err.message : "Failed to request reset";
+      setError(message);
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -251,6 +262,7 @@ function PasswordResetScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "label",
             {
+              htmlFor: "afk-reset-email",
               style: {
                 position: "absolute",
                 top: sent ? "-18px" : "-10px",
@@ -267,6 +279,7 @@ function PasswordResetScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "input",
             {
+              id: "afk-reset-email",
               value: email,
               onChange: (e) => setEmail(e.target.value),
               type: "email",
@@ -329,6 +342,8 @@ function PasswordResetScreen() {
         error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "p",
           {
+            role: "alert",
+            "aria-live": "polite",
             style: {
               marginTop: 20,
               color: "crimson",
@@ -379,15 +394,26 @@ function LoginScreen() {
     setError(null);
     const trimmedEmail = email.trim();
     const trimmedPassword = password.trim();
-    if (!trimmedEmail || !trimmedPassword) {
-      setError("Email and password cannot be empty.");
+    if (!trimmedEmail) {
+      setError("Email is required.");
+      setSubmitting(false);
+      return;
+    }
+    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmedEmail)) {
+      setError("Enter a valid email address.");
+      setSubmitting(false);
+      return;
+    }
+    if (!trimmedPassword) {
+      setError("Password is required.");
       setSubmitting(false);
       return;
     }
     try {
       await login(trimmedEmail, trimmedPassword);
     } catch (err) {
-      setError(err?.message || "Login failed");
+      const message = err instanceof Error ? err.message : "Login failed";
+      setError(message);
     } finally {
       setSubmitting(false);
     }
@@ -428,6 +454,7 @@ function LoginScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "label",
             {
+              htmlFor: "afk-login-email",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -444,6 +471,7 @@ function LoginScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "input",
             {
+              id: "afk-login-email",
               value: email,
               onChange: (e) => setEmail(e.target.value),
               type: "email",
@@ -473,6 +501,7 @@ function LoginScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "label",
             {
+              htmlFor: "afk-login-password",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -489,6 +518,7 @@ function LoginScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "input",
             {
+              id: "afk-login-password",
               value: password,
               onChange: (e) => setPassword(e.target.value),
               type: "password",
@@ -553,6 +583,8 @@ function LoginScreen() {
         error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "p",
           {
+            role: "alert",
+            "aria-live": "polite",
             style: {
               marginTop: 18,
               color: "crimson",
@@ -576,8 +608,21 @@ function SignupScreen() {
   const [name, setName] = (0, import_react5.useState)("");
   const [email, setEmail] = (0, import_react5.useState)("");
   const [password, setPassword] = (0, import_react5.useState)("");
+  const [confirmPassword, setConfirmPassword] = (0, import_react5.useState)("");
   const [submitting, setSubmitting] = (0, import_react5.useState)(false);
   const [error, setError] = (0, import_react5.useState)(null);
+  const isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+  const getPasswordStrength = (value) => {
+    let score = 0;
+    if (value.length >= 8) score++;
+    if (/[A-Z]/.test(value)) score++;
+    if (/[0-9]/.test(value)) score++;
+    if (/[^A-Za-z0-9]/.test(value)) score++;
+    if (!value) return { label: "", color: "" };
+    if (score <= 1) return { label: "Weak", color: "crimson" };
+    if (score === 2) return { label: "Medium", color: "#f39c12" };
+    return { label: "Strong", color: "#2ecc71" };
+  };
   const onSubmit = async (e) => {
     e.preventDefault();
     setSubmitting(true);
@@ -585,15 +630,47 @@ function SignupScreen() {
     const trimmedEmail = email.trim();
     const trimmedPassword = password.trim();
     const trimmedName = name.trim();
-    if (!trimmedEmail || !trimmedPassword || !trimmedName) {
-      setError("Email and password cannot be empty.");
+    const trimmedConfirm = confirmPassword.trim();
+    if (!trimmedName) {
+      setError("Name is required.");
+      setSubmitting(false);
+      return;
+    }
+    if (!trimmedEmail) {
+      setError("Email is required.");
+      setSubmitting(false);
+      return;
+    }
+    if (!isValidEmail(trimmedEmail)) {
+      setError("Enter a valid email address.");
+      setSubmitting(false);
+      return;
+    }
+    if (!trimmedPassword) {
+      setError("Password is required.");
+      setSubmitting(false);
+      return;
+    }
+    if (trimmedPassword.length < 8) {
+      setError("Password must be at least 8 characters long.");
+      setSubmitting(false);
+      return;
+    }
+    if (!trimmedConfirm) {
+      setError("Please confirm your password.");
+      setSubmitting(false);
+      return;
+    }
+    if (trimmedPassword !== trimmedConfirm) {
+      setError("Passwords do not match.");
       setSubmitting(false);
       return;
     }
     try {
-      await signup({ name, email, password });
+      await signup({ name: trimmedName, email: trimmedEmail, password: trimmedPassword });
     } catch (err) {
-      setError(err?.message || "Signup failed");
+      const message = err instanceof Error ? err.message : "Signup failed";
+      setError(message);
     } finally {
       setSubmitting(false);
     }
@@ -635,6 +712,7 @@ function SignupScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "label",
             {
+              htmlFor: "afk-signup-name",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -651,6 +729,7 @@ function SignupScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "input",
             {
+              id: "afk-signup-name",
               value: name,
               onChange: (e) => setName(e.target.value),
               placeholder: "Your name",
@@ -679,6 +758,7 @@ function SignupScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "label",
             {
+              htmlFor: "afk-signup-email",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -695,6 +775,7 @@ function SignupScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "input",
             {
+              id: "afk-signup-email",
               value: email,
               onChange: (e) => setEmail(e.target.value),
               type: "email",
@@ -724,6 +805,7 @@ function SignupScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "label",
             {
+              htmlFor: "afk-signup-password",
               style: {
                 position: "absolute",
                 top: "-10px",
@@ -740,6 +822,7 @@ function SignupScreen() {
           /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "input",
             {
+              id: "afk-signup-password",
               value: password,
               onChange: (e) => setPassword(e.target.value),
               type: "password",
@@ -765,6 +848,95 @@ function SignupScreen() {
             }
           )
         ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { position: "relative", marginBottom: 18 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "label",
+            {
+              htmlFor: "afk-signup-confirm-password",
+              style: {
+                position: "absolute",
+                top: "-10px",
+                left: "14px",
+                background: "rgba(255,255,255,0.85)",
+                padding: "0 6px",
+                fontSize: 13,
+                color: "#444",
+                borderRadius: 6
+              },
+              children: "Confirm password"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "input",
+            {
+              id: "afk-signup-confirm-password",
+              value: confirmPassword,
+              onChange: (e) => setConfirmPassword(e.target.value),
+              type: "password",
+              placeholder: "Repeat your password",
+              style: {
+                width: "80%",
+                padding: "14px 16px",
+                borderRadius: 12,
+                border: "1px solid #d2d2d2",
+                fontSize: 15,
+                outline: "none",
+                transition: "0.25s",
+                background: "rgba(255,255,255,0.85)"
+              },
+              onFocus: (e) => {
+                e.currentTarget.style.border = "1px solid #4b4bff";
+                e.currentTarget.style.boxShadow = "0 0 0 3px rgba(75,75,255,0.25)";
+              },
+              onBlur: (e) => {
+                e.currentTarget.style.border = "1px solid #d2d2d2";
+                e.currentTarget.style.boxShadow = "0 0 0 transparent";
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+          "div",
+          {
+            style: {
+              marginBottom: 20,
+              fontSize: 12,
+              color: "#555"
+            },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style: { marginBottom: 6 }, children: "Use at least 8 characters, including letters, numbers, and symbols." }),
+              password && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "p",
+                {
+                  style: {
+                    fontWeight: 600,
+                    color: getPasswordStrength(password).color
+                  },
+                  children: [
+                    "Password strength: ",
+                    getPasswordStrength(password).label
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "p",
+          {
+            style: {
+              textAlign: "center",
+              fontSize: 13,
+              color: "#4b4bff",
+              cursor: "pointer",
+              marginBottom: 24
+            },
+            onClick: () => {
+              window.dispatchEvent(new CustomEvent("auth-flow-kit:navigate-to-login"));
+            },
+            children: "Already have an account? Sign in"
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "button",
           {
@@ -790,6 +962,8 @@ function SignupScreen() {
         error && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "p",
           {
+            role: "alert",
+            "aria-live": "polite",
             style: {
               marginTop: 18,
               color: "crimson",