📋 Overview

AuthMaster – Authentication UI Kit is a premium, production-ready authentication UI kit featuring 5 distinct themes and multiple authentication flows. Built with Tailwind CSS and vanilla JavaScript for maximum flexibility and easy customization. The kit is designed to be lightweight, dependency-free (all assets included locally), and fully responsive across all devices. Includes built-in form validation, accessibility features, and dark mode support.

Key Highlights

• 5 Unique Themes: Minimal, Glassmorphism, Corporate, Creative, and Mobile-First
• 6 Authentication Flows: Sign In, Sign Up, Forgot Password, OTP Verification, Reset Password, and Two-Factor Authentication (2FA)
• Social Login UI: Ready-to-use buttons for Google, Facebook, and GitHub OAuth
• Password Strength Meter: Real-time visual password strength indicator
• Loading States: Professional loading spinners during form submission
• Remember Me: Persistent email storage with localStorage
• Toast Notifications: Modern notification system for user feedback
• Fully Responsive: Works seamlessly across all devices and screen sizes
• Modern Design: Clean, professional, and user-friendly interfaces
• Easy Customization: Well-organized code structure for easy modifications
• No Dependencies: Pure HTML, CSS, and JavaScript (Tailwind CDN)
• Production Ready: Clean code following best practices
• Local Fonts: All fonts are hosted locally for better performance

✨ Features

🎨 Themes

1. Minimal Theme

A clean and simple design with subtle shadows and modern typography. Perfect for minimalist applications and modern web apps.

• Clean white card design
• Subtle shadows and borders
• Minimal color palette
• Professional typography
• Full dark mode support

2. Glassmorphism Theme

Modern glassmorphism effect with animated backgrounds. Ideal for creative and modern applications with a futuristic feel.

• Glassmorphism card effects
• Animated gradient backgrounds
• Blur and transparency effects
• Dark theme optimized

3. Corporate Theme

Professional corporate design with sidebar layout. Perfect for B2B applications and enterprise software.

• Split-screen layout
• Sidebar with testimonial
• Professional color scheme
• Corporate branding ready
• Full dark mode support

4. Creative Theme

Bold and vibrant design with gradient backgrounds. Great for creative agencies and modern startups.

• Split-screen with illustration
• Gradient backgrounds
• Bold typography
• Creative visual elements
• Full dark mode support

5. Mobile-First Theme

Mobile-optimized design with app-like interface. Perfect for mobile applications and progressive web apps.

• Phone frame design
• Mobile-optimized inputs
• App-like interface
• Touch-friendly controls
• Full dark mode support

📁 File Structure

The project follows Envato marketplace standards with a clean, organized structure:

File Descriptions

🚀 Installation

Quick Start

1. Download and extract the AuthMaster UI Kit files
2. Open index.html in your web browser
3. Start customizing to match your needs

Local Development

For better development experience, use a local server:

Using Python

# Python 3
python -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

Using Node.js

# Install http-server globally
npm install -g http-server

# Run server
http-server

Using PHP

php -S localhost:8000

Then navigate to http://localhost:8000 in your browser.

Production Deployment

1. Upload all files to your web server maintaining the folder structure
2. Ensure proper file permissions (HTML: 644, CSS/JS: 644, Directories: 755)
3. Test the deployment by accessing your domain
4. Configure HTTPS for secure contexts

⚙️ Customization

Application Configuration

Most customizable values are centralized in assets/js/app-config.js. This includes:

• Default values: Theme, flow, mode, email
• Text content: Titles, subtitles, button labels, links, messages
• Validation rules: Password length, OTP length
• API settings: Timeout, endpoints
• Company branding: Company name, logo (image URL or inline SVG), testimonial
• UI settings: Animation duration, panel width

Example - Changing default theme:

// In assets/js/app-config.js
defaults: {
  theme: 'glass', // Change from 'minimal' to 'glass'
  flow: 'signin',
  mode: 'system',
  email: ''
}

Example - Customizing button text:

// In assets/js/app-config.js
content: {
  buttons: {
    signin: 'Log In', // Customize button text
    signup: 'Get Started',
    forgot: 'Send Reset Link',
    otp: 'Verify Code',
    reset: 'Update Password',
    twofactor: 'Verify Code'
  }
}

