@umituz/web-dashboard 2.0.9 → 2.1.1

package/src/domains/auth/hooks/useAuth.ts

@@ -0,0 +1,301 @@
+/**
+ * useAuth Hook
+ *
+ * Core authentication hook for managing auth state and actions
+ */
+
+import { useState, useCallback, useEffect } from "react";
+import type {
+  AuthState,
+  User,
+  AuthActions,
+  LoginCredentials,
+  RegisterData,
+  ForgotPasswordData,
+  ResetPasswordData,
+} from "../types/auth";
+import {
+  validateLogin,
+  validateRegister,
+  validateForgotPassword,
+  validateResetPassword,
+} from "../utils/auth";
+
+interface UseAuthOptions {
+  /** Initial authenticated state */
+  initialAuthenticated?: boolean;
+  /** Current user data */
+  initialUser?: User | null;
+  /** Auth implementation (connects to your backend) */
+  authProvider?: {
+    login: (credentials: LoginCredentials) => Promise<User>;
+    register: (data: RegisterData) => Promise<User>;
+    logout: () => Promise<void>;
+    forgotPassword: (data: ForgotPasswordData) => Promise<void>;
+    resetPassword: (data: ResetPasswordData) => Promise<void>;
+    refreshAuth: () => Promise<User | null>;
+  };
+}
+
+/**
+ * useAuth hook
+ *
+ * Manages authentication state and provides auth actions
+ *
+ * @param options - Hook options
+ * @returns Auth state and actions
+ */
+export function useAuth(options: UseAuthOptions = {}) {
+  const {
+    initialAuthenticated = false,
+    initialUser = null,
+    authProvider,
+  } = options;
+
+  // State
+  const [authState, setAuthState] = useState<AuthState>({
+    isAuthenticated: initialAuthenticated,
+    user: initialUser,
+    isLoading: false,
+    error: null,
+  });
+
+  // Update auth state helper
+  const updateState = useCallback((updates: Partial<AuthState>) => {
+    setAuthState((prev) => ({ ...prev, ...updates }));
+  }, []);
+
+  // Login action
+  const login = useCallback(async (credentials: LoginCredentials) => {
+    // Validate credentials
+    const validation = validateLogin(credentials);
+    if (!validation.valid) {
+      updateState({ error: validation.error });
+      throw new Error(validation.error);
+    }
+
+    updateState({ isLoading: true, error: null });
+
+    try {
+      if (!authProvider) {
+        throw new Error("Auth provider not configured");
+      }
+
+      const user = await authProvider.login(credentials);
+      updateState({
+        isAuthenticated: true,
+        user,
+        isLoading: false,
+        error: null,
+      });
+
+      return user;
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Login failed";
+      updateState({
+        isAuthenticated: false,
+        user: null,
+        isLoading: false,
+        error: errorMessage,
+      });
+      throw error;
+    }
+  }, [authProvider, updateState]);
+
+  // Register action
+  const register = useCallback(async (data: RegisterData) => {
+    // Validate registration data
+    const validation = validateRegister(data, false);
+    if (!validation.valid) {
+      updateState({ error: validation.error });
+      throw new Error(validation.error);
+    }
+
+    updateState({ isLoading: true, error: null });
+
+    try {
+      if (!authProvider) {
+        throw new Error("Auth provider not configured");
+      }
+
+      const user = await authProvider.register(data);
+      updateState({
+        isAuthenticated: true,
+        user,
+        isLoading: false,
+        error: null,
+      });
+
+      return user;
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Registration failed";
+      updateState({
+        isAuthenticated: false,
+        user: null,
+        isLoading: false,
+        error: errorMessage,
+      });
+      throw error;
+    }
+  }, [authProvider, updateState]);
+
+  // Logout action
+  const logout = useCallback(async () => {
+    updateState({ isLoading: true, error: null });
+
+    try {
+      if (!authProvider) {
+        throw new Error("Auth provider not configured");
+      }
+
+      await authProvider.logout();
+
+      updateState({
+        isAuthenticated: false,
+        user: null,
+        isLoading: false,
+        error: null,
+      });
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Logout failed";
+      updateState({
+        isLoading: false,
+        error: errorMessage,
+      });
+      throw error;
+    }
+  }, [authProvider, updateState]);
+
+  // Forgot password action
+  const forgotPassword = useCallback(async (data: ForgotPasswordData) => {
+    // Validate email
+    const validation = validateForgotPassword(data);
+    if (!validation.valid) {
+      updateState({ error: validation.error });
+      throw new Error(validation.error);
+    }
+
+    updateState({ isLoading: true, error: null });
+
+    try {
+      if (!authProvider) {
+        throw new Error("Auth provider not configured");
+      }
+
+      await authProvider.forgotPassword(data);
+      updateState({ isLoading: false });
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to send reset email";
+      updateState({
+        isLoading: false,
+        error: errorMessage,
+      });
+      throw error;
+    }
+  }, [authProvider, updateState]);
+
+  // Reset password action
+  const resetPassword = useCallback(async (data: ResetPasswordData) => {
+    // Validate reset data
+    const validation = validateResetPassword(data);
+    if (!validation.valid) {
+      updateState({ error: validation.error });
+      throw new Error(validation.error);
+    }
+
+    updateState({ isLoading: true, error: null });
+
+    try {
+      if (!authProvider) {
+        throw new Error("Auth provider not configured");
+      }
+
+      await authProvider.resetPassword(data);
+      updateState({ isLoading: false });
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to reset password";
+      updateState({
+        isLoading: false,
+        error: errorMessage,
+      });
+      throw error;
+    }
+  }, [authProvider, updateState]);
+
+  // Update profile action
+  const updateProfile = useCallback(async (data: Partial<User>) => {
+    updateState({ isLoading: true, error: null });
+
+    try {
+      // Update local user state
+      setAuthState((prev) => ({
+        ...prev,
+        user: prev.user ? { ...prev.user, ...data } : null,
+        isLoading: false,
+        error: null,
+      }));
+
+      // In production, call your API here
+      // await authProvider?.updateProfile(data);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to update profile";
+      updateState({
+        isLoading: false,
+        error: errorMessage,
+      });
+      throw error;
+    }
+  }, [updateState]);
+
+  // Refresh auth action
+  const refresh = useCallback(async () => {
+    updateState({ isLoading: true, error: null });
+
+    try {
+      if (!authProvider) {
+        throw new Error("Auth provider not configured");
+      }
+
+      const user = await authProvider.refreshAuth();
+
+      updateState({
+        isAuthenticated: !!user,
+        user,
+        isLoading: false,
+        error: null,
+      });
+
+      return user;
+    } catch (error) {
+      updateState({
+        isAuthenticated: false,
+        user: null,
+        isLoading: false,
+        error: null,
+      });
+      throw error;
+    }
+  }, [authProvider, updateState]);
+
+  // Clear error action
+  const clearError = useCallback(() => {
+    updateState({ error: null });
+  }, [updateState]);
+
+  // Auth actions object
+  const authActions: AuthActions = {
+    login,
+    register,
+    logout,
+    forgotPassword,
+    resetPassword,
+    updateProfile,
+    refresh,
+  };
+
+  return {
+    ...authState,
+    ...authActions,
+    clearError,
+  };
+}

