@digilogiclabs/saas-factory-auth 0.2.0 → 0.3.2

package/dist/components/native/index.mjs

@@ -0,0 +1,595 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { StyleSheet, Alert, View, Text, TextInput, TouchableOpacity, Image } from 'react-native';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+
+// src/core/IAuthProvider.ts
+var AuthError = class _AuthError extends Error {
+  constructor(type, message, originalError, context) {
+    super(message);
+    this.type = type;
+    this.originalError = originalError;
+    this.context = context;
+    this.name = "AuthError";
+    this.timestamp = /* @__PURE__ */ new Date();
+    this.code = type;
+    Object.setPrototypeOf(this, _AuthError.prototype);
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, _AuthError);
+    }
+  }
+  /**
+   * Convert error to JSON for logging/debugging
+   */
+  toJSON() {
+    return {
+      name: this.name,
+      type: this.type,
+      code: this.code,
+      message: this.message,
+      timestamp: this.timestamp.toISOString(),
+      context: this.context,
+      originalError: this.originalError ? {
+        name: this.originalError.name,
+        message: this.originalError.message,
+        code: this.originalError.code
+      } : undefined
+    };
+  }
+  /**
+   * Check if error is of a specific type
+   */
+  isType(type) {
+    return this.type === type;
+  }
+  /**
+   * Check if error is retryable
+   */
+  isRetryable() {
+    return [
+      "NETWORK_ERROR" /* NETWORK_ERROR */,
+      "PROVIDER_ERROR" /* PROVIDER_ERROR */
+    ].includes(this.type);
+  }
+};
+var AuthContext = createContext(null);
+
+// src/hooks/useAuthForm.ts
+var useAuthForm = (options = {}) => {
+  const auth = useContext(AuthContext);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [message, setMessage] = useState(null);
+  if (!auth) {
+    throw new Error("useAuthForm must be used within AuthProvider");
+  }
+  const clearError = () => setError(null);
+  const clearMessage = () => setMessage(null);
+  const handleSignIn = async () => {
+    var _a, _b;
+    setLoading(true);
+    setError(null);
+    setMessage(null);
+    try {
+      await auth.signIn(email, password);
+      (_a = options.onSuccess) == null ? void 0 : _a.call(options);
+    } catch (err) {
+      const authError = err instanceof AuthError ? err : new AuthError("PROVIDER_ERROR" /* PROVIDER_ERROR */, err.message);
+      setError(authError.message);
+      (_b = options.onError) == null ? undefined : _b.call(options, authError);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleSignUp = async () => {
+    var _a, _b;
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    setMessage(null);
+    try {
+      await auth.signUp(email, password);
+      setMessage("Check your email to confirm your account");
+      (_a = options.onSuccess) == null ? void 0 : _a.call(options);
+    } catch (err) {
+      const authError = err instanceof AuthError ? err : new AuthError("PROVIDER_ERROR" /* PROVIDER_ERROR */, err.message);
+      setError(authError.message);
+      (_b = options.onError) == null ? undefined : _b.call(options, authError);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleOAuthSignIn = async (provider) => {
+    var _a, _b;
+    setLoading(true);
+    setError(null);
+    try {
+      await auth.signInWithOAuth(provider, options.redirectUrl);
+      (_a = options.onSuccess) == null ? void 0 : _a.call(options);
+    } catch (err) {
+      const authError = err instanceof AuthError ? err : new AuthError("PROVIDER_ERROR" /* PROVIDER_ERROR */, err.message);
+      setError(authError.message);
+      (_b = options.onError) == null ? undefined : _b.call(options, authError);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handlePasswordReset = async () => {
+    var _a;
+    if (!email) {
+      setError("Please enter your email address");
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    setMessage(null);
+    try {
+      await auth.resetPassword(email);
+      setMessage("Password reset email sent");
+    } catch (err) {
+      const authError = err instanceof AuthError ? err : new AuthError("PROVIDER_ERROR" /* PROVIDER_ERROR */, err.message);
+      setError(authError.message);
+      (_a = options.onError) == null ? undefined : _a.call(options, authError);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleMagicLink = async () => {
+    var _a;
+    if (!email) {
+      setError("Please enter your email address");
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    setMessage(null);
+    try {
+      await auth.signInWithMagicLink(email, options.redirectUrl);
+      setMessage("Magic link sent to your email");
+    } catch (err) {
+      const authError = err instanceof AuthError ? err : new AuthError("PROVIDER_ERROR" /* PROVIDER_ERROR */, err.message);
+      setError(authError.message);
+      (_a = options.onError) == null ? undefined : _a.call(options, authError);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return {
+    // State
+    email,
+    password,
+    confirmPassword,
+    loading,
+    error,
+    message,
+    // Actions
+    setEmail,
+    setPassword,
+    setConfirmPassword,
+    handleSignIn,
+    handleSignUp,
+    handleOAuthSignIn,
+    handlePasswordReset,
+    handleMagicLink,
+    clearError,
+    clearMessage
+  };
+};
+var AuthForm = ({
+  mode = "signin",
+  onSuccess,
+  onModeChange,
+  redirectUrl,
+  showOAuth = true,
+  oauthProviders = ["google", "github"],
+  style
+}) => {
+  const {
+    email,
+    password,
+    confirmPassword,
+    loading,
+    error,
+    message,
+    setEmail,
+    setPassword,
+    setConfirmPassword,
+    handleSignIn,
+    handleSignUp,
+    handleOAuthSignIn,
+    handlePasswordReset,
+    handleMagicLink,
+    clearError,
+    clearMessage
+  } = useAuthForm({ onSuccess, redirectUrl });
+  const handleSubmit = async () => {
+    if (mode === "signin") {
+      await handleSignIn();
+    } else if (mode === "signup") {
+      await handleSignUp();
+    } else if (mode === "reset") {
+      await handlePasswordReset();
+    }
+  };
+  const handleOAuthPress = async (provider) => {
+    try {
+      await handleOAuthSignIn(provider);
+    } catch (err) {
+      Alert.alert("OAuth Error", "OAuth sign-in is not fully supported in React Native yet. Please use email/password authentication.");
+    }
+  };
+  const handleMagicLinkPress = async () => {
+    await handleMagicLink();
+  };
+  React.useEffect(() => {
+    if (error) {
+      Alert.alert("Error", error, [{ text: "OK", onPress: clearError }]);
+    }
+  }, [error, clearError]);
+  React.useEffect(() => {
+    if (message) {
+      Alert.alert("Success", message, [{ text: "OK", onPress: clearMessage }]);
+    }
+  }, [message, clearMessage]);
+  return /* @__PURE__ */ jsxs(View, { style: [styles.container, style], children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.title, children: mode === "signin" ? "Sign In" : mode === "signup" ? "Sign Up" : "Reset Password" }),
+    /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        style: styles.input,
+        placeholder: "Email",
+        value: email,
+        onChangeText: setEmail,
+        keyboardType: "email-address",
+        autoCapitalize: "none",
+        autoCorrect: false
+      }
+    ),
+    mode !== "reset" && /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        style: styles.input,
+        placeholder: "Password",
+        value: password,
+        onChangeText: setPassword,
+        secureTextEntry: true,
+        autoCapitalize: "none",
+        autoCorrect: false
+      }
+    ),
+    mode === "signup" && /* @__PURE__ */ jsx(
+      TextInput,
+      {
+        style: styles.input,
+        placeholder: "Confirm Password",
+        value: confirmPassword,
+        onChangeText: setConfirmPassword,
+        secureTextEntry: true,
+        autoCapitalize: "none",
+        autoCorrect: false
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      TouchableOpacity,
+      {
+        style: [styles.button, loading && styles.buttonDisabled],
+        onPress: handleSubmit,
+        disabled: loading,
+        children: /* @__PURE__ */ jsx(Text, { style: styles.buttonText, children: loading ? "Loading..." : mode === "signin" ? "Sign In" : mode === "signup" ? "Sign Up" : "Send Reset Email" })
+      }
+    ),
+    mode === "signin" && /* @__PURE__ */ jsx(
+      TouchableOpacity,
+      {
+        style: styles.linkButton,
+        onPress: handleMagicLinkPress,
+        disabled: loading,
+        children: /* @__PURE__ */ jsx(Text, { style: styles.linkText, children: "Send Magic Link" })
+      }
+    ),
+    showOAuth && mode !== "reset" && /* @__PURE__ */ jsxs(View, { style: styles.oauthContainer, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.oauthTitle, children: "Or continue with:" }),
+      oauthProviders.map((provider) => /* @__PURE__ */ jsx(
+        TouchableOpacity,
+        {
+          style: styles.oauthButton,
+          onPress: () => handleOAuthPress(provider),
+          disabled: loading,
+          children: /* @__PURE__ */ jsx(Text, { style: styles.oauthButtonText, children: provider.charAt(0).toUpperCase() + provider.slice(1) })
+        },
+        provider
+      ))
+    ] }),
+    /* @__PURE__ */ jsxs(View, { style: styles.footer, children: [
+      mode === "signin" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(TouchableOpacity, { onPress: () => onModeChange == null ? undefined : onModeChange("signup"), children: /* @__PURE__ */ jsx(Text, { style: styles.linkText, children: "Don't have an account? Sign up" }) }),
+        /* @__PURE__ */ jsx(TouchableOpacity, { onPress: () => onModeChange == null ? undefined : onModeChange("reset"), children: /* @__PURE__ */ jsx(Text, { style: styles.linkText, children: "Forgot password?" }) })
+      ] }),
+      mode === "signup" && /* @__PURE__ */ jsx(TouchableOpacity, { onPress: () => onModeChange == null ? undefined : onModeChange("signin"), children: /* @__PURE__ */ jsx(Text, { style: styles.linkText, children: "Already have an account? Sign in" }) }),
+      mode === "reset" && /* @__PURE__ */ jsx(TouchableOpacity, { onPress: () => onModeChange == null ? undefined : onModeChange("signin"), children: /* @__PURE__ */ jsx(Text, { style: styles.linkText, children: "Back to sign in" }) })
+    ] })
+  ] });
+};
+var styles = StyleSheet.create({
+  container: {
+    padding: 20,
+    backgroundColor: "#fff"
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "bold",
+    textAlign: "center",
+    marginBottom: 30,
+    color: "#333"
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: "#ddd",
+    borderRadius: 8,
+    padding: 15,
+    marginBottom: 15,
+    fontSize: 16,
+    backgroundColor: "#f9f9f9"
+  },
+  button: {
+    backgroundColor: "#007AFF",
+    borderRadius: 8,
+    padding: 15,
+    alignItems: "center",
+    marginBottom: 15
+  },
+  buttonDisabled: {
+    backgroundColor: "#ccc"
+  },
+  buttonText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600"
+  },
+  linkButton: {
+    alignItems: "center",
+    marginBottom: 20
+  },
+  linkText: {
+    color: "#007AFF",
+    fontSize: 14,
+    textAlign: "center",
+    marginVertical: 5
+  },
+  oauthContainer: {
+    marginTop: 20,
+    paddingTop: 20,
+    borderTopWidth: 1,
+    borderTopColor: "#eee"
+  },
+  oauthTitle: {
+    textAlign: "center",
+    color: "#666",
+    marginBottom: 15,
+    fontSize: 14
+  },
+  oauthButton: {
+    borderWidth: 1,
+    borderColor: "#ddd",
+    borderRadius: 8,
+    padding: 15,
+    alignItems: "center",
+    marginBottom: 10,
+    backgroundColor: "#f9f9f9"
+  },
+  oauthButtonText: {
+    color: "#333",
+    fontSize: 16,
+    fontWeight: "500"
+  },
+  footer: {
+    marginTop: 20,
+    alignItems: "center"
+  }
+});
+var useAuth = () => {
+  const store = useContext(AuthContext);
+  if (!store) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  useEffect(() => {
+    return () => {
+    };
+  }, [store]);
+  return __spreadValues({}, store);
+};
+var AuthStatus = ({
+  showSignOut = true,
+  showUserInfo = true,
+  onSignOut,
+  style
+}) => {
+  const { user, loading, signOut } = useAuth();
+  const handleSignOut = async () => {
+    try {
+      await signOut();
+      onSignOut == null ? void 0 : onSignOut();
+    } catch (error) {
+      console.error("Sign out error:", error);
+    }
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx(View, { style: [styles2.container, style], children: /* @__PURE__ */ jsx(Text, { style: styles2.loadingText, children: "Loading..." }) });
+  }
+  if (!user) {
+    return /* @__PURE__ */ jsx(View, { style: [styles2.container, style], children: /* @__PURE__ */ jsx(Text, { style: styles2.statusText, children: "Not signed in" }) });
+  }
+  return /* @__PURE__ */ jsxs(View, { style: [styles2.container, style], children: [
+    showUserInfo && /* @__PURE__ */ jsxs(View, { style: styles2.userInfo, children: [
+      user.photoURL && /* @__PURE__ */ jsx(Image, { source: { uri: user.photoURL }, style: styles2.avatar }),
+      /* @__PURE__ */ jsxs(View, { style: styles2.userDetails, children: [
+        user.displayName && /* @__PURE__ */ jsx(Text, { style: styles2.displayName, children: user.displayName }),
+        /* @__PURE__ */ jsx(Text, { style: styles2.email, children: user.email })
+      ] })
+    ] }),
+    showSignOut && /* @__PURE__ */ jsx(TouchableOpacity, { style: styles2.signOutButton, onPress: handleSignOut, children: /* @__PURE__ */ jsx(Text, { style: styles2.signOutText, children: "Sign Out" }) })
+  ] });
+};
+var styles2 = StyleSheet.create({
+  container: {
+    padding: 15,
+    backgroundColor: "#f9f9f9",
+    borderRadius: 8,
+    margin: 10
+  },
+  loadingText: {
+    textAlign: "center",
+    color: "#666",
+    fontSize: 16
+  },
+  statusText: {
+    textAlign: "center",
+    color: "#666",
+    fontSize: 16
+  },
+  userInfo: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 15
+  },
+  avatar: {
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+    marginRight: 15
+  },
+  userDetails: {
+    flex: 1
+  },
+  displayName: {
+    fontSize: 18,
+    fontWeight: "600",
+    color: "#333",
+    marginBottom: 2
+  },
+  email: {
+    fontSize: 14,
+    color: "#666"
+  },
+  signOutButton: {
+    backgroundColor: "#FF3B30",
+    borderRadius: 6,
+    padding: 12,
+    alignItems: "center"
+  },
+  signOutText: {
+    color: "#fff",
+    fontSize: 16,
+    fontWeight: "600"
+  }
+});
+var useProtectedRoute = (options = {}) => {
+  const auth = useContext(AuthContext);
+  useEffect(() => {
+    if (!auth || auth.loading) return;
+    const checkAuth = async () => {
+      var _a, _b;
+      const user = await auth.getUser();
+      if (!user) {
+        (_a = options.onUnauthenticated) == null ? undefined : _a.call(options);
+        return;
+      }
+      if (options.requiredRoles && options.requiredRoles.length > 0) {
+        const userRoles = user.roles || [];
+        const hasRequiredRole = options.requiredRoles.some((role) => userRoles.includes(role));
+        if (!hasRequiredRole) {
+          (_b = options.onUnauthorized) == null ? undefined : _b.call(options);
+          return;
+        }
+      }
+    };
+    checkAuth();
+    const unsubscribe = auth.onAuthStateChange((event, session) => {
+      var _a;
+      if (!(session == null ? undefined : session.user)) {
+        (_a = options.onUnauthenticated) == null ? undefined : _a.call(options);
+      }
+    });
+    return () => {
+      var _a, _b;
+      if (typeof unsubscribe === "function") {
+        unsubscribe();
+      } else if (unsubscribe && "data" in unsubscribe && ((_b = (_a = unsubscribe.data) == null ? undefined : _a.subscription) == null ? undefined : _b.unsubscribe)) {
+        unsubscribe.data.subscription.unsubscribe();
+      }
+    };
+  }, [auth, options]);
+  return {
+    user: auth == null ? undefined : auth.user,
+    loading: auth == null ? undefined : auth.loading,
+    isAuthenticated: !!(auth == null ? undefined : auth.user)
+  };
+};
+var ProtectedRoute = ({
+  children,
+  requiredRoles,
+  fallback,
+  loadingComponent,
+  onUnauthenticated,
+  onUnauthorized
+}) => {
+  const { user, loading, isAuthenticated } = useProtectedRoute({
+    requiredRoles,
+    onUnauthenticated,
+    onUnauthorized
+  });
+  if (loading) {
+    return loadingComponent || /* @__PURE__ */ jsx(View, { style: styles3.container, children: /* @__PURE__ */ jsx(Text, { style: styles3.text, children: "Loading..." }) });
+  }
+  if (!isAuthenticated) {
+    return fallback || /* @__PURE__ */ jsx(View, { style: styles3.container, children: /* @__PURE__ */ jsx(Text, { style: styles3.text, children: "Please sign in to access this content" }) });
+  }
+  if (requiredRoles && requiredRoles.length > 0) {
+    const userRoles = (user == null ? undefined : user.roles) || [];
+    const hasRequiredRole = requiredRoles.some((role) => userRoles.includes(role));
+    if (!hasRequiredRole) {
+      return fallback || /* @__PURE__ */ jsx(View, { style: styles3.container, children: /* @__PURE__ */ jsx(Text, { style: styles3.text, children: "You don't have permission to access this content" }) });
+    }
+  }
+  return /* @__PURE__ */ jsx(Fragment, { children });
+};
+var styles3 = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+    backgroundColor: "#f9f9f9"
+  },
+  text: {
+    fontSize: 16,
+    color: "#666",
+    textAlign: "center"
+  }
+});
+
+export { AuthForm, AuthStatus, ProtectedRoute };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map