Example - Adding company logo (Corporate theme):

// In assets/js/app-config.js
content: {
  company: {
    name: 'Your Company',
    logo: 'assets/images/logo.png', // Image URL or SVG path
    // Or use inline SVG:
    // logo: '',
    // If empty, shield icon will be used as fallback
  }
}

Changing Colors

Edit the Tailwind configuration in assets/js/config.js:

colors: {
  brand: {
    500: '#6366f1',  // Your primary color
    600: '#4f46e5'   // Your primary dark color
  }
}

Modifying Themes

All theme layouts are modularized in separate files in assets/js/themes/:

• minimal.js - Minimal theme
• glass.js - Glassmorphism theme
• corporate.js - Corporate theme
• creative.js - Creative theme
• mobile.js - Mobile-first theme

You can modify any theme by editing its respective file.

Adding New Flows

Add new authentication flows in assets/js/components/forms/ directory. Create a new form file and register it in assets/js/components/forms/index.js.

Modular Architecture

The AuthMaster UI Kit uses a modular JavaScript architecture for better maintainability:

• Core Modules (assets/js/core/): State management, rendering, mode switching, controller
• Components (assets/js/components/): Reusable UI components (InputField, ActionButton, forms)
• Themes (assets/js/themes/): Individual theme layout files
• Utilities (assets/js/utils/): Helper functions (logger)
• Configuration: Centralized in app-config.js for easy customization

This modular structure makes it easy to customize individual components without affecting others, and allows you to remove unused features for production builds.

Form Validation

The validation system is located in assets/js/validation.js. It provides:

• Real-time field validation on blur
• Form-wide validation on submit
• Customizable validation rules
• Accessible error messages
• Theme-aware error styling

To customize validation rules, edit the rules object in validation.js or configure them in app-config.js:

// In assets/js/app-config.js
validation: {
  minPasswordLength: 8,
  minTextLength: 2,
  otpLength: 4,
  emailRegex: /^[^\s@]+@[^\s@]+\.[^\s@]+$/
}

Customizing Fonts

Fonts are defined in assets/css/style.css using @font-face declarations. To use different fonts:

1. Download your desired fonts
2. Place font files in assets/fonts/
3. Update @font-face declarations in style.css
4. Update font-family references in assets/js/config.js

Company Branding

Configure company branding in assets/js/app-config.js:

content: {
  company: {
    name: 'Your Company Name',
    logo: 'assets/images/logo.png', // Image URL or inline SVG
    // If empty, shield icon will be used as fallback
    testimonial: {
      quote: 'Your testimonial quote',
      author: 'Author Name',
      role: 'Author Role'
    }
  }
}

Note: For detailed logo and icon customization instructions, see the Logo & Icons Customization section.

🎯 Setting a Single Theme

When deploying to production, you typically want to use a single theme instead of allowing users to switch between themes. This section explains how to lock your application to a single theme.

Quick Setup (3 Steps)

Step 1: Set Your Default Theme

Open assets/js/app-config.js and set your desired theme:

defaults: {
  theme: 'corporate', // Choose: minimal, glass, corporate, creative, or mobile
  flow: 'signin',
  mode: 'system',
  email: ''
}

Step 2: Remove the Theme Switcher UI

Open index.html and remove or comment out the entire "UI CONTROLLER" section. This is the floating panel in the bottom-right corner (approximately lines 52-203).

<!-- UI CONTROLLER (Floating Widget) -->
<!-- Remove or comment out this entire section -->
<!--
<div class="fixed bottom-6 right-6 z-[9999] ...">
  ...
</div>
-->

Step 3: (Optional) Load Only Your Theme's JavaScript

To reduce file size, you can load only the theme you're using. In index.html, comment out unused theme scripts:

<!-- Themes -->
<!-- <script src="assets/js/themes/minimal.js"></script> -->
<!-- <script src="assets/js/themes/glass.js"></script> -->
<script src="assets/js/themes/corporate.js"></script>
<!-- <script src="assets/js/themes/creative.js"></script> -->
<!-- <script src="assets/js/themes/mobile.js"></script> -->
<script src="assets/js/themes/index.js"></script>