package/src/domains/auth/index.ts

@@ -0,0 +1,58 @@
+/**
+ * Auth Domain
+ *
+ * Main entry point for authentication domain
+ */
+
+// Components
+export {
+  AuthLayout,
+  LoginForm,
+  RegisterForm,
+  ForgotPasswordForm,
+  ResetPasswordForm,
+} from "./components";
+
+// Hooks
+export {
+  useAuth,
+} from "./hooks";
+
+// Utils
+export {
+  isValidEmail,
+  isValidPassword,
+  validateLogin,
+  validateRegister,
+  validateForgotPassword,
+  validateResetPassword,
+  getUserDisplayName,
+  getUserInitials,
+  isEmailVerified,
+  formatUserCreatedAt,
+  maskEmail,
+  generateResetToken,
+  calculatePasswordStrength,
+  getPasswordStrengthLabel,
+  sanitizeInput,
+} from "./utils";
+
+// Types
+export type {
+  LoginCredentials,
+  RegisterData,
+  ForgotPasswordData,
+  ResetPasswordData,
+  AuthState,
+  User,
+  AuthActions,
+  AuthComponentProps,
+  AuthStep,
+  AuthConfig,
+  SocialProvider,
+  AuthLayoutProps,
+  LoginFormProps,
+  RegisterFormProps,
+  ForgotPasswordFormProps,
+  ResetPasswordFormProps,
+} from "./types";

