@guettonenrique/passwordless-auth 0.0.0-stage → 0.1.2

package/dist/react-native/index.js

@@ -0,0 +1,606 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/react-native/api.ts
+import { getFunctions, httpsCallable } from "@react-native-firebase/functions";
+import { getAuth, signInWithCustomToken } from "@react-native-firebase/auth";
+async function requestEmailOtp(email) {
+  const functions = getFunctions();
+  const callable = httpsCallable(
+    functions,
+    "requestEmailOtp"
+  );
+  const result = await callable({ email: email.trim().toLowerCase() });
+  return result.data;
+}
+async function verifyEmailOtp(email, code) {
+  const functions = getFunctions();
+  const callable = httpsCallable(
+    functions,
+    "verifyEmailOtp"
+  );
+  const result = await callable({
+    email: email.trim().toLowerCase(),
+    code: code.trim()
+  });
+  return result.data.customToken;
+}
+async function signInWithEmailOtp(email, code) {
+  const customToken = await verifyEmailOtp(email, code);
+  await signInWithCustomToken(getAuth(), customToken);
+}
+
+// src/react-native/OtpInput.tsx
+import { useEffect, useRef, useState } from "react";
+import {
+  Platform,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View
+} from "react-native";
+
+// src/shared/constants.ts
+var CODE_LENGTH = 6;
+var RESEND_COOLDOWN_MS = 60 * 1e3;
+var OTP_EXPIRY_MS = 10 * 60 * 1e3;
+
+// src/shared/utils.ts
+var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function normalizeEmail(raw) {
+  return raw.trim().toLowerCase();
+}
+function isValidEmail(raw) {
+  return EMAIL_REGEX.test(normalizeEmail(raw));
+}
+
+// src/react-native/OtpInput.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Haptics = null;
+try {
+  Haptics = __require("expo-haptics");
+} catch {
+  Haptics = null;
+}
+var impact = (style) => {
+  try {
+    if (style === "light") {
+      Haptics?.impactAsync?.("light").catch(() => null);
+    } else {
+      Haptics?.notificationAsync?.("success").catch(() => null);
+    }
+  } catch {
+  }
+};
+function OtpInput({
+  length = CODE_LENGTH,
+  value,
+  onChange,
+  onComplete,
+  disabled = false,
+  error = false,
+  autoFocus = true
+}) {
+  const inputRef = useRef(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const [cursorVisible, setCursorVisible] = useState(true);
+  useEffect(() => {
+    if (!isFocused) return;
+    const interval = setInterval(() => {
+      setCursorVisible((prev) => !prev);
+    }, 550);
+    return () => clearInterval(interval);
+  }, [isFocused]);
+  const handleChangeText = (text) => {
+    const cleaned = text.replace(/[^0-9]/g, "").slice(0, length);
+    onChange(cleaned);
+    if (cleaned.length > value.length) impact("light");
+    if (cleaned.length === length) {
+      impact("success");
+      onComplete?.(cleaned);
+    }
+  };
+  const slots = Array.from({ length }, (_, i) => i);
+  return /* @__PURE__ */ jsxs(
+    TouchableOpacity,
+    {
+      style: { width: "100%" },
+      activeOpacity: 1,
+      onPress: () => {
+        if (!disabled) inputRef.current?.focus();
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            style: {
+              flexDirection: "row",
+              width: "100%",
+              justifyContent: "space-between",
+              alignItems: "center",
+              marginVertical: 12
+            },
+            children: slots.map((index) => {
+              const char = value[index] ?? "";
+              const isSlotActive = isFocused && index === value.length && !disabled;
+              const isFilled = char !== "";
+              let borderColor = "#e5e7eb";
+              let backgroundColor = "#f8fafc";
+              if (error) {
+                borderColor = "#f43f5e";
+                backgroundColor = "#fff1f2";
+              } else if (isSlotActive) {
+                borderColor = "#3b82f6";
+                backgroundColor = "#ffffff";
+              } else if (isFilled) {
+                borderColor = "#94a3b8";
+                backgroundColor = "#ffffff";
+              }
+              return /* @__PURE__ */ jsx(
+                View,
+                {
+                  style: {
+                    flex: 1,
+                    maxWidth: 48,
+                    height: 56,
+                    borderRadius: 8,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    marginHorizontal: 4,
+                    borderWidth: isSlotActive ? 2 : 1,
+                    borderColor,
+                    backgroundColor
+                  },
+                  children: char ? /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      style: {
+                        fontSize: 24,
+                        fontWeight: "700",
+                        color: error ? "#e11d48" : "#1e293b"
+                      },
+                      children: char
+                    }
+                  ) : isSlotActive && cursorVisible ? /* @__PURE__ */ jsx(
+                    View,
+                    {
+                      style: {
+                        width: 2,
+                        height: 24,
+                        backgroundColor: "#3b82f6",
+                        borderRadius: 2
+                      }
+                    }
+                  ) : null
+                },
+                index
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            ref: inputRef,
+            value,
+            onChangeText: handleChangeText,
+            keyboardType: "number-pad",
+            textContentType: "oneTimeCode",
+            autoComplete: Platform.OS === "android" ? "one-time-code" : void 0,
+            maxLength: length,
+            editable: !disabled,
+            autoFocus,
+            onFocus: () => setIsFocused(true),
+            onBlur: () => setIsFocused(false),
+            caretHidden: true,
+            style: {
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: 0,
+              right: 0,
+              opacity: 0
+            },
+            accessibilityLabel: `${length}-digit verification code`
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/react-native/EmailOtpModal.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+import {
+  ActivityIndicator,
+  Modal,
+  Text as Text2,
+  TextInput as TextInput2,
+  TouchableOpacity as TouchableOpacity2,
+  View as View2
+} from "react-native";
+import { KeyboardAwareScrollView } from "react-native-keyboard-controller";
+import { AlertCircle, ArrowLeft, Mail, X } from "lucide-react-native";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function EmailOtpModal({
+  visible,
+  onClose,
+  initialEmail = "",
+  appName,
+  cooldownSeconds = Math.round(RESEND_COOLDOWN_MS / 1e3)
+}) {
+  const [step, setStep] = useState2("email");
+  const [email, setEmail] = useState2(initialEmail);
+  const [otp, setOtp] = useState2("");
+  const [loading, setLoading] = useState2(false);
+  const [resending, setResending] = useState2(false);
+  const [error, setError] = useState2(null);
+  const [cooldown, setCooldown] = useState2(0);
+  const [prevVisible, setPrevVisible] = useState2(false);
+  const isVerifyingRef = useRef2(false);
+  const emailRef = useRef2(null);
+  if (visible !== prevVisible) {
+    setPrevVisible(visible);
+    if (visible) {
+      setStep("email");
+      setEmail(initialEmail);
+      setOtp("");
+      setError(null);
+      setLoading(false);
+      setResending(false);
+      setCooldown(0);
+      isVerifyingRef.current = false;
+    }
+  }
+  useEffect2(() => {
+    if (cooldown <= 0) return;
+    const timer = setInterval(() => {
+      setCooldown((prev) => prev > 0 ? prev - 1 : 0);
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [cooldown]);
+  const cleanErrorMessage = (err, fallback) => {
+    const raw = err instanceof Error ? err.message : typeof err === "string" ? err : "";
+    if (raw.length > 0) {
+      return raw.replace(/^\[.*?\]\s*/, "").trim();
+    }
+    return fallback;
+  };
+  const handleSendCode = async () => {
+    const trimmedEmail = email.trim().toLowerCase();
+    if (!trimmedEmail) {
+      setError("Please enter your email address.");
+      return;
+    }
+    if (!isValidEmail(trimmedEmail)) {
+      setError("Please enter a valid email address.");
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    emailRef.current?.blur();
+    try {
+      await requestEmailOtp(trimmedEmail);
+      setStep("otp");
+      setCooldown(cooldownSeconds);
+      setOtp("");
+    } catch (err) {
+      console.error("[passwordless-auth] requestEmailOtp failed:", err);
+      setError(cleanErrorMessage(err, "Failed to send verification code. Please try again."));
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleResendCode = async () => {
+    if (cooldown > 0 || resending || loading) return;
+    setResending(true);
+    setError(null);
+    try {
+      await requestEmailOtp(email.trim().toLowerCase());
+      setCooldown(cooldownSeconds);
+      setOtp("");
+    } catch (err) {
+      console.error("[passwordless-auth] resend failed:", err);
+      setError(cleanErrorMessage(err, "Failed to resend verification code."));
+    } finally {
+      setResending(false);
+    }
+  };
+  const handleClose = () => {
+    setError(null);
+    setLoading(false);
+    setResending(false);
+    onClose();
+  };
+  const handleVerifyOtp = async (codeToVerify) => {
+    const code = (codeToVerify ?? otp).trim();
+    if (code.length < CODE_LENGTH || isVerifyingRef.current) return;
+    isVerifyingRef.current = true;
+    setLoading(true);
+    setError(null);
+    try {
+      await signInWithEmailOtp(email.trim().toLowerCase(), code);
+      handleClose();
+    } catch (err) {
+      console.error("[passwordless-auth] verifyEmailOtp failed:", err);
+      setError(
+        cleanErrorMessage(err, "Invalid or expired verification code. Please try again.")
+      );
+      setOtp("");
+    } finally {
+      setLoading(false);
+      isVerifyingRef.current = false;
+    }
+  };
+  const handleBackToEmail = () => {
+    if (loading) return;
+    setStep("email");
+    setOtp("");
+    setError(null);
+  };
+  const buttonBase = {
+    flex: 1,
+    paddingVertical: 14,
+    borderRadius: 12,
+    alignItems: "center",
+    flexDirection: "row",
+    justifyContent: "center",
+    gap: 8
+  };
+  return /* @__PURE__ */ jsx2(Modal, { visible, transparent: true, animationType: "fade", onRequestClose: handleClose, children: /* @__PURE__ */ jsx2(
+    KeyboardAwareScrollView,
+    {
+      contentContainerStyle: { flexGrow: 1 },
+      keyboardShouldPersistTaps: "handled",
+      bottomOffset: 24,
+      showsVerticalScrollIndicator: false,
+      children: /* @__PURE__ */ jsx2(
+        TouchableOpacity2,
+        {
+          style: {
+            flex: 1,
+            backgroundColor: "rgba(0,0,0,0.5)",
+            justifyContent: "center",
+            alignItems: "center",
+            padding: 16
+          },
+          activeOpacity: 1,
+          onPress: handleClose,
+          children: /* @__PURE__ */ jsxs2(
+            TouchableOpacity2,
+            {
+              activeOpacity: 1,
+              style: {
+                backgroundColor: "#fff",
+                width: "100%",
+                maxWidth: 420,
+                borderRadius: 16,
+                overflow: "hidden",
+                shadowColor: "#000",
+                shadowOpacity: 0.2,
+                shadowRadius: 12,
+                elevation: 10
+              },
+              children: [
+                /* @__PURE__ */ jsxs2(
+                  View2,
+                  {
+                    style: {
+                      flexDirection: "row",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      paddingHorizontal: 24,
+                      paddingVertical: 16,
+                      borderBottomWidth: 1,
+                      borderBottomColor: "#f3f4f6"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs2(View2, { style: { flexDirection: "row", alignItems: "center", gap: 12 }, children: [
+                        step === "otp" && /* @__PURE__ */ jsx2(TouchableOpacity2, { onPress: handleBackToEmail, disabled: loading, activeOpacity: 0.7, children: /* @__PURE__ */ jsx2(ArrowLeft, { size: 20, color: "#64748b" }) }),
+                        /* @__PURE__ */ jsxs2(View2, { children: [
+                          /* @__PURE__ */ jsx2(Text2, { style: { fontSize: 12, color: "#94a3b8", marginBottom: 2 }, children: step === "email" ? "Instant Sign In" : "Verification" }),
+                          /* @__PURE__ */ jsx2(Text2, { style: { fontSize: 18, fontWeight: "700", color: "#1e293b" }, children: step === "email" ? appName ? `${appName} \u2014 email code` : "Sign in with email code" : "Enter verification code" })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsx2(TouchableOpacity2, { onPress: handleClose, activeOpacity: 0.7, children: /* @__PURE__ */ jsx2(X, { size: 20, color: "#94a3b8" }) })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs2(View2, { style: { padding: 24 }, children: [
+                  error ? /* @__PURE__ */ jsxs2(
+                    View2,
+                    {
+                      style: {
+                        flexDirection: "row",
+                        alignItems: "center",
+                        gap: 8,
+                        padding: 12,
+                        marginBottom: 16,
+                        borderRadius: 12,
+                        backgroundColor: "#fef2f2",
+                        borderWidth: 1,
+                        borderColor: "#fecaca"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx2(AlertCircle, { size: 16, color: "#dc2626" }),
+                        /* @__PURE__ */ jsx2(Text2, { style: { fontSize: 12, color: "#dc2626", flex: 1, fontWeight: "500" }, children: error })
+                      ]
+                    }
+                  ) : null,
+                  step === "email" ? (
+                    /* ---------- Step 1: Email ---------- */
+                    /* @__PURE__ */ jsxs2(View2, { children: [
+                      /* @__PURE__ */ jsx2(Text2, { style: { fontSize: 13, color: "#64748b", marginBottom: 16, lineHeight: 18 }, children: "We'll send a 6-digit verification code to your email. No password needed." }),
+                      /* @__PURE__ */ jsxs2(View2, { style: { marginBottom: 24 }, children: [
+                        /* @__PURE__ */ jsx2(Text2, { style: { fontSize: 12, fontWeight: "600", color: "#334155", marginBottom: 8 }, children: "Email" }),
+                        /* @__PURE__ */ jsxs2(
+                          View2,
+                          {
+                            style: {
+                              flexDirection: "row",
+                              alignItems: "center",
+                              paddingHorizontal: 16,
+                              backgroundColor: "#f8fafc",
+                              borderRadius: 12,
+                              borderWidth: 1,
+                              borderColor: "#e5e7eb",
+                              height: 56
+                            },
+                            children: [
+                              /* @__PURE__ */ jsx2(
+                                TextInput2,
+                                {
+                                  ref: emailRef,
+                                  style: { flex: 1, fontSize: 14, fontWeight: "600", color: "#1e293b" },
+                                  placeholder: "name@email.com",
+                                  placeholderTextColor: "#94a3b8",
+                                  value: email,
+                                  onChangeText: (val) => {
+                                    setEmail(val);
+                                    if (error) setError(null);
+                                  },
+                                  keyboardType: "email-address",
+                                  autoCapitalize: "none",
+                                  autoCorrect: false,
+                                  returnKeyType: "send",
+                                  onSubmitEditing: handleSendCode,
+                                  autoFocus: true,
+                                  editable: !loading
+                                }
+                              ),
+                              /* @__PURE__ */ jsx2(Mail, { size: 20, color: "#cbd5e1" })
+                            ]
+                          }
+                        )
+                      ] }),
+                      /* @__PURE__ */ jsxs2(View2, { style: { flexDirection: "row", gap: 12 }, children: [
+                        /* @__PURE__ */ jsx2(
+                          TouchableOpacity2,
+                          {
+                            onPress: handleClose,
+                            style: { ...buttonBase, borderWidth: 1, borderColor: "#e5e7eb", backgroundColor: "transparent" },
+                            activeOpacity: 0.7,
+                            children: /* @__PURE__ */ jsx2(Text2, { style: { color: "#64748b", fontWeight: "600", fontSize: 12, textTransform: "uppercase", letterSpacing: 1 }, children: "Cancel" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs2(
+                          TouchableOpacity2,
+                          {
+                            onPress: handleSendCode,
+                            disabled: loading,
+                            style: { ...buttonBase, backgroundColor: loading ? "#93c5fd" : "#3b82f6" },
+                            activeOpacity: 0.7,
+                            children: [
+                              loading ? /* @__PURE__ */ jsx2(ActivityIndicator, { size: "small", color: "#fff" }) : null,
+                              /* @__PURE__ */ jsx2(Text2, { style: { color: "#fff", fontWeight: "600", fontSize: 12, textTransform: "uppercase", letterSpacing: 1 }, children: loading ? "Sending\u2026" : "Send Code" })
+                            ]
+                          }
+                        )
+                      ] })
+                    ] })
+                  ) : (
+                    /* ---------- Step 2: Code ---------- */
+                    /* @__PURE__ */ jsxs2(View2, { children: [
+                      /* @__PURE__ */ jsxs2(Text2, { style: { fontSize: 13, color: "#64748b", marginBottom: 16, lineHeight: 18 }, children: [
+                        "We sent a 6-digit code to",
+                        " ",
+                        /* @__PURE__ */ jsx2(Text2, { style: { fontWeight: "600", color: "#1e293b" }, children: email.trim() }),
+                        " ",
+                        ". Enter it below to sign in."
+                      ] }),
+                      /* @__PURE__ */ jsx2(View2, { style: { alignItems: "center", marginBottom: 16 }, children: /* @__PURE__ */ jsx2(
+                        OtpInput,
+                        {
+                          value: otp,
+                          onChange: (val) => {
+                            setOtp(val);
+                            if (error) setError(null);
+                          },
+                          onComplete: (code) => handleVerifyOtp(code),
+                          disabled: loading,
+                          error: !!error,
+                          autoFocus: true
+                        }
+                      ) }),
+                      /* @__PURE__ */ jsxs2(
+                        View2,
+                        {
+                          style: {
+                            flexDirection: "row",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            marginBottom: 24,
+                            paddingHorizontal: 4
+                          },
+                          children: [
+                            /* @__PURE__ */ jsx2(TouchableOpacity2, { onPress: handleBackToEmail, disabled: loading, activeOpacity: 0.7, children: /* @__PURE__ */ jsx2(Text2, { style: { fontSize: 12, fontWeight: "600", color: "#64748b" }, children: "Change email" }) }),
+                            cooldown > 0 ? /* @__PURE__ */ jsxs2(Text2, { style: { fontSize: 12, color: "#94a3b8", fontWeight: "500" }, children: [
+                              "Resend in ",
+                              cooldown,
+                              "s"
+                            ] }) : /* @__PURE__ */ jsxs2(
+                              TouchableOpacity2,
+                              {
+                                onPress: handleResendCode,
+                                disabled: resending || loading,
+                                style: { flexDirection: "row", alignItems: "center", gap: 6 },
+                                activeOpacity: 0.7,
+                                children: [
+                                  resending ? /* @__PURE__ */ jsx2(ActivityIndicator, { size: "small", color: "#2563eb" }) : null,
+                                  /* @__PURE__ */ jsx2(Text2, { style: { fontSize: 12, fontWeight: "600", color: "#2563eb" }, children: "Resend Code" })
+                                ]
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs2(View2, { style: { flexDirection: "row", gap: 12 }, children: [
+                        /* @__PURE__ */ jsx2(
+                          TouchableOpacity2,
+                          {
+                            onPress: handleClose,
+                            style: { ...buttonBase, borderWidth: 1, borderColor: "#e5e7eb", backgroundColor: "transparent" },
+                            activeOpacity: 0.7,
+                            children: /* @__PURE__ */ jsx2(Text2, { style: { color: "#64748b", fontWeight: "600", fontSize: 12, textTransform: "uppercase", letterSpacing: 1 }, children: "Cancel" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs2(
+                          TouchableOpacity2,
+                          {
+                            onPress: () => handleVerifyOtp(),
+                            disabled: loading || otp.length < CODE_LENGTH,
+                            style: {
+                              ...buttonBase,
+                              backgroundColor: loading || otp.length < CODE_LENGTH ? "#93c5fd" : "#3b82f6"
+                            },
+                            activeOpacity: 0.7,
+                            children: [
+                              loading ? /* @__PURE__ */ jsx2(ActivityIndicator, { size: "small", color: "#fff" }) : null,
+                              /* @__PURE__ */ jsx2(Text2, { style: { color: "#fff", fontWeight: "600", fontSize: 12, textTransform: "uppercase", letterSpacing: 1 }, children: loading ? "Verifying\u2026" : "Verify & Sign In" })
+                            ]
+                          }
+                        )
+                      ] })
+                    ] })
+                  )
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+}
+export {
+  EmailOtpModal,
+  OtpInput,
+  requestEmailOtp,
+  signInWithEmailOtp,
+  verifyEmailOtp
+};
+//# sourceMappingURL=index.js.map