Important: Always keep themes/index.js as it registers the theme.

Advanced: Prevent Theme Switching Programmatically

If you want to ensure theme switching cannot happen even if someone tries to call setTheme() programmatically, you can override the function:

Option 1: Override in app-config.js

Add this at the end of assets/js/app-config.js:

// Lock theme to prevent switching
(function() {
  'use strict';
  
  // Wait for controller to load, then override
  setTimeout(function() {
    if (window.setTheme) {
      const lockedTheme = window.AuthMasterConfig.defaults.theme;
      window.setTheme = function(themeName) {
        // Only allow setting to the locked theme
        if (themeName === lockedTheme) {
          return window.Controller?.setTheme?.(themeName);
        }
        console.warn('Theme switching is disabled. Using locked theme:', lockedTheme);
        return false;
      };
    }
  }, 100);
})();

Complete Example: Corporate Theme Only

Here's a complete example for locking to the Corporate theme:

1. Set theme in app-config.js:

   defaults: {
     theme: 'corporate', // Locked to Corporate
     flow: 'signin',
     mode: 'system',
     email: ''
   }

2. Remove UI controller from index.html (lines 52-203)
3. Load only Corporate theme script in index.html

Benefits of Single Theme Setup

• Smaller file size: Only load the theme you need
• Better performance: Less JavaScript to parse and execute
• Cleaner UI: No theme switcher cluttering the interface
• Brand consistency: Users always see your chosen design
• Easier maintenance: Focus on one theme instead of five

🎨 Logo & Icons Customization

This section provides comprehensive guidance on customizing logos and icons throughout the AuthMaster UI Kit.

Favicon

The favicon is located at assets/images/icon/favicon.svg. To change it:

1. Replace favicon.svg with your custom SVG file
2. Or update the favicon reference in index.html and documentation.html:

<link rel="icon" href="assets/images/icon/your-favicon.svg" type="image/svg+xml" sizes="any">

Recommended favicon sizes:

• SVG: Scalable, best quality
• PNG: 32x32px, 16x16px
• ICO: Multiple sizes in one file

Application Logo

The main application logo appears in themes as a shield icon. To customize the Corporate theme logo:

// In assets/js/app-config.js
content: {
  company: {
    name: 'Your Company',
    logo: 'assets/images/logo.png', // Image URL or SVG path
    // Or use inline SVG:
    // logo: '',
    // If empty, shield icon will be used as fallback
  }
}

To customize icons throughout the application, edit assets/js/icons.js:

// In assets/js/icons.js
window.Icons = {
  shield: `<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" viewBox="0 0 16 16">
    <!-- Your logo SVG path -->
  </svg>`
};

Brand Colors

To change the brand/accent color used throughout the UI:

1. Open assets/js/config.js
2. Modify the brand colors:

colors: {
  brand: {
    500: '#6366f1',  // Primary brand color
    600: '#4f46e5'   // Darker shade for hover states
  }
}

Also update CSS variables in documentation.html:

:root {
  --accent: #6366f1;  // Your brand color
  --accent-rgb: 99, 102, 241;  // RGB values
}

Icon Size Customization

Icons can be resized by modifying the SVG width and height attributes:

// Small icons (16x16)
<svg width="16" height="16">...</svg>

// Medium icons (24x24)
<svg width="24" height="24">...</svg>

// Large icons (32x32)
<svg width="32" height="32">...</svg>

Icon Color Customization

Icons automatically inherit text color via fill="currentColor". To use custom colors:

// In CSS or inline styles:
.icon-custom {
  color: #your-color;
}

// Or directly in SVG:
<svg fill="#your-color">...</svg>

Accessibility for Icons

Always include proper ARIA attributes for icons:

• Decorative icons: aria-hidden="true"
• Interactive icons: aria-label="Description"
• Icon buttons: Include aria-pressed for toggle states

// Decorative icon
<svg aria-hidden="true">...</svg>

// Interactive icon button
<button aria-label="Toggle password visibility" aria-pressed="false">
  <svg>...</svg>
</button>

Complete Icon Replacement Example