package/src/domains/auth/types/auth.ts

@@ -0,0 +1,265 @@
+/**
+ * Auth Types
+ *
+ * Type definitions for authentication system
+ */
+
+import type { ComponentType, ReactElement } from "react";
+
+/**
+ * User credentials for login
+ */
+export interface LoginCredentials {
+  /** Email address */
+  email: string;
+  /** Password */
+  password: string;
+}
+
+/**
+ * Registration data
+ */
+export interface RegisterData {
+  /** Email address */
+  email: string;
+  /** Password */
+  password: string;
+  /** Full name */
+  name?: string;
+  /** Additional user data */
+  metadata?: Record<string, unknown>;
+}
+
+/**
+ * Password reset request
+ */
+export interface ForgotPasswordData {
+  /** Email address */
+  email: string;
+}
+
+/**
+ * Password reset confirmation
+ */
+export interface ResetPasswordData {
+  /** Reset token from email */
+  token: string;
+  /** New password */
+  password: string;
+  /** Password confirmation */
+  confirmPassword: string;
+}
+
+/**
+ * Auth state
+ */
+export interface AuthState {
+  /** Is user authenticated */
+  isAuthenticated: boolean;
+  /** Current user data */
+  user: User | null;
+  /** Is authentication loading */
+  isLoading: boolean;
+  /** Authentication error */
+  error: string | null;
+}
+
+/**
+ * User profile
+ */
+export interface User {
+  /** Unique user ID */
+  id: string;
+  /** Email address */
+  email: string;
+  /** Display name */
+  name?: string;
+  /** Profile avatar URL */
+  avatar?: string;
+  /** Email verification status */
+  emailVerified?: boolean;
+  /** Additional user data */
+  metadata?: Record<string, unknown>;
+  /** Account creation date */
+  createdAt?: string;
+  /** Last login date */
+  lastLoginAt?: string;
+}
+
+/**
+ * Auth actions
+ */
+export interface AuthActions {
+  /** Login with email/password */
+  login: (credentials: LoginCredentials) => Promise<void>;
+  /** Register new account */
+  register: (data: RegisterData) => Promise<void>;
+  /** Logout current user */
+  logout: () => Promise<void>;
+  /** Send password reset email */
+  forgotPassword: (data: ForgotPasswordData) => Promise<void>;
+  /** Reset password with token */
+  resetPassword: (data: ResetPasswordData) => Promise<void>;
+  /** Update user profile */
+  updateProfile: (data: Partial<User>) => Promise<void>;
+  /** Refresh authentication session */
+  refresh: () => Promise<void>;
+}
+
+/**
+ * Auth component props
+ */
+export interface AuthComponentProps {
+  /** Current auth state */
+  authState: AuthState;
+  /** Auth actions */
+  authActions: AuthActions;
+  /** Update auth state */
+  setAuthState: (state: Partial<AuthState>) => void;
+}
+
+/**
+ * Auth step configuration
+ */
+export interface AuthStep {
+  /** Step identifier */
+  id: string;
+  /** Step title */
+  title: string;
+  /** Step description */
+  description?: string;
+  /** Custom component */
+  component?: ComponentType<AuthComponentProps> | ReactElement;
+  /** Validation function */
+  validate?: (data: Record<string, unknown>) => boolean;
+}
+
+/**
+ * Auth configuration
+ */
+export interface AuthConfig {
+  /** Brand/application name */
+  brandName: string;
+  /** Brand tagline */
+  brandTagline?: string;
+  /** Login route */
+  loginRoute: string;
+  /** Register route */
+  registerRoute: string;
+  /** Forgot password route */
+  forgotPasswordRoute?: string;
+  /** Route after successful login */
+  afterLoginRoute: string;
+  /** Route after logout */
+  afterLogoutRoute: string;
+  /** Show social login options */
+  showSocialLogin?: boolean;
+  /** Available social providers */
+  socialProviders?: SocialProvider[];
+  /** Enable remember me */
+  enableRememberMe?: boolean;
+  /** Enable email verification */
+  requireEmailVerification?: boolean;
+  /** Auth steps (for multi-step onboarding) */
+  steps?: AuthStep[];
+  /** Additional configuration */
+  metadata?: Record<string, unknown>;
+}
+
+/**
+ * Social login provider
+ */
+export interface SocialProvider {
+  /** Provider ID */
+  id: string;
+  /** Display name */
+  name: string;
+  /** Icon/emoji */
+  icon: string;
+  /** Color theme */
+  color?: string;
+  /** Scopes to request */
+  scopes?: string[];
+}
+
+/**
+ * Auth layout props
+ */
+export interface AuthLayoutProps {
+  /** Auth configuration */
+  config: AuthConfig;
+  /** Current auth state */
+  authState?: AuthState;
+  /** Auth actions */
+  authActions?: AuthActions;
+  /** Children content */
+  children?: React.ReactNode;
+}
+
+/**
+ * Login form props
+ */
+export interface LoginFormProps {
+  /** Auth configuration */
+  config: AuthConfig;
+  /** Initial credentials */
+  defaultCredentials?: Partial<LoginCredentials>;
+  /** Show remember me checkbox */
+  showRememberMe?: boolean;
+  /** Show forgot password link */
+  showForgotPassword?: boolean;
+  /** Show register link */
+  showRegisterLink?: boolean;
+  /** On successful login */
+  onLoginSuccess?: (user: User) => void | Promise<void>;
+  /** On login error */
+  onLoginError?: (error: string) => void;
+}
+
+/**
+ * Register form props
+ */
+export interface RegisterFormProps {
+  /** Auth configuration */
+  config: AuthConfig;
+  /** Initial registration data */
+  defaultData?: Partial<RegisterData>;
+  /** Show terms checkbox */
+  showTerms?: boolean;
+  /** Show login link */
+  showLoginLink?: boolean;
+  /** Require password confirmation */
+  requirePasswordConfirm?: boolean;
+  /** On successful registration */
+  onRegisterSuccess?: (user: User) => void | Promise<void>;
+  /** On registration error */
+  onRegisterError?: (error: string) => void;
+}
+
+/**
+ * Forgot password form props
+ */
+export interface ForgotPasswordFormProps {
+  /** Auth configuration */
+  config: AuthConfig;
+  /** On success */
+  onSuccess?: () => void | Promise<void>;
+  /** On error */
+  onError?: (error: string) => void;
+  /** Show back to login link */
+  showBackLink?: boolean;
+}
+
+/**
+ * Reset password form props
+ */
+export interface ResetPasswordFormProps {
+  /** Auth configuration */
+  config: AuthConfig;
+  /** Reset token */
+  token: string;
+  /** On success */
+  onSuccess?: () => void | Promise<void>;
+  /** On error */
+  onError?: (error: string) => void;
+}

package/src/domains/auth/types/index.ts

@@ -0,0 +1,24 @@
+/**
+ * Auth Types
+ *
+ * Export all auth-related types
+ */
+
+export type {
+  LoginCredentials,
+  RegisterData,
+  ForgotPasswordData,
+  ResetPasswordData,
+  AuthState,
+  User,
+  AuthActions,
+  AuthComponentProps,
+  AuthStep,
+  AuthConfig,
+  SocialProvider,
+  AuthLayoutProps,
+  LoginFormProps,
+  RegisterFormProps,
+  ForgotPasswordFormProps,
+  ResetPasswordFormProps,
+} from "./auth";