Here's a complete example of replacing icons in assets/js/icons.js:

// In assets/js/icons.js
window.Icons = {
  // ... other icons
  
  // Replace system mode icon
  cloudSun: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
    <path d="M7 8a3.5 3.5 0 0 1 3.5 3.555.5.5 0 0 0 .624.492A1.503 1.503 0 0 1 13 13.5a1.5 1.5 0 0 1-1.5 1.5H3a2 2 0 1 1 .1-3.998.5.5 0 0 0 .51-.375A3.5 3.5 0 0 1 7 8m4.473 3a4.5 4.5 0 0 0-8.72-.99A3 3 0 0 0 3 16h8.5a2.5 2.5 0 0 0 0-5z"/>
    <path d="M10.5 1.5a.5.5 0 0 0-1 0v1a.5.5 0 0 0 1 0zm3.743 1.964a.5.5 0 1 0-.707-.707l-.708.707a.5.5 0 0 0 .708.708zm-7.779-.707a.5.5 0 0 0-.707.707l.707.708a.5.5 0 1 0 .708-.708zm1.734 3.374a2 2 0 1 1 3.296 2.198q.3.423.516.898a3 3 0 1 0-4.84-3.225q.529.017 1.028.129m4.484 4.074c.6.215 1.125.59 1.522 1.072a.5.5 0 0 0 .039-.742l-.707-.707a.5.5 0 0 0-.854.377M14.5 6.5a.5.5 0 0 0 0 1h1a.5.5 0 0 0 0-1z"/>
  </svg>`,
  
  // Replace light mode icon
  brightnessAltHigh: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 3a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 3m8 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5m-13.5.5a.5.5 0 0 0 0-1h-2a.5.5 0 0 0 0 1zm11.157-6.157a.5.5 0 0 1 0 .707l-1.414 1.414a.5.5 0 1 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m-9.9 2.121a.5.5 0 0 0 .707-.707L3.05 5.343a.5.5 0 1 0-.707.707zM8 7a4 4 0 0 0-4 4 .5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5 4 4 0 0 0-4-4m0 1a3 3 0 0 1 2.959 2.5H5.04A3 3 0 0 1 8 8"/>
  </svg>`,
  
  // Replace dark mode icon
  moonFill: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
    <path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/>
  </svg>`
};

Troubleshooting Icon Issues

Icons not displaying:

• Check SVG syntax is valid
• Ensure viewBox attribute is present
• Verify file paths are correct
• Check browser console for errors

Icons too large/small:

• Adjust width and height attributes
• Use CSS to control size: .icon { width: 24px; height: 24px; }

Icons not changing color:

• Ensure fill="currentColor" is set
• Remove hardcoded color values from SVG
• Check CSS color inheritance

🔐 Authentication Flows

1. Sign In

Standard login form with email and password fields. Includes "Remember me" checkbox, social login options, and "Forgot Password" link.

• Email input field
• Password input with visibility toggle
• Remember me checkbox (saves email to localStorage)
• Social login buttons (Google, Facebook, GitHub)
• Forgot password link
• Sign up link
• Loading state during submission
• Toast notifications for feedback

2. Sign Up

Registration form with first name, last name, email, password strength meter, and social login options.

• First name and last name fields
• Email input field
• Password input with visibility toggle
• Password strength meter (real-time visual indicator)
• Social login buttons (Google, Facebook, GitHub)
• Terms and Privacy Policy links
• Sign in link
• Loading state during submission
• Toast notifications for feedback

3. Forgot Password

Password recovery form that collects email address.

• Email input field
• Send reset link button
• Back to login link

4. OTP Verification

4-digit code verification form for email verification.

• 4 input fields for OTP digits
• Auto-focus to next field
• Resend code link
• Built-in OTP validation (single digit per field)

5. Reset Password

New password creation form with confirmation field.

• New password input
• Confirm password input
• Both with visibility toggle
• Password match validation
• Loading state during submission
• Toast notifications for feedback

6. Two-Factor Authentication (2FA)

6-digit code verification form for authenticator apps. Includes auto-focus, paste support, and keyboard navigation.

• 6 input fields for verification code
• Auto-focus to next field on input
• Paste support for complete code
• Keyboard navigation (backspace to previous field)
• Resend code functionality
• Back to sign in link
• Loading state during verification
• Toast notifications for feedback

🔌 API Reference

JavaScript Functions

setTheme(themeName)

Changes the active theme.

setTheme('minimal')    // Minimal theme
setTheme('glass')      // Glassmorphism theme
setTheme('corporate')  // Corporate theme
setTheme('creative')   // Creative theme
setTheme('mobile')     // Mobile-first theme

setFlow(flowName)

Changes the active authentication flow.

setFlow('signin')     // Sign In form
setFlow('signup')     // Sign Up form
setFlow('forgot')     // Forgot Password form
setFlow('otp')        // OTP Verification form (4-digit)
setFlow('reset')      // Reset Password form
setFlow('twofactor')  // Two-Factor Authentication form (6-digit)

togglePassword(inputId, button)

Toggles password visibility for a specific input field.

toggleControls()

Shows/hides the theme switcher control panel.

setMode(modeName)

Changes the color mode (System, Light, or Dark).

setMode('system')  // Follows OS preference
setMode('light')   // Force light mode
setMode('dark')    // Force dark mode

The mode preference is automatically saved to localStorage and persists across page reloads.

Validator.validateField(input)

Validates a single form field and displays error messages if invalid. Returns true if valid, false if invalid.

const input = document.getElementById('email-input');
Validator.validateField(input);

Validator.validateForm(form)

Validates all fields in a form and focuses the first invalid field. Returns true if all fields are valid.

const form = document.querySelector('form');
if (Validator.validateForm(form)) {
  // Form is valid, proceed with submission
}

Validator.showError(input, message)

Manually display an error message for a field.

Validator.showError(inputElement, 'Custom error message');

Validator.clearError(input)

Remove error state and message from a field.

Validator.clearError(inputElement);

handleFormSubmit(flowType, form)

Handles form submission after validation. Replace with your API integration.

handleFormSubmit('signin', formElement);

showNotification(message, type, duration)

Displays a toast notification. Types: 'success', 'error', 'info', 'warning'. Duration in milliseconds (default: 3000).

showNotification('Operation successful!', 'success');
showNotification('An error occurred', 'error', 5000);
showNotification('Info message', 'info');
showNotification('Warning message', 'warning');

handleSocialLogin(provider)

Handles social login button clicks. Replace with your OAuth implementation.

handleSocialLogin('google');   // Google OAuth
handleSocialLogin('facebook');  // Facebook OAuth
handleSocialLogin('github');    // GitHub OAuth

updatePasswordStrength(inputId)

Updates the password strength meter display for a password input field.

updatePasswordStrength('password-input-id');

calculatePasswordStrength(password)

Calculates password strength and returns object with strength, score, and text.

const result = calculatePasswordStrength('MyP@ssw0rd');
// Returns: { strength: 'strong', score: 7, text: 'Strong password' }

setButtonLoading(buttonId, isLoading)

Sets loading state for a button (shows spinner and disables button).

setButtonLoading('submit-btn', true);   // Show loading
setButtonLoading('submit-btn', false);  // Hide loading

resetButton(buttonId, originalText)

Resets a button to its original state and text.

resetButton('submit-btn', 'Submit');

handleRememberMe(checkbox, formId)

Handles remember me checkbox state and saves email to localStorage.

handleRememberMe(checkboxElement, 'signin-form-id');

validateTwoFactorForm(form)

Validates 2FA form with 6-digit code inputs. Returns true if all digits are valid.

if (validateTwoFactorForm(formElement)) {
  // OTP is valid
}

Validation Rules

The validation system includes built-in rules that can be customized in assets/js/validation.js:

• Email: Validates email format using regex pattern
• Password: Minimum 8 characters required
• Password Strength: Calculates strength based on length, character types (uppercase, lowercase, numbers, special), with visual feedback
• Text Fields: Minimum 2 characters required
• OTP: Single digit per field (4-digit for OTP, 6-digit for 2FA)

To customize rules, edit the rules object in assets/js/validation.js.

State Object

The application state is stored in the store object:

const store = {
  theme: 'minimal',  // Current theme
  flow: 'signin',    // Current flow
  mode: 'system',    // Color mode: 'system' | 'light' | 'dark'
  email: 'alex@example.com'  // User email (for OTP)
};

🌐 Browser Support

AuthMaster UI Kit is compatible with all modern browsers:

Required Features

• CSS Grid and Flexbox support
• CSS Custom Properties (CSS Variables)
• ES6+ JavaScript features
• Local Storage API

🔒 Security Considerations

Backend Requirements

This UI kit provides the frontend interface only. You must implement the following security measures on your backend:

1. Server-Side Validation

Never trust client-side validation alone. Always validate all inputs on the server. Client-side validation is for UX purposes only.

• Validate email format
• Check password strength and length
• Sanitize all text inputs
• Verify OTP/2FA codes

2. CSRF Protection

Implement CSRF tokens for all form submissions to prevent cross-site request forgery attacks.

3. Rate Limiting

Prevent brute force attacks by implementing rate limiting on authentication endpoints:

• Limit login attempts per IP
• Limit password reset requests
• Limit OTP/2FA verification attempts

4. Password Security

• Never store plain text passwords
• Use secure hashing algorithms (bcrypt, argon2, scrypt)
• Implement password complexity requirements
• Consider password history to prevent reuse

5. Session Management

• Use secure, HttpOnly cookies
• Implement session timeout
• Regenerate session ID on login
• Properly invalidate sessions on logout

6. HTTPS

Always use HTTPS in production. Never transmit authentication data over unencrypted connections.

7. Input Sanitization

Sanitize all user inputs to prevent XSS and injection attacks.

OAuth Integration (Social Login)

For social login buttons, you need to:

1. Register your application with each provider (Google, Facebook, GitHub)
2. Obtain OAuth credentials (Client ID, Client Secret)
3. Implement OAuth flow on your backend
4. Handle OAuth callbacks securely
5. Store user data appropriately

Provider Documentation:

• Google OAuth
• Facebook Login
• GitHub OAuth

Security Best Practices

• Never trust client-side validation alone
• Implement proper authentication mechanisms
• Use secure password reset tokens (time-limited, single-use)
• Implement account lockout after multiple failed attempts
• Log security events for monitoring
• Regular security audits and dependency updates
• Use Content Security Policy (CSP) headers
• Implement proper CORS policies

For detailed security implementation examples, see docs/INSTALLATION.md → Security Considerations section.

🔍 Troubleshooting

Common Issues

Fonts Not Loading

• Check that font files exist in assets/fonts/ directory
• Verify file paths in style.css are correct
• Check browser console for 404 errors
• Ensure proper file permissions

Styles Not Applying

• Verify tailwind.js is loaded before config.js
• Check that style.css is linked in HTML
• Clear browser cache
• Check browser console for errors

Theme Switcher Not Working

• Ensure all JavaScript modules are loaded in correct order (see index.html script tags)
• Check browser console for JavaScript errors
• Verify all required modules are accessible (core, components, themes, etc.)
• Ensure main.js is loaded last

JavaScript Modules Not Loading

• Check script loading order in index.html:
  1. app-config.js (configuration)
  2. constants.js, utils/logger.js (utilities)
  3. core/store.js, core/mode.js, core/renderer.js (core modules)
  4. icons.js, content.js (assets)
  5. Components and forms
  6. Themes
  7. core/controller.js, validation.js
  8. main.js (last)
• Verify all module files exist and are accessible
• Check browser console for 404 errors

Forms Not Submitting

• Forms have event.preventDefault() by default
• Add your own form submission handler
• Connect to your backend API

💬 Support

Getting Help

For support, updates, and other items by this author, please visit:

CodeCanyon Profile: coders_devx

Documentation

Additional documentation files are available in the docs/ folder:

• INSTALLATION.md - Installation guide
• CUSTOMIZATION.md - Customization guide
• STRUCTURE.md - Project structure overview

Version

Current version: 1.1.0

What's New: Social login UI, Two-Factor Authentication, Password strength meter, Loading states, Remember me functionality, Toast notifications, and improved responsive design.

License

See LICENSE.txt for license information.