web-mojo 2.1.1043 → 2.1.1044

package/dist/auth.es.js

@@ -1,2227 +1,589 @@
-import { W as WebApp } from "./chunks/WebApp-C1vcdSuu.js";
-import { B, a, V, b, c, d } from "./chunks/WebApp-C1vcdSuu.js";
-import { T as TokenManager } from "./chunks/TokenManager-CAZNcCMs.js";
-import { P as Page } from "./chunks/Page-Deq4y2Kq.js";
-class AuthManager {
-  constructor(app, config = {}) {
-    this.app = app;
-    this.config = {
-      autoRefresh: true,
-      refreshThreshold: 5,
-      // minutes before expiry
-      plugins: {},
-      ...config
-    };
-    this.tokenManager = new TokenManager();
-    this.isAuthenticated = false;
-    this.user = null;
-    this.refreshTimer = null;
-    this.plugins = /* @__PURE__ */ new Map();
-    this.initialize();
-  }
-  /**
-   * Initialize auth manager
-   */
-  initialize() {
-    this.checkAuthState();
-    if (this.config.autoRefresh) {
-      this.scheduleTokenRefresh();
-    }
-    if (this.app) {
-      this.app.auth = this;
-    }
-  }
-  /**
-   * Check current authentication state from stored tokens
-   */
-  checkAuthState() {
-    if (this.tokenManager.isValid()) {
-      const userInfo = this.tokenManager.getUserInfo();
-      if (userInfo) {
-        this.setAuthState(userInfo);
-        return true;
-      }
-    }
-    this.clearAuthState();
-    return false;
-  }
-  /**
-   * Login with username/email and password
-   * @param {string} username - Username or email
-   * @param {string} password - Password
-   * @param {boolean} rememberMe - Persist session
-   * @returns {Promise<object>} Login result
-   */
-  async login(username, password, rememberMe = true) {
-    const response = await this.app.rest.POST("/api/login", { username, password });
-    if (response.success && response.data.status) {
-      const { access_token, refresh_token, user } = response.data.data;
-      this.tokenManager.setTokens(access_token, refresh_token, rememberMe);
-      const userInfo = this.tokenManager.getUserInfo();
-      this.setAuthState({ ...user, ...userInfo });
-      if (this.config.autoRefresh) {
-        this.scheduleTokenRefresh();
-      }
-      this.emit("login", this.user);
-      return { success: true, user: this.user };
-    }
-    const message = response.data?.error || response.message || "Login failed. Please try again.";
-    this.emit("loginError", { message });
-    return { success: false, message };
-  }
-  /**
-   * Register new user
-   * @param {object} userData - Registration data
-   * @returns {Promise<object>} Registration result
-   */
-  async register(userData) {
-    const response = await this.app.rest.POST("/api/register", userData);
-    if (response.success && response.data.status) {
-      const { token, refreshToken, user } = response.data.data;
-      this.tokenManager.setTokens(token, refreshToken, true);
-      const userInfo = this.tokenManager.getUserInfo();
-      this.setAuthState({ ...user, ...userInfo });
-      if (this.config.autoRefresh) {
-        this.scheduleTokenRefresh();
-      }
-      this.emit("register", this.user);
-      return { success: true, user: this.user };
-    }
-    const message = response.data?.error || response.message || "Registration failed.";
-    this.emit("registerError", { message });
-    return { success: false, message };
-  }
-  /**
-   * Logout current user
-   */
-  async logout() {
-    try {
-      const token = this.tokenManager.getToken();
-      if (token) {
-        this.app.rest.POST("/api/auth/logout").catch((err) => {
-          console.warn("Server logout failed, proceeding with local logout.", err);
-        });
-      }
-    } finally {
-      this.clearAuthState();
-      this.emit("logout");
-    }
-  }
-  /**
-   * Refresh access token
-   * @returns {Promise<boolean>} Success status
-   */
-  async refreshToken() {
-    const refreshToken = this.tokenManager.getRefreshToken();
-    if (!refreshToken) {
-      this.clearAuthState();
-      this.emit("tokenExpired");
-      return false;
-    }
-    const response = await this.app.rest.POST("/api/auth/token/refresh", { refreshToken });
-    if (response.success && response.data.status) {
-      const { token, refreshToken: newRefreshToken } = response.data.data;
-      const isPersistent = !!localStorage.getItem(this.tokenManager.tokenKey);
-      this.tokenManager.setTokens(token, newRefreshToken, isPersistent);
-      const userInfo = this.tokenManager.getUserInfo();
-      if (userInfo) {
-        this.user = { ...this.user, ...userInfo };
-      }
-      this.scheduleTokenRefresh();
-      this.emit("tokenRefreshed");
-      return true;
-    }
-    console.error("Token refresh failed:", response.data?.error || response.message);
-    this.clearAuthState();
-    this.emit("tokenExpired");
-    return false;
-  }
-  /**
-   * Set authentication state
-   * @param {object} user - User data
-   */
-  setAuthState(user) {
-    this.isAuthenticated = true;
-    this.user = user;
-    if (this.app?.setState) {
-      this.app.setState("auth", {
-        isAuthenticated: true,
-        user
-      });
-    }
-  }
-  /**
-   * Clear authentication state
-   */
-  clearAuthState() {
-    this.isAuthenticated = false;
-    this.user = null;
-    this.tokenManager.clearTokens();
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-      this.refreshTimer = null;
-    }
-    if (this.app?.setState) {
-      this.app.setState("auth", {
-        isAuthenticated: false,
-        user: null
-      });
-    }
-  }
-  /**
-   * Schedule automatic token refresh
-   */
-  scheduleTokenRefresh() {
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-    }
-    if (!this.tokenManager.isValid()) {
-      return;
-    }
-    if (this.tokenManager.isExpiringSoon(this.config.refreshThreshold)) {
-      this.refreshToken();
-      return;
-    }
-    const token = this.tokenManager.getToken();
-    const payload = this.tokenManager.decode(token);
-    if (payload?.exp) {
-      const now = Math.floor(Date.now() / 1e3);
-      const timeUntilRefresh = (payload.exp - now - this.config.refreshThreshold * 60) * 1e3;
-      if (timeUntilRefresh > 0) {
-        this.refreshTimer = setTimeout(() => {
-          this.refreshToken();
-        }, timeUntilRefresh);
-      }
-    }
-  }
-  /**
-   * Register a plugin
-   * @param {string} name - Plugin name
-   * @param {object} plugin - Plugin instance
-   */
-  registerPlugin(name, plugin) {
-    this.plugins.set(name, plugin);
-    plugin.initialize(this, this.app);
-  }
-  /**
-   * Get a plugin by name
-   * @param {string} name - Plugin name
-   * @returns {object|null} Plugin instance
-   */
-  getPlugin(name) {
-    return this.plugins.get(name) || null;
-  }
-  /**
-   * Request password reset
-   * @param {string} email - User email
-   * @returns {Promise<object>} Request result
-   */
-  async forgotPassword(email, method = "code") {
-    const response = await this.app.rest.POST("/api/auth/forgot", { email, method });
-    if (response.success && response.data.status) {
-      this.emit("forgotPasswordSuccess", { email, method });
-      return { success: true, message: response.data.data?.message };
-    }
-    const message = response.data?.error || response.message || "Failed to process request.";
-    this.emit("forgotPasswordError", { message });
-    return { success: false, message };
-  }
-  /**
-   * Reset password with a token from an email link
-   * @param {string} token - Reset token
-   * @param {string} newPassword - New password
-   * @returns {Promise<object>} Reset result with tokens
-   */
-  async resetPasswordWithToken(token, newPassword) {
-    const payload = {
-      token,
-      new_password: newPassword
-    };
-    const response = await this.app.rest.POST("/api/auth/password/reset/token", payload);
-    if (response.success && response.data.status) {
-      const { access_token, refresh_token, user } = response.data.data;
-      this.tokenManager.setTokens(access_token, refresh_token, true);
-      const userInfo = this.tokenManager.getUserInfo();
-      this.setAuthState({ ...user, ...userInfo });
-      if (this.config.autoRefresh) {
-        this.scheduleTokenRefresh();
-      }
-      this.emit("resetPasswordSuccess", this.user);
-      return { success: true, user: this.user };
-    }
-    const message = response.data?.error || response.message || "Failed to reset password.";
-    this.emit("resetPasswordError", { message });
-    return { success: false, message };
-  }
-  /**
-   * Reset password with an email and code
-   * @param {string} email - User's email
-   * @param {string} code - The verification code
-   * @param {string} newPassword - New password
-   * @returns {Promise<object>} Reset result with tokens
-   */
-  async resetPasswordWithCode(email, code, newPassword) {
-    const payload = {
-      email,
-      code,
-      new_password: newPassword
-    };
-    const response = await this.app.rest.POST("/api/auth/password/reset/code", payload);
-    if (response.success && response.data.status) {
-      const { access_token, refresh_token, user } = response.data.data;
-      this.tokenManager.setTokens(access_token, refresh_token, true);
-      const userInfo = this.tokenManager.getUserInfo();
-      this.setAuthState({ ...user, ...userInfo });
-      if (this.config.autoRefresh) {
-        this.scheduleTokenRefresh();
-      }
-      this.emit("resetPasswordSuccess", this.user);
-      return { success: true, user: this.user };
-    }
-    const message = response.data?.error || response.message || "Failed to reset password.";
-    this.emit("resetPasswordError", { message });
-    return { success: false, message };
-  }
-  /**
-   * Get authorization header for API requests
-   * @returns {string|null} Authorization header
-   */
-  getAuthHeader() {
-    return this.tokenManager.getAuthHeader();
-  }
-  /**
-   * Emit event to app
-   * @param {string} event - Event name
-   * @param {*} data - Event data
-   */
-  emit(event, data) {
-    if (this.app?.events?.emit) {
-      this.app.events.emit(`auth:${event}`, data);
-    }
-  }
-  /**
-   * Cleanup auth manager
-   */
-  destroy() {
-    if (this.refreshTimer) {
-      clearTimeout(this.refreshTimer);
-    }
-    this.plugins.forEach((plugin) => {
-      if (plugin.destroy) {
-        plugin.destroy();
-      }
-    });
-    this.plugins.clear();
-  }
-}
-class LoginPage extends Page {
-  static pageName = "login";
-  static title = "Login";
-  static icon = "bi-box-arrow-in-right";
-  static route = "/login";
-  constructor(options = {}) {
-    super({
-      ...options,
-      pageName: LoginPage.pageName,
-      route: options.route || LoginPage.route,
-      pageIcon: LoginPage.icon,
-      template: options.template
+import { B, a, V, b, c, d } from "./chunks/version-BaFu2yii.js";
+function createAuthClient({
+  baseURL,
+  fetchImpl = typeof fetch !== "undefined" ? fetch.bind(window) : null,
+  storage = typeof localStorage !== "undefined" ? localStorage : null,
+  endpoints = {}
+} = {}) {
+  if (!baseURL) {
+    throw new Error("createAuthClient: baseURL is required");
+  }
+  if (!fetchImpl) {
+    throw new Error("createAuthClient: fetch implementation is not available in this environment");
+  }
+  if (!storage) {
+    throw new Error("createAuthClient: storage (localStorage) is not available in this environment");
+  }
+  const KEYS = {
+    access: "access_token",
+    refresh: "refresh_token",
+    user: "user"
+  };
+  const EP = {
+    login: "/login",
+    forgot: "/auth/forgot",
+    resetCode: "/auth/password/reset/code",
+    resetToken: "/auth/password/reset/token",
+    ...endpoints
+  };
+  async function post(path, body) {
+    const res = await fetchImpl(`${baseURL}${path}`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body || {})
     });
-    this.authConfig = options.authConfig || {
-      ui: {
-        title: "My App",
-        logoUrl: "/assets/logo.png",
-        messages: {
-          loginTitle: "Welcome Back",
-          loginSubtitle: "Sign in to your account"
-        }
-      },
-      features: {
-        rememberMe: false,
-        forgotPassword: true,
-        registration: false
-      }
-    };
-  }
-  async onInit() {
-    await super.onInit();
-    this.data = {
-      // Form fields
-      username: "",
-      password: "",
-      rememberMe: true,
-      loginIcon: this.options.pageIcon,
-      shaodw: "shadow-lg",
-      // UI state
-      isLoading: false,
-      error: null,
-      showPassword: false,
-      version: this.getApp().version,
-      // Feature availability
-      passkeySupported: this.getApp().auth?.isPasskeySupported?.() || false,
-      // Config data for template
-      ...this.authConfig.ui,
-      ...this.authConfig.features
-    };
-  }
-  async onEnter() {
-    await super.onEnter();
-    document.title = `${LoginPage.title} - ${this.authConfig.ui.title}`;
-    const auth = this.getApp().auth;
-    if (auth?.isAuthenticated) {
-      this.getApp().navigate("/");
-      return;
-    }
-    this.updateData({
-      username: "",
-      password: "",
-      error: null,
-      isLoading: false
-    });
-  }
-  async onAfterRender() {
-    await super.onAfterRender();
-    const usernameInput = this.element.querySelector("#loginUsername");
-    if (usernameInput) {
-      usernameInput.focus();
-    }
-  }
-  /**
-   * Handle field updates
-   */
-  async onActionUpdateField(event, element) {
-    const field = element.dataset.field;
-    const value = element.type === "checkbox" ? element.checked : element.value;
-    this.updateData({
-      [field]: value,
-      error: null
-      // Clear error on input change
-    });
-  }
-  /**
-   * Toggle password visibility
-   */
-  async onActionTogglePassword(event) {
-    event.preventDefault();
-    this.updateData({ showPassword: !this.data.showPassword });
-    const passwordInput = this.element.querySelector("#loginPassword");
-    if (passwordInput) {
-      passwordInput.type = this.data.showPassword ? "text" : "password";
-    }
-  }
-  /**
-   * Handle login form submission
-   */
-  async onActionLogin(event) {
-    event.preventDefault();
-    this.data.username = this.element.querySelector("#loginUsername")?.value || "";
-    this.data.password = this.element.querySelector("#loginPassword")?.value || "";
-    await this.updateData({ error: null, isLoading: true }, true);
-    const auth = this.getApp().auth;
-    if (!auth) {
-      await this.updateData({ error: "Authentication system not available", isLoading: false }, true);
-      return;
-    }
-    if (!this.data.username || !this.data.password) {
-      await this.updateData({ error: "Please enter both username and password", isLoading: false }, true);
-      return;
-    }
-    const result = await auth.login(
-      this.data.username,
-      this.data.password,
-      this.data.rememberMe
-    );
-    if (!result.success) {
-      await this.updateData({
-        error: result.message,
-        isLoading: false
-      }, true);
-      const passwordInput = this.element.querySelector("#loginPassword");
-      if (passwordInput) {
-        passwordInput.focus();
-        passwordInput.select();
-      }
-    }
-  }
-  /**
-   * Handle passkey login
-   */
-  async onActionLoginWithPasskey(event) {
-    event.preventDefault();
-    const auth = this.getApp().auth;
-    if (!auth?.isPasskeySupported?.()) {
-      this.getApp().showError("Passkey authentication is not supported");
-      return;
-    }
-    this.updateData({ error: null, isLoading: true });
+    let json = {};
     try {
-      const result = await auth.loginWithPasskey();
-      if (result.success) {
-        console.log("Passkey login successful");
-      }
-    } catch (error) {
-      console.error("Passkey login error:", error);
-      this.updateData({
-        error: "Passkey authentication failed. Please try another method.",
-        isLoading: false
-      });
-    }
-  }
-  /**
-   * Navigate to registration page
-   */
-  async onActionRegister(event) {
-    event.preventDefault();
-    this.getApp().navigate("/register");
-  }
-  /**
-   * Navigate to forgot password page
-   */
-  async onActionForgotPassword(event) {
-    event.preventDefault();
-    this.getApp().navigate("/forgot-password");
-  }
-  /**
-   * Handle Enter key in form fields
-   */
-  async onActionHandleKeyPress(event, element) {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      if (element.id === "loginUsername") {
-        const passwordInput = this.element.querySelector("#loginPassword");
-        if (passwordInput) {
-          passwordInput.focus();
-        }
-      } else if (element.id === "loginPassword") {
-        await this.onActionLogin(event);
-      }
-    }
-  }
-  /**
-   * Get view data for template rendering
-   */
-  async getViewData() {
-    return {
-      ...this.data
-    };
-  }
-}
-class RegisterPage extends Page {
-  static pageName = "auth-register";
-  static title = "Register";
-  static icon = "bi-person-plus";
-  static route = "register";
-  constructor(options = {}) {
-    super({
-      ...options,
-      pageName: RegisterPage.pageName,
-      route: options.route || RegisterPage.route,
-      pageIcon: RegisterPage.icon,
-      template: options.template
-    });
-    this.authConfig = options.authConfig || {
-      ui: {
-        title: "My App",
-        logoUrl: "/assets/logo.png",
-        messages: {
-          registerTitle: "Create Account",
-          registerSubtitle: "Join us today"
-        }
-      },
-      features: {
-        registration: true
-      }
-    };
-  }
-  async onInit() {
-    await super.onInit();
-    this.data = {
-      // Config data for template
-      ...this.authConfig.ui,
-      ...this.authConfig.features,
-      // Form fields
-      name: "",
-      email: "",
-      password: "",
-      confirmPassword: "",
-      acceptTerms: false,
-      // UI state
-      isLoading: false,
-      error: null,
-      showPassword: false,
-      showConfirmPassword: false,
-      // Validation state
-      passwordStrength: null,
-      passwordMatch: true
-    };
-  }
-  async onEnter() {
-    await super.onEnter();
-    document.title = `${RegisterPage.title} - ${this.authConfig.ui.title}`;
-    const auth = this.getApp().auth;
-    if (auth?.isAuthenticated) {
-      this.getApp().navigate("/");
-      return;
-    }
-    this.updateData({
-      name: "",
-      email: "",
-      password: "",
-      confirmPassword: "",
-      acceptTerms: false,
-      error: null,
-      isLoading: false,
-      passwordStrength: null,
-      passwordMatch: true
-    });
-  }
-  async onAfterRender() {
-    await super.onAfterRender();
-    const nameInput = this.element.querySelector("#registerName");
-    if (nameInput) {
-      nameInput.focus();
-    }
-  }
-  /**
-   * Handle field updates
-   */
-  async onActionUpdateField(event, element) {
-    const field = element.dataset.field;
-    const value = element.type === "checkbox" ? element.checked : element.value;
-    this.updateData({ [field]: value });
-    if (field === "password") {
-      this.checkPasswordStrength(value);
-    }
-    if (field === "password" || field === "confirmPassword") {
-      this.checkPasswordMatch();
-    }
-    if (this.data.error) {
-      this.updateData({ error: null });
-    }
-  }
-  /**
-   * Check password strength
-   */
-  checkPasswordStrength(password) {
-    let strength = null;
-    if (password.length === 0) {
-      strength = null;
-    } else if (password.length < 6) {
-      strength = "weak";
-    } else if (password.length < 8) {
-      strength = "fair";
-    } else if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]/.test(password)) {
-      strength = "strong";
-    } else if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(password)) {
-      strength = "good";
-    } else {
-      strength = "fair";
-    }
-    this.updateData({ passwordStrength: strength }, true);
-  }
-  /**
-   * Check if passwords match
-   */
-  checkPasswordMatch() {
-    const match = !this.data.confirmPassword || this.data.password === this.data.confirmPassword;
-    this.updateData({ passwordMatch: match }, true);
-  }
-  /**
-   * Toggle password visibility
-   */
-  async onActionTogglePassword(event, element) {
-    event.preventDefault();
-    const field = element.dataset.passwordField;
-    if (field === "password") {
-      this.updateData({ showPassword: !this.data.showPassword });
-      const input = this.element.querySelector("#registerPassword");
-      if (input) {
-        input.type = this.data.showPassword ? "text" : "password";
-      }
-    } else if (field === "confirmPassword") {
-      this.updateData({ showConfirmPassword: !this.data.showConfirmPassword });
-      const input = this.element.querySelector("#registerConfirmPassword");
-      if (input) {
-        input.type = this.data.showConfirmPassword ? "text" : "password";
-      }
-    }
-  }
-  /**
-   * Handle registration form submission
-   */
-  async onActionRegister(event) {
-    event.preventDefault();
-    await this.updateData({ error: null, isLoading: true }, true);
-    if (!this.data.name || !this.data.email || !this.data.password || !this.data.confirmPassword) {
-      await this.updateData({ error: "Please fill in all required fields", isLoading: false }, true);
-      return;
-    }
-    if (this.data.name.trim().length < 2) {
-      await this.updateData({ error: "Name must be at least 2 characters long", isLoading: false }, true);
-      return;
-    }
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    if (!emailRegex.test(this.data.email)) {
-      await this.updateData({ error: "Please enter a valid email address", isLoading: false }, true);
-      return;
-    }
-    if (this.data.password.length < 6) {
-      await this.updateData({ error: "Password must be at least 6 characters long", isLoading: false }, true);
-      return;
-    }
-    if (this.data.password !== this.data.confirmPassword) {
-      await this.updateData({ error: "Passwords do not match", isLoading: false }, true);
-      return;
-    }
-    const auth = this.getApp().auth;
-    if (!auth) {
-      await this.updateData({ error: "Authentication system not available", isLoading: false }, true);
-      return;
-    }
-    const registrationData = {
-      name: this.data.name.trim(),
-      email: this.data.email.toLowerCase().trim(),
-      password: this.data.password,
-      acceptedTerms: this.data.acceptTerms
-    };
-    const result = await auth.register(registrationData);
-    if (!result.success) {
-      await this.updateData({
-        error: result.message || "Registration failed. Please try again.",
-        isLoading: false
-      }, true);
-    }
-  }
-  /**
-   * Navigate to login page
-   */
-  async onActionLogin(event) {
-    event.preventDefault();
-    this.getApp().navigate("/login");
-  }
-  /**
-   * Handle Enter key in form fields
-   */
-  async onActionHandleKeyPress(event, element) {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      const fieldOrder = ["registerName", "registerEmail", "registerPassword", "registerConfirmPassword"];
-      const currentIndex = fieldOrder.indexOf(element.id);
-      if (currentIndex >= 0 && currentIndex < fieldOrder.length - 1) {
-        const nextField = this.element.querySelector(`#${fieldOrder[currentIndex + 1]}`);
-        if (nextField) {
-          nextField.focus();
-        }
-      } else if (currentIndex === fieldOrder.length - 1) {
-        await this.onActionRegister(event);
-      }
-    }
-  }
-  /**
-   * Get view data for template rendering
-   */
-  async getViewData() {
-    return {
-      ...this.data
-    };
-  }
+      json = await res.json();
+    } catch (_) {
+    }
+    if (!res.ok) {
+      throw json || { message: `Request failed with status ${res.status}` };
+    }
+    return json;
+  }
+  function parseResponse(r) {
+    return r && r.data && r.data.data || r && r.data || r;
+  }
+  function saveAuthData(resp) {
+    const d2 = parseResponse(resp);
+    if (!d2 || !d2.access_token) {
+      throw new Error("No access_token in response.");
+    }
+    storage.setItem(KEYS.access, d2.access_token);
+    if (d2.refresh_token) storage.setItem(KEYS.refresh, d2.refresh_token);
+    if (d2.user) storage.setItem(KEYS.user, JSON.stringify(d2.user));
+  }
+  function getErrorMessage(err) {
+    return err?.message || err?.error || Array.isArray(err?.errors) && err.errors[0]?.message || "An error occurred. Please try again.";
+  }
+  return {
+    async login(username, password) {
+      const resp = await post(EP.login, { username, password });
+      saveAuthData(resp);
+      return parseResponse(resp);
+    },
+    async forgot({ email, method }) {
+      return post(EP.forgot, { email, method });
+    },
+    async resetWithCode({ email, code, newPassword }) {
+      const resp = await post(EP.resetCode, { email, code, new_password: newPassword });
+      saveAuthData(resp);
+      return parseResponse(resp);
+    },
+    async resetWithToken({ token, newPassword }) {
+      const resp = await post(EP.resetToken, { token, new_password: newPassword });
+      saveAuthData(resp);
+      return parseResponse(resp);
+    },
+    logout() {
+      storage.removeItem(KEYS.access);
+      storage.removeItem(KEYS.refresh);
+      storage.removeItem(KEYS.user);
+    },
+    isAuthenticated() {
+      return !!storage.getItem(KEYS.access);
+    },
+    getToken() {
+      return storage.getItem(KEYS.access);
+    },
+    getUser() {
+      const raw = storage.getItem(KEYS.user);
+      try {
+        return raw ? JSON.parse(raw) : null;
+      } catch {
+        return null;
+      }
+    },
+    getAuthHeader() {
+      const t = storage.getItem(KEYS.access);
+      return t ? `Bearer ${t}` : null;
+    },
+    getErrorMessage,
+    parseResponse
+  };
 }
-class ForgotPasswordPage extends Page {
-  static pageName = "auth-forgot-password";
-  static title = "Forgot Password";
-  static icon = "bi-key";
-  static route = "forgot-password";
-  constructor(options = {}) {
-    super({ ...options, template: options.template });
-    this.authConfig = options.authConfig || {
-      passwordResetMethod: "code",
-      ui: { title: "My App" },
-      features: {}
-    };
-  }
-  async onInit() {
-    this.data = {
-      ...this.authConfig.ui,
-      ...this.authConfig.features,
-      passwordResetMethod: this.authConfig.passwordResetMethod,
-      step: "email",
-      // 'email', 'code', 'link_sent', 'success'
-      isLoading: false,
-      error: null,
-      email: ""
-      // Store email across steps
-    };
-  }
-  async onEnter() {
-    document.title = `${ForgotPasswordPage.title} - ${this.authConfig.ui.title}`;
-    this.updateData({
-      step: "email",
-      isLoading: false,
-      error: null,
-      email: ""
-    });
-  }
-  /**
-   * Gets data from the currently visible form.
-   * @param {string} formSelector - The CSS selector for the form.
-   * @returns {object} An object containing the form data.
-   */
-  getFormData(formSelector) {
-    const form = this.element.querySelector(formSelector);
-    if (!form) return {};
-    const formData = new FormData(form);
-    return Object.fromEntries(formData.entries());
-  }
-  /**
-   * Handles the initial request to reset a password.
-   */
-  async onActionRequestReset() {
-    const { email } = this.getFormData("#form-request-reset");
-    await this.updateData({ isLoading: true, error: null, email }, true);
-    if (!email) {
-      return this.updateData({ error: "Please enter your email address", isLoading: false }, true);
-    }
-    const auth = this.getApp().auth;
-    const resetMethod = this.authConfig.passwordResetMethod || "code";
-    const response = await auth.forgotPassword(email, resetMethod);
-    if (resetMethod === "link") {
-      await this.updateData({ step: "link_sent", isLoading: false }, true);
-      if (!response.success) console.error("Forgot password (link) error:", response.message);
-    } else {
-      if (response.success) {
-        await this.updateData({ step: "code", isLoading: false }, true);
-      } else {
-        await this.updateData({ error: response.message, isLoading: false }, true);
-      }
-    }
-  }
-  /**
-   * Handles the final password reset using a verification code.
-   */
-  async onActionResetWithCode() {
-    const { code, new_password, confirm_password } = this.getFormData("#form-reset-with-code");
-    await this.updateData({ isLoading: true, error: null }, true);
-    if (!code || !new_password) {
-      return this.updateData({ error: "Please enter the code and your new password", isLoading: false }, true);
-    }
-    if (new_password !== confirm_password) {
-      return this.updateData({ error: "Passwords do not match", isLoading: false }, true);
-    }
-    const auth = this.getApp().auth;
-    const response = await auth.resetPasswordWithCode(this.data.email, code, new_password);
-    if (response.success) {
-      await this.updateData({ step: "success", isLoading: false }, true);
-      setTimeout(() => {
-        this.getApp().showSuccess("Password reset complete. Welcome back!");
-        this.getApp().navigate("/");
-      }, 2e3);
-    } else {
-      await this.updateData({ error: response.message, isLoading: false }, true);
-    }
-  }
-  async onActionBackToLogin() {
-    this.getApp().navigate("/login");
-  }
-  // --- Template Getters for State ---
-  get isStepEmail() {
-    return this.data.step === "email";
-  }
-  get isStepCode() {
-    return this.data.step === "code";
-  }
-  get isStepLinkSent() {
-    return this.data.step === "link_sent";
-  }
-  get isStepSuccess() {
-    return this.data.step === "success";
-  }
-}
-class ResetPasswordPage extends Page {
-  static pageName = "auth-reset-password";
-  static title = "Reset Password";
-  static icon = "bi-key-fill";
-  static route = "reset-password";
-  constructor(options = {}) {
-    super({
-      ...options,
-      pageName: ResetPasswordPage.pageName,
-      route: options.route || ResetPasswordPage.route,
-      pageIcon: ResetPasswordPage.icon,
-      template: "auth/pages/ResetPasswordPage.mst"
-    });
-    this.authConfig = options.authConfig || {
-      ui: {
-        title: "My App",
-        logoUrl: "/assets/logo.png",
-        messages: {
-          resetTitle: "Set New Password",
-          resetSubtitle: "Choose a strong password"
-        }
-      },
-      features: {
-        registration: true
-      }
-    };
-    this.resetToken = null;
-  }
-  async onInit() {
-    await super.onInit();
-    this.data = {
-      // Config data for template
-      ...this.authConfig.ui,
-      ...this.authConfig.features,
-      // Form fields
-      password: "",
-      confirmPassword: "",
-      resetToken: "",
-      // UI state
-      isLoading: false,
-      error: null,
-      success: false,
-      successMessage: null,
-      showPassword: false,
-      showConfirmPassword: false,
-      // Validation state
-      passwordStrength: null,
-      passwordMatch: true,
-      tokenValid: false
-    };
-  }
-  async onEnter() {
-    await super.onEnter();
-    document.title = `${ResetPasswordPage.title} - ${this.authConfig.ui.title}`;
-    const urlParams = new URLSearchParams(window.location.search);
-    this.resetToken = urlParams.get("token") || urlParams.get("login_token") || "";
-    if (!this.resetToken) {
-      this.updateData({
-        error: "Invalid or missing reset token. Please request a new password reset.",
-        tokenValid: false
-      });
-      return;
-    }
-    this.updateData({
-      resetToken: this.resetToken,
-      tokenValid: true,
-      error: null,
-      success: false
-    });
-  }
-  async onAfterRender() {
-    await super.onAfterRender();
-    if (this.data.tokenValid) {
-      const passwordInput = this.element.querySelector("#resetPassword");
-      if (passwordInput) {
-        passwordInput.focus();
-      }
-    }
-  }
-  /**
-   * Handle field updates
-   */
-  async onActionUpdateField(event, element) {
-    const field = element.dataset.field;
-    const value = element.value;
-    this.updateData({
-      [field]: value,
-      error: null
-      // Clear error on input change
-    });
-    if (field === "password") {
-      this.checkPasswordStrength(value);
-    }
-    if (field === "password" || field === "confirmPassword") {
-      this.checkPasswordMatch();
-    }
-  }
-  /**
-   * Check password strength
-   */
-  checkPasswordStrength(password) {
-    let strength = null;
-    if (password.length === 0) {
-      strength = null;
-    } else if (password.length < 6) {
-      strength = "weak";
-    } else if (password.length < 8) {
-      strength = "fair";
-    } else if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]/.test(password)) {
-      strength = "strong";
-    } else if (/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/.test(password)) {
-      strength = "good";
-    } else {
-      strength = "fair";
+function mountAuth(container, options = {}) {
+  if (!container || !(container instanceof Element)) {
+    throw new Error("mountAuth: container must be a DOM Element");
+  }
+  const {
+    baseURL,
+    onSuccessRedirect,
+    allowRedirectOrigins,
+    branding = {},
+    theme,
+    endpoints,
+    providers,
+    texts = {}
+  } = options;
+  if (!baseURL) {
+    throw new Error("mountAuth: baseURL is required");
+  }
+  const urlParams = new URLSearchParams(window.location.search);
+  const redirectParam = urlParams.get("redirect") || urlParams.get("next") || urlParams.get("returnTo");
+  const redirectTarget = String(onSuccessRedirect || redirectParam || "/");
+  function isAllowedRedirect(url) {
+    if (!allowRedirectOrigins || allowRedirectOrigins.length === 0) {
+      return true;
     }
-    this.updateData({ passwordStrength: strength }, true);
-  }
-  /**
-   * Check if passwords match
-   */
-  checkPasswordMatch() {
-    const match = !this.data.confirmPassword || this.data.password === this.data.confirmPassword;
-    this.updateData({ passwordMatch: match }, true);
-  }
-  /**
-   * Toggle password visibility
-   */
-  async onActionTogglePassword(event, element) {
-    event.preventDefault();
-    const field = element.dataset.passwordField;
-    if (field === "password") {
-      this.updateData({ showPassword: !this.data.showPassword });
-      const input = this.element.querySelector("#resetPassword");
-      if (input) {
-        input.type = this.data.showPassword ? "text" : "password";
-      }
-    } else if (field === "confirmPassword") {
-      this.updateData({ showConfirmPassword: !this.data.showConfirmPassword });
-      const input = this.element.querySelector("#resetConfirmPassword");
-      if (input) {
-        input.type = this.data.showConfirmPassword ? "text" : "password";
-      }
+    try {
+      const target = new URL(url, window.location.origin);
+      return allowRedirectOrigins.includes(target.origin);
+    } catch {
+      return false;
     }
   }
-  /**
-   * Handle password reset submission
-   */
-  async onActionResetPassword(event) {
-    event.preventDefault();
-    await this.updateData({ error: null, isLoading: true }, true);
-    if (!this.data.password || !this.data.confirmPassword) {
-      await this.updateData({ error: "Please enter and confirm your new password", isLoading: false }, true);
-      return;
-    }
-    if (this.data.password.length < 6) {
-      await this.updateData({ error: "Password must be at least 6 characters long", isLoading: false }, true);
-      return;
-    }
-    if (this.data.password !== this.data.confirmPassword) {
-      await this.updateData({ error: "Passwords do not match", isLoading: false }, true);
-      return;
-    }
-    const auth = this.getApp().auth;
-    if (!auth) {
-      await this.updateData({ error: "Authentication system not available", isLoading: false }, true);
+  function performRedirect() {
+    if (!isAllowedRedirect(redirectTarget)) {
+      window.location.href = "/";
       return;
     }
-    const response = await auth.resetPasswordWithToken(this.resetToken, this.data.password);
-    if (response.success) {
-      await this.updateData({
-        success: true,
-        successMessage: "Password reset successful! Logging you in...",
-        isLoading: false
-      }, true);
-      setTimeout(() => {
-        this.getApp().showSuccess("Password reset complete. Welcome back!");
-        this.getApp().navigate("/");
-      }, 2e3);
-    } else {
-      await this.updateData({
-        error: response.message || "Password reset failed. Please try again.",
-        isLoading: false
-      }, true);
-    }
-  }
-  /**
-   * Navigate to login page
-   */
-  async onActionBackToLogin(event) {
-    event.preventDefault();
-    this.getApp().navigate("/login");
-  }
-  /**
-   * Navigate to registration page
-   */
-  async onActionRegister(event) {
-    event.preventDefault();
-    this.getApp().navigate("/register");
-  }
-  /**
-   * Request new reset email
-   */
-  async onActionRequestNew(event) {
-    event.preventDefault();
-    this.getApp().navigate("/forgot-password");
-  }
-  /**
-   * Handle Enter key in form fields
-   */
-  async onActionHandleKeyPress(event, element) {
-    if (event.key === "Enter") {
-      event.preventDefault();
-      const fieldOrder = ["resetPassword", "resetConfirmPassword"];
-      const currentIndex = fieldOrder.indexOf(element.id);
-      if (currentIndex >= 0 && currentIndex < fieldOrder.length - 1) {
-        const nextField = this.element.querySelector(`#${fieldOrder[currentIndex + 1]}`);
-        if (nextField) {
-          nextField.focus();
-        }
-      } else if (currentIndex === fieldOrder.length - 1) {
-        await this.onActionResetPassword(event);
-      }
-    }
-  }
-  /**
-   * Get view data for template rendering
-   */
-  async getViewData() {
-    return {
-      ...this.data
-    };
-  }
-}
-const templates = {};
-templates["extensions/auth/pages/ForgotPasswordPage.mst"] = `<div class="auth-page forgot-password-page min-vh-100 d-flex align-items-center py-4">
-    <div class="container">
-        <div class="row justify-content-center">
-            <div class="col-sm-8 col-md-8 col-lg-6 col-xl-5">
-                <div class="card {{shadow}} border-0">
-                    <div class="card-body p-4 p-md-5">
-                        <!-- Header -->
-                        <div class="text-center mb-4">
-                            {{#logoUrl}}<img src="{{logoUrl}}" alt="{{title}}" class="mb-3" style="max-height: 60px;">{{/logoUrl}}
-                            <h2 class="h3 mb-2">{{forgotTitle}}</h2>
-                            <p class="text-muted">{{forgotSubtitle}}</p>
-                        </div>
-
-                        <!-- Error Alert -->
-                        {{#error}}
-                        <div class="alert alert-danger d-flex align-items-center alert-dismissible fade show" role="alert">
-                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
-                            <div>{{error}}</div>
-                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                        </div>
-                        {{/error}}
-
-                        <!-- Step 1: Email Form -->
-                        {{#isStepEmail}}
-                        <form id="form-request-reset" novalidate>
-                            <div class="mb-3">
-                                <label for="forgotEmail" class="form-label"><i class="bi bi-envelope me-1"></i>Email Address</label>
-                                <input type="email" class="form-control form-control-lg" id="forgotEmail" name="email" placeholder="Enter your registered email" required autofocus>
-                                <div class="form-text">We'll send you instructions to reset your password.</div>
-                            </div>
-                            <button type="button" class="btn btn-primary btn-lg w-100 mb-3" data-action="requestReset" {{#isLoading}}disabled{{/isLoading}}>
-                                {{#isLoading}}<span class="spinner-border spinner-border-sm me-2"></span>Sending...{{/isLoading}}
-                                {{^isLoading}}<i class="bi bi-send me-2"></i>Send Instructions{{/isLoading}}
-                            </button>
-                            <button type="button" class="btn btn-outline-secondary btn-lg w-100" data-action="backToLogin" {{#isLoading}}disabled{{/isLoading}}>
-                                <i class="bi bi-arrow-left me-2"></i>Back to Login
-                            </button>
-                        </form>
-                        <div class="text-center mt-4">
-                            <p class="text-muted">Remember your password? <a href="#" class="text-decoration-none fw-semibold" data-action="backToLogin">Sign in</a></p>
-                        </div>
-                        {{/isStepEmail}}
-
-                        <!-- Step 2 (Link Method): Confirmation -->
-                        {{#isStepLinkSent}}
-                        <div class="text-center">
-                            <div class="mb-4"><i class="bi bi-envelope-check text-success" style="font-size: 4rem;"></i></div>
-                            <h3 class="h4 mb-3">Check your email</h3>
-                            <p class="text-muted">If an account exists for <strong>{{data.email}}</strong>, we have sent instructions for resetting your password.</p>
-                            <div class="d-grid gap-2 mt-4">
-                                <button type="button" class="btn btn-primary btn-lg" data-action="backToLogin"><i class="bi bi-arrow-left me-2"></i>Back to Login</button>
-                            </div>
-                        </div>
-                        {{/isStepLinkSent}}
-
-                        <!-- Step 2 (Code Method): Code Entry Form -->
-                        {{#isStepCode}}
-                        <p class="text-muted text-center mb-3">A verification code has been sent to <strong>{{data.email}}</strong>. Please enter it below.</p>
-                        <form id="form-reset-with-code" novalidate>
-                            <div class="mb-3">
-                                <label for="resetCode" class="form-label"><i class="bi bi-shield-lock me-1"></i>Verification Code</label>
-                                <input type="text" class="form-control form-control-lg" id="resetCode" name="code" placeholder="Enter code" required>
-                            </div>
-                            <div class="mb-3">
-                                <label for="resetPassword" class="form-label"><i class="bi bi-lock me-1"></i>New Password</label>
-                                <input type="password" class="form-control form-control-lg" id="resetPassword" name="new_password" placeholder="Enter new password" required autocomplete="new-password">
-                            </div>
-                            <div class="mb-3">
-                                <label for="confirmPassword" class="form-label"><i class="bi bi-lock-fill me-1"></i>Confirm New Password</label>
-                                <input type="password" class="form-control form-control-lg" id="confirmPassword" name="confirm_password" placeholder="Confirm new password" required autocomplete="new-password">
-                            </div>
-                            <button type="button" class="btn btn-primary btn-lg w-100" data-action="resetWithCode" {{#isLoading}}disabled{{/isLoading}}>
-                                {{#isLoading}}<span class="spinner-border spinner-border-sm me-2"></span>Resetting...{{/isLoading}}
-                                {{^isLoading}}<i class="bi bi-key me-2"></i>Reset Password{{/isLoading}}
-                            </button>
-                        </form>
-                        {{/isStepCode}}
-
-                        <!-- Step 3 (Code Method): Success -->
-                        {{#isStepSuccess}}
-                        <div class="text-center">
-                            <div class="mb-4"><i class="bi bi-check-circle text-success" style="font-size: 4rem;"></i></div>
-                            <h3 class="h4 mb-3">Password Reset!</h3>
-                            <p class="text-muted">Your password has been changed successfully. You will be redirected to the login page shortly.</p>
-                        </div>
-                        {{/isStepSuccess}}
-
-                    </div>
-                </div>
-            </div>
+    window.location.href = redirectTarget.startsWith("http") ? redirectTarget : new URL(redirectTarget, window.location.origin).href;
+  }
+  const auth = createAuthClient({ baseURL, endpoints });
+  const B2 = {
+    title: branding.title || "Sign In",
+    subtitle: branding.subtitle || "Sign in to your account",
+    logoUrl: branding.logoUrl || ""
+  };
+  const T = {
+    emailOrUsername: texts.emailOrUsername || "Email or Username",
+    password: texts.password || "Password",
+    signIn: texts.signIn || "Sign In",
+    forgotPassword: texts.forgotPassword || "Forgot password?",
+    resetYourPassword: texts.resetYourPassword || "Reset Your Password",
+    emailAddress: texts.emailAddress || "Email Address",
+    resetMethod: texts.resetMethod || "Reset Method",
+    emailCode: texts.emailCode || "Email me a code",
+    emailLink: texts.emailLink || "Email me a magic link",
+    sendReset: texts.sendReset || "Send Reset",
+    back: texts.back || "Back",
+    enterResetCode: texts.enterResetCode || "Enter Reset Code",
+    weSentCodeTo: texts.weSentCodeTo || "We sent a code to",
+    resetCode: texts.resetCode || "Reset Code",
+    newPassword: texts.newPassword || "New Password",
+    confirmPassword: texts.confirmPassword || "Confirm Password",
+    resetPassword: texts.resetPassword || "Reset Password",
+    setYourNewPassword: texts.setYourNewPassword || "Set Your New Password",
+    setPassword: texts.setPassword || "Set Password",
+    invalidCredentials: texts.invalidCredentials || "Invalid credentials.",
+    successRedirecting: texts.successRedirecting || "Success! Redirecting...",
+    pleaseFillAllFields: texts.pleaseFillAllFields || "Please fill in all fields.",
+    passwordsDoNotMatch: texts.passwordsDoNotMatch || "Passwords do not match."
+  };
+  const HTML = `
+    <div class="auth-container">
+      <div class="auth-card">
+        <div class="auth-header">
+          ${B2.logoUrl ? `<img src="${B2.logoUrl}" alt="${B2.title}" style="max-height:60px;margin-bottom:10px" />` : ""}
+          <h1 class="auth-title">${B2.title}</h1>
+          <p class="auth-subtitle">${B2.subtitle}</p>
         </div>
-    </div>
-</div>
-`;
-templates["extensions/auth/pages/LoginPage.mst"] = `<div class="auth-page min-vh-100 d-flex align-items-center py-4">
-    <div class="container">
-        <div class="row justify-content-center">
-            <div class="col-sm-10 col-md-8 col-lg-6 col-xl-5">
-                <div class="card {{data.shadow}} border-0">
-                    <div class="card-body p-4 p-md-5">
-                        <!-- Logo and Header -->
-                        <div class="text-center mb-4">
-                            {{#data.logoUrl}}
-                            <img src="{{data.logoUrl}}" alt="{{data.title}}" class="mb-3" style="max-height: 60px;">
-                            {{/data.logoUrl}}
-                            {{#data.messages.loginTitle}}
-                            <h2 class="h3 mb-2">{{#data.loginIcon}}<i class="{{data.loginIcon}}"></i> {{/data.loginIcon}}{{data.messages.loginTitle}}</h2>
-                            {{/data.messages.loginTitle}}
-                            {{/data.messages.loginSubtitle}}
-                            <p class="text-muted">{{data.messages.loginSubtitle}}</p>
-                            {{/data.messages.loginSubtitle}}
-                        </div>
-
-                        <!-- Error Alert -->
-                        {{#data.error}}
-                        <div class="alert alert-danger d-flex align-items-center alert-dismissible fade show" role="alert">
-                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
-                            <div>{{data.error}}</div>
-                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                        </div>
-                        {{/data.error}}
-
-                        <!-- Login Form -->
-                        <form novalidate>
-                            <!-- Username/Email Field -->
-                            <div class="mb-3">
-                                <label for="loginUsername" class="form-label">
-                                    <i class="bi bi-person me-1"></i>Username or Email
-                                </label>
-                                <input
-                                    type="text"
-                                    class="form-control form-control-lg"
-                                    id="loginUsername"
-                                    placeholder="Enter your username or email"
-                                    value="{{username}}"
-                                    data-field="username"
-                                    data-action-keydown="handleKeyPress"
-                                    autocomplete="username"
-                                    required
-                                    autofocus
-                                    {{#isLoading}}disabled{{/isLoading}}>
-                            </div>
-
-                            <!-- Password Field -->
-                            <div class="mb-3">
-                                <label for="loginPassword" class="form-label">
-                                    <i class="bi bi-lock me-1"></i>Password
-                                </label>
-                                <div class="input-group">
-                                    <input
-                                        type="{{#showPassword}}text{{/showPassword}}{{^showPassword}}password{{/showPassword}}"
-                                        class="form-control form-control-lg"
-                                        id="loginPassword"
-                                        placeholder="Enter your password"
-                                        value="{{password}}"
-                                        data-field="password"
-                                        data-action-keydown="handleKeyPress"
-                                        autocomplete="current-password"
-                                        required
-                                        {{#isLoading}}disabled{{/isLoading}}>
-                                    <button
-                                        class="btn btn-outline-secondary"
-                                        type="button"
-                                        data-action="togglePassword"
-                                        {{#isLoading}}disabled{{/isLoading}}>
-                                        <i class="bi bi-eye{{#data.showPassword}}-slash{{/data.showPassword}}"></i>
-                                    </button>
-                                </div>
-                            </div>
 
-                            <!-- Remember Me & Forgot Password -->
-                            <div class="d-flex justify-content-between align-items-center mb-4">
-                                {{#data.rememberMe}}
-                                <div class="form-check">
-                                    <input
-                                        class="form-check-input"
-                                        type="checkbox"
-                                        id="rememberMe"
-                                        data-field="rememberMe"
-                                        data-change-action="updateField"
-                                        autocomplete="off"
-                                        {{#rememberMe}}checked{{/rememberMe}}
-                                        {{#isLoading}}disabled{{/isLoading}}>
-                                    <label class="form-check-label" for="rememberMe">
-                                        Remember me
-                                    </label>
-                                </div>
-                                {{/data.rememberMe}}
-                                {{^data.rememberMe}}<div></div>{{/data.rememberMe}}
+        <div id="status-message" class="alert" role="status" style="display:none;"></div>
 
-                                {{#data.forgotPassword}}
-                                <a href="?page=forgot-password" class="text-decoration-none" data-action="forgotPassword">
-                                    Forgot password?
-                                </a>
-                                {{/data.forgotPassword}}
-                            </div>
-
-                            <!-- Login Button -->
-                            <button
-                                type="button"
-                                class="btn btn-primary btn-lg w-100 mb-3"
-                                data-action="login"
-                                {{#data.isLoading}}disabled{{/data.isLoading}}>
-                                {{#data.isLoading}}
-                                <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
-                                Signing in...
-                                {{/data.isLoading}}
-                                {{^data.isLoading}}
-                                <i class="bi bi-box-arrow-in-right me-2"></i>Sign In
-                                {{/data.isLoading}}
-                            </button>
-
-                            <!-- Alternative Login Methods -->
-                            {{#data.passkeySupported}}
-                            <div class="position-relative my-3">
-                                <hr class="text-muted">
-                                <span class="position-absolute top-50 start-50 translate-middle bg-white px-3 text-muted small">
-                                    OR
-                                </span>
-                            </div>
-
-                            <button
-                                type="button"
-                                class="btn btn-outline-primary btn-lg w-100 mb-2"
-                                data-action="loginWithPasskey"
-                                {{#data.isLoading}}disabled{{/data.isLoading}}>
-                                <i class="bi bi-fingerprint me-2"></i>Sign in with Passkey
-                            </button>
-                            {{/data.passkeySupported}}
-                        </form>
+        <!-- Sign In View -->
+        <div id="view-signin" class="auth-view">
+          <form id="form-signin" novalidate>
+            <div class="mb-3">
+              <label for="signin-username" class="form-label">${T.emailOrUsername}</label>
+              <input type="text" class="form-control" id="signin-username" placeholder="${T.emailOrUsername}" autocomplete="username" required />
+            </div>
+            <div class="mb-3">
+              <label for="signin-password" class="form-label">${T.password}</label>
+              <input type="password" class="form-control" id="signin-password" placeholder="${T.password}" autocomplete="current-password" required />
+            </div>
+            <button type="submit" class="btn btn-primary w-100 mb-3" id="btn-signin">
+              <span class="btn-text">${T.signIn}</span>
+              <span class="btn-spinner spinner-border spinner-border-sm" style="display:none;"></span>
+            </button>
+            <div class="text-center">
+              <a href="#" id="link-forgot" class="text-decoration-none">${T.forgotPassword}</a>
+            </div>
 
-                        <!-- Register Link -->
-                        {{#data.registration}}
-                        <div class="text-center mt-4">
-                            <p class="mb-0">
-                                Don't have an account?
-                                <a href="#" class="text-decoration-none fw-semibold" data-action="register">
-                                    Sign up
-                                </a>
-                            </p>
-                        </div>
-                        {{/data.registration}}
-                    </div>
-                </div>
+            ${providers && (providers.google || providers.passkey) ? `
+              <div class="position-relative my-3">
+                <hr class="text-muted" />
+                <span class="position-absolute top-50 start-50 translate-middle bg-white px-3 text-muted small">OR</span>
+              </div>
+              <div class="d-grid gap-2">
+                ${providers.google ? `<button type="button" class="btn btn-outline-primary" id="btn-google"><i class="bi bi-google me-2"></i>Continue with Google</button>` : ""}
+                ${providers.passkey ? `<button type="button" class="btn btn-outline-secondary" id="btn-passkey"><i class="bi bi-fingerprint me-2"></i>Sign in with Passkey</button>` : ""}
+              </div>
+            ` : ""}
+          </form>
+        </div>
 
-                <!-- Security Notice -->
-                <!-- TOS and Privacy Links -->
-                <div class="text-center mt-3 auth-footer-links">
-                    {{#data.termsUrl}}
-                        <small><a href="{{data.termsUrl}}" target="_blank" rel="noopener noreferrer">Terms of Service</a></small>
-                    {{/data.termsUrl}}
-                    {{#data.termsUrl}}{{#data.privacyUrl}}
-                        <small class="mx-1 text-muted">&middot;</small>
-                    {{/data.privacyUrl}}{{/data.termsUrl}}
-                    {{#data.privacyUrl}}
-                        <small><a href="{{data.privacyUrl}}" target="_blank" rel="noopener noreferrer">Privacy Policy</a></small>
-                    {{/data.privacyUrl}}
-                    {{#data.showVersion}}
-                    <div class="text-muted text-center mt-3">
-                        <small>version {{data.version}}</small>
-                    </div>
-                    {{/data.showVersion}}
-                </div>
+        <!-- Forgot Password View -->
+        <div id="view-forgot" class="auth-view" style="display:none;">
+          <button type="button" class="btn btn-link p-0 mb-3" id="btn-back-signin">
+            <span aria-hidden="true">←</span> ${T.back}
+          </button>
+          <h2 class="h5 mb-3">${T.resetYourPassword}</h2>
+          <form id="form-forgot" novalidate>
+            <div class="mb-3">
+              <label for="forgot-email" class="form-label">${T.emailAddress}</label>
+              <input type="email" class="form-control" id="forgot-email" placeholder="${T.emailAddress}" autocomplete="email" required />
             </div>
+            <div class="mb-3">
+              <label class="form-label">${T.resetMethod}</label>
+              <div class="form-check">
+                <input class="form-check-input" type="radio" name="reset-method" id="method-code" value="code" checked />
+                <label class="form-check-label" for="method-code">${T.emailCode}</label>
+              </div>
+              <div class="form-check">
+                <input class="form-check-input" type="radio" name="reset-method" id="method-link" value="link" />
+                <label class="form-check-label" for="method-link">${T.emailLink}</label>
+              </div>
+            </div>
+            <button type="submit" class="btn btn-primary w-100" id="btn-forgot">
+              <span class="btn-text">${T.sendReset}</span>
+              <span class="btn-spinner spinner-border spinner-border-sm" style="display:none;"></span>
+            </button>
+          </form>
         </div>
-    </div>
-</div>
-`;
-templates["extensions/auth/pages/RegisterPage.mst"] = `<div class="auth-page register-page min-vh-100 d-flex align-items-center py-4">
-    <div class="container">
-        <div class="row justify-content-center">
-            <div class="col-sm-10 col-md-8 col-lg-6 col-xl-5">
-                <div class="card {{shadow}} border-0">
-                    <div class="card-body p-4 p-md-5">
-                        <!-- Logo and Header -->
-                        <div class="text-center mb-4">
-                            {{#logoUrl}}
-                            <img src="{{logoUrl}}" alt="{{title}}" class="mb-3" style="max-height: 60px;">
-                            {{/logoUrl}}
-                            <h2 class="h3 mb-2">{{messages.registerTitle}}</h2>
-                            <p class="text-muted">{{messages.registerSubtitle}}</p>
-                        </div>
-
-                        <!-- Error Alert -->
-                        {{#error}}
-                        <div class="alert alert-danger d-flex align-items-center alert-dismissible fade show" role="alert">
-                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
-                            <div>{{error}}</div>
-                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                        </div>
-                        {{/error}}
-
-                        <!-- Registration Form -->
-                        <form data-action="register" novalidate>
-                            <!-- Name Field -->
-                            <div class="mb-3">
-                                <label for="registerName" class="form-label">
-                                    <i class="bi bi-person me-1"></i>Full Name
-                                </label>
-                                <input
-                                    type="text"
-                                    class="form-control form-control-lg"
-                                    id="registerName"
-                                    placeholder="Enter your full name"
-                                    value="{{name}}"
-                                    data-field="name"
-                                    data-change-action="updateField"
-                                    data-filter="live-search"
-                                    data-action-keydown="handleKeyPress"
-                                    autocomplete="name"
-                                    required
-                                    autofocus
-                                    {{#isLoading}}disabled{{/isLoading}}>
-                            </div>
-
-                            <!-- Email Field -->
-                            <div class="mb-3">
-                                <label for="registerEmail" class="form-label">
-                                    <i class="bi bi-envelope me-1"></i>Email Address
-                                </label>
-                                <input
-                                    type="email"
-                                    class="form-control form-control-lg"
-                                    id="registerEmail"
-                                    placeholder="name@example.com"
-                                    value="{{email}}"
-                                    data-field="email"
-                                    data-change-action="updateField"
-                                    data-filter="live-search"
-                                    data-action-keydown="handleKeyPress"
-                                    autocomplete="email"
-                                    required
-                                    {{#isLoading}}disabled{{/isLoading}}>
-                            </div>
-
-                            <!-- Password Field -->
-                            <div class="mb-3">
-                                <label for="registerPassword" class="form-label">
-                                    <i class="bi bi-lock me-1"></i>Password
-                                </label>
-                                <div class="input-group">
-                                    <input
-                                        type="{{#showPassword}}text{{/showPassword}}{{^showPassword}}password{{/showPassword}}"
-                                        class="form-control form-control-lg"
-                                        id="registerPassword"
-                                        placeholder="Create a strong password"
-                                        value="{{password}}"
-                                        data-field="password"
-                                        data-change-action="updateField"
-                                        data-filter="live-search"
-                                        data-action-keydown="handleKeyPress"
-                                        autocomplete="new-password"
-                                        required
-                                        {{#isLoading}}disabled{{/isLoading}}>
-                                    <button
-                                        class="btn btn-outline-secondary"
-                                        type="button"
-                                        data-password-field="password"
-                                        data-action="togglePassword"
-                                        {{#isLoading}}disabled{{/isLoading}}>
-                                        <i class="bi bi-eye{{#showPassword}}-slash{{/showPassword}}"></i>
-                                    </button>
-                                </div>
 
-                                <!-- Password Strength Indicator -->
-                                {{#passwordStrength}}
-                                <div class="mt-2">
-                                    <div class="progress" style="height: 4px;">
-                                        <div class="progress-bar
-                                            {{#passwordStrength.weak}}bg-danger{{/passwordStrength.weak}}
-                                            {{#passwordStrength.fair}}bg-warning{{/passwordStrength.fair}}
-                                            {{#passwordStrength.good}}bg-info{{/passwordStrength.good}}
-                                            {{#passwordStrength.strong}}bg-success{{/passwordStrength.strong}}"
-                                        role="progressbar"
-                                        style="width:
-                                            {{#passwordStrength.weak}}25%{{/passwordStrength.weak}}
-                                            {{#passwordStrength.fair}}50%{{/passwordStrength.fair}}
-                                            {{#passwordStrength.good}}75%{{/passwordStrength.good}}
-                                            {{#passwordStrength.strong}}100%{{/passwordStrength.strong}}">
-                                        </div>
-                                    </div>
-                                    <small class="text-muted mt-1">
-                                        Password strength: {{passwordStrength}}
-                                    </small>
-                                </div>
-                                {{/passwordStrength}}
-                            </div>
-
-                            <!-- Confirm Password Field -->
-                            <div class="mb-3">
-                                <label for="registerConfirmPassword" class="form-label">
-                                    <i class="bi bi-lock-fill me-1"></i>Confirm Password
-                                </label>
-                                <div class="input-group">
-                                    <input
-                                        type="{{#showConfirmPassword}}text{{/showConfirmPassword}}{{^showConfirmPassword}}password{{/showConfirmPassword}}"
-                                        class="form-control form-control-lg {{^passwordMatch}}is-invalid{{/passwordMatch}}"
-                                        id="registerConfirmPassword"
-                                        placeholder="Re-enter your password"
-                                        value="{{confirmPassword}}"
-                                        data-field="confirmPassword"
-                                        data-change-action="updateField"
-                                        data-filter="live-search"
-                                        data-action-keydown="handleKeyPress"
-                                        autocomplete="new-password"
-                                        required
-                                        {{#isLoading}}disabled{{/isLoading}}>
-                                    <button
-                                        class="btn btn-outline-secondary"
-                                        type="button"
-                                        data-password-field="confirmPassword"
-                                        data-action="togglePassword"
-                                        {{#isLoading}}disabled{{/isLoading}}>
-                                        <i class="bi bi-eye{{#showConfirmPassword}}-slash{{/showConfirmPassword}}"></i>
-                                    </button>
-                                </div>
-                                {{^passwordMatch}}
-                                <div class="invalid-feedback">
-                                    Passwords do not match
-                                </div>
-                                {{/passwordMatch}}
-                            </div>
-
-                            <!-- Register Button -->
-                            <button
-                                type="submit"
-                                class="btn btn-primary btn-lg w-100 mb-3"
-                                {{#isLoading}}disabled{{/isLoading}}>
-                                {{#isLoading}}
-                                <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
-                                Creating account...
-                                {{/isLoading}}
-                                {{^isLoading}}
-                                <i class="bi bi-person-plus me-2"></i>Create Account
-                                {{/isLoading}}
-                            </button>
-                        </form>
-
-                        <!-- Login Link -->
-                        <div class="text-center mt-4">
-                            <p class="mb-0">
-                                Already have an account?
-                                <a href="#" class="text-decoration-none fw-semibold" data-action="login">
-                                    Sign in
-                                </a>
-                            </p>
-                        </div>
-                    </div>
-                </div>
-
-                <!-- Security Notice -->
-                <div class="text-center mt-3">
-                    <small class="text-muted">
-                        <i class="bi bi-shield-check me-1"></i>Your information is secure and encrypted
-                    </small>
-                </div>
+        <!-- Reset with Code View -->
+        <div id="view-reset-code" class="auth-view" style="display:none;">
+          <button type="button" class="btn btn-link p-0 mb-3" id="btn-back-forgot">
+            <span aria-hidden="true">←</span> ${T.back}
+          </button>
+          <h2 class="h5 mb-3">${T.enterResetCode}</h2>
+          <p class="text-muted small mb-3">${T.weSentCodeTo} <strong id="reset-email-display"></strong></p>
+          <form id="form-reset-code" novalidate>
+            <div class="mb-3">
+              <label for="reset-code" class="form-label">${T.resetCode}</label>
+              <input type="text" class="form-control" id="reset-code" placeholder="${T.resetCode}" required />
+            </div>
+            <div class="mb-3">
+              <label for="reset-password" class="form-label">${T.newPassword}</label>
+              <input type="password" class="form-control" id="reset-password" placeholder="${T.newPassword}" autocomplete="new-password" required />
             </div>
+            <div class="mb-3">
+              <label for="reset-password-confirm" class="form-label">${T.confirmPassword}</label>
+              <input type="password" class="form-control" id="reset-password-confirm" placeholder="${T.confirmPassword}" autocomplete="new-password" required />
+            </div>
+            <button type="submit" class="btn btn-primary w-100" id="btn-reset-code">
+              <span class="btn-text">${T.resetPassword}</span>
+              <span class="btn-spinner spinner-border spinner-border-sm" style="display:none;"></span>
+            </button>
+          </form>
         </div>
-    </div>
-</div>
-`;
-templates["extensions/auth/pages/ResetPasswordPage.mst"] = `<div class="auth-page reset-password-page min-vh-100 d-flex align-items-center py-4">
-    <div class="container">
-        <div class="row justify-content-center">
-            <div class="col-sm-10 col-md-8 col-lg-6 col-xl-5">
-                <div class="card shadow-lg border-0">
-                    <div class="card-body p-4 p-md-5">
-                        <!-- Logo and Header -->
-                        <div class="text-center mb-4">
-                            {{#logoUrl}}
-                            <img src="{{logoUrl}}" alt="{{title}}" class="mb-3" style="max-height: 60px;">
-                            {{/logoUrl}}
-                            <h2 class="h3 mb-2">{{messages.resetTitle}}</h2>
-                            <p class="text-muted">{{messages.resetSubtitle}}</p>
-                        </div>
-
-                        <!-- Error Alert -->
-                        {{#error}}
-                        <div class="alert alert-danger d-flex align-items-center alert-dismissible fade show" role="alert">
-                            <i class="bi bi-exclamation-triangle-fill me-2"></i>
-                            <div>{{error}}</div>
-                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-                        </div>
-                        {{/error}}
-
-                        <!-- Success State -->
-                        {{#success}}
-                        <div class="alert alert-success d-flex align-items-center" role="alert">
-                            <i class="bi bi-check-circle-fill me-2"></i>
-                            <div>
-                                <strong>Password Reset Complete!</strong><br>
-                                {{#successMessage}}{{successMessage}}{{/successMessage}}
-                                {{^successMessage}}Your password has been reset successfully. You can now log in with your new password.{{/successMessage}}
-                            </div>
-                        </div>
 
-                        <div class="text-center">
-                            <p class="mb-3">
-                                <i class="bi bi-shield-check text-success" style="font-size: 3rem;"></i>
-                            </p>
-                            <p class="text-muted">
-                                Redirecting you to the login page...
-                            </p>
-                            <div class="d-grid gap-2 mt-4">
-                                <button
-                                    class="btn btn-primary btn-lg"
-                                    data-action="backToLogin">
-                                    <i class="bi bi-box-arrow-in-right me-2"></i>Continue to Login
-                                </button>
-                            </div>
-                        </div>
-                        {{/success}}
-
-                        <!-- Reset Form -->
-                        {{^success}}
-                        {{#tokenValid}}
-                        <form data-action="resetPassword" novalidate>
-                            <!-- New Password Field -->
-                            <div class="mb-3">
-                                <label for="resetPassword" class="form-label">
-                                    <i class="bi bi-lock me-1"></i>New Password
-                                </label>
-                                <div class="input-group">
-                                    <input
-                                        type="{{#showPassword}}text{{/showPassword}}{{^showPassword}}password{{/showPassword}}"
-                                        class="form-control form-control-lg"
-                                        id="resetPassword"
-                                        placeholder="Enter your new password"
-                                        value="{{password}}"
-                                        data-field="password"
-                                        data-change-action="updateField"
-                                        data-filter="live-search"
-                                        data-action-keydown="handleKeyPress"
-                                        autocomplete="new-password"
-                                        required
-                                        autofocus
-                                        {{#isLoading}}disabled{{/isLoading}}>
-                                    <button
-                                        class="btn btn-outline-secondary"
-                                        type="button"
-                                        data-password-field="password"
-                                        data-action="togglePassword"
-                                        {{#isLoading}}disabled{{/isLoading}}>
-                                        <i class="bi bi-eye{{#showPassword}}-slash{{/showPassword}}"></i>
-                                    </button>
-                                </div>
-
-                                <!-- Password Strength Indicator -->
-                                {{#passwordStrength}}
-                                <div class="mt-2">
-                                    <div class="progress" style="height: 4px;">
-                                        <div class="progress-bar
-                                            {{#passwordStrength.weak}}bg-danger{{/passwordStrength.weak}}
-                                            {{#passwordStrength.fair}}bg-warning{{/passwordStrength.fair}}
-                                            {{#passwordStrength.good}}bg-info{{/passwordStrength.good}}
-                                            {{#passwordStrength.strong}}bg-success{{/passwordStrength.strong}}"
-                                        role="progressbar"
-                                        style="width:
-                                            {{#passwordStrength.weak}}25%{{/passwordStrength.weak}}
-                                            {{#passwordStrength.fair}}50%{{/passwordStrength.fair}}
-                                            {{#passwordStrength.good}}75%{{/passwordStrength.good}}
-                                            {{#passwordStrength.strong}}100%{{/passwordStrength.strong}}">
-                                        </div>
-                                    </div>
-                                    <small class="text-muted mt-1">
-                                        Password strength: {{passwordStrength}}
-                                    </small>
-                                </div>
-                                {{/passwordStrength}}
-                            </div>
-
-                            <!-- Confirm Password Field -->
-                            <div class="mb-4">
-                                <label for="resetConfirmPassword" class="form-label">
-                                    <i class="bi bi-lock-fill me-1"></i>Confirm New Password
-                                </label>
-                                <div class="input-group">
-                                    <input
-                                        type="{{#showConfirmPassword}}text{{/showConfirmPassword}}{{^showConfirmPassword}}password{{/showConfirmPassword}}"
-                                        class="form-control form-control-lg {{^passwordMatch}}is-invalid{{/passwordMatch}}"
-                                        id="resetConfirmPassword"
-                                        placeholder="Re-enter your new password"
-                                        value="{{confirmPassword}}"
-                                        data-field="confirmPassword"
-                                        data-change-action="updateField"
-                                        data-filter="live-search"
-                                        data-action-keydown="handleKeyPress"
-                                        autocomplete="new-password"
-                                        required
-                                        {{#isLoading}}disabled{{/isLoading}}>
-                                    <button
-                                        class="btn btn-outline-secondary"
-                                        type="button"
-                                        data-password-field="confirmPassword"
-                                        data-action="togglePassword"
-                                        {{#isLoading}}disabled{{/isLoading}}>
-                                        <i class="bi bi-eye{{#showConfirmPassword}}-slash{{/showConfirmPassword}}"></i>
-                                    </button>
-                                </div>
-                                {{^passwordMatch}}
-                                <div class="invalid-feedback">
-                                    Passwords do not match
-                                </div>
-                                {{/passwordMatch}}
-                            </div>
-
-                            <!-- Reset Button -->
-                            <button
-                                type="submit"
-                                class="btn btn-primary btn-lg w-100 mb-3"
-                                {{#isLoading}}disabled{{/isLoading}}>
-                                {{#isLoading}}
-                                <span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
-                                Resetting password...
-                                {{/isLoading}}
-                                {{^isLoading}}
-                                <i class="bi bi-key me-2"></i>Reset Password
-                                {{/isLoading}}
-                            </button>
-
-                            <!-- Back to Login -->
-                            <button
-                                type="button"
-                                class="btn btn-outline-secondary btn-lg w-100"
-                                data-action="backToLogin"
-                                {{#isLoading}}disabled{{/isLoading}}>
-                                <i class="bi bi-arrow-left me-2"></i>Back to Login
-                            </button>
-                        </form>
-                        {{/tokenValid}}
-
-                        <!-- Invalid Token State -->
-                        {{^tokenValid}}
-                        <div class="text-center">
-                            <div class="mb-4">
-                                <i class="bi bi-exclamation-triangle text-warning" style="font-size: 4rem;"></i>
-                            </div>
-                            <h4 class="text-warning mb-3">Invalid Reset Link</h4>
-                            <p class="text-muted mb-4">
-                                This password reset link is invalid or has expired.
-                                Please request a new password reset.
-                            </p>
-                            <div class="d-grid gap-2">
-                                <button
-                                    class="btn btn-primary btn-lg"
-                                    data-action="requestNew">
-                                    <i class="bi bi-envelope me-2"></i>Request New Reset
-                                </button>
-                                <button
-                                    class="btn btn-outline-secondary btn-lg"
-                                    data-action="backToLogin">
-                                    <i class="bi bi-arrow-left me-2"></i>Back to Login
-                                </button>
-                            </div>
-                        </div>
-                        {{/tokenValid}}
-
-                        <!-- Additional Links -->
-                        {{#tokenValid}}{{^success}}
-                        <div class="text-center mt-4">
-                            <p class="text-muted mb-2">
-                                Remember your password?
-                                <a href="#" class="text-decoration-none fw-semibold" data-action="backToLogin">
-                                    Sign in
-                                </a>
-                            </p>
-                            {{#registration}}
-                            <p class="text-muted mb-0">
-                                Don't have an account?
-                                <a href="#" class="text-decoration-none fw-semibold" data-action="register">
-                                    Sign up
-                                </a>
-                            </p>
-                            {{/registration}}
-                        </div>
-                        {{/success}}{{/tokenValid}}
-                        {{/success}}
-                    </div>
-                </div>
-
-                <!-- Security Notice -->
-                <div class="text-center mt-3">
-                    <small class="text-muted">
-                        <i class="bi bi-shield-lock me-1"></i>
-                        Secure password reset with email verification
-                    </small>
-                </div>
+        <!-- Set Password via Magic Link View -->
+        <div id="view-set-password" class="auth-view" style="display:none;">
+          <h2 class="h5 mb-3">${T.setYourNewPassword}</h2>
+          <form id="form-set-password" novalidate>
+            <div class="mb-3">
+              <label for="set-password" class="form-label">${T.newPassword}</label>
+              <input type="password" class="form-control" id="set-password" placeholder="${T.newPassword}" autocomplete="new-password" required />
             </div>
+            <div class="mb-3">
+              <label for="set-password-confirm" class="form-label">${T.confirmPassword}</label>
+              <input type="password" class="form-control" id="set-password-confirm" placeholder="${T.confirmPassword}" autocomplete="new-password" required />
+            </div>
+            <button type="submit" class="btn btn-primary w-100" id="btn-set-password">
+              <span class="btn-text">${T.setPassword}</span>
+              <span class="btn-spinner spinner-border spinner-border-sm" style="display:none;"></span>
+            </button>
+          </form>
         </div>
+      </div>
     </div>
-</div>
-`;
-function getTemplate(key) {
-  const normalizedKey = key.replace(/^\//, "").replace(/^src\//, "").replace(/\\/g, "/");
-  return templates[normalizedKey] || templates[key];
-}
-class AuthApp extends WebApp {
-  constructor(config = {}) {
-    const uiConfig = {
-      title: config.name || "My App",
-      logoUrl: null,
-      termsUrl: null,
-      privacyUrl: null,
-      theme: {
-        background: "auth-bg-light",
-        panel: "auth-panel-light",
-        ...config.ui?.theme || {}
-      },
-      messages: {
-        loginTitle: "Welcome Back",
-        loginSubtitle: "Sign in to your account",
-        registerTitle: "Create Account",
-        registerSubtitle: "Join us today",
-        forgotTitle: "Reset Password",
-        forgotSubtitle: "We'll send you reset instructions",
-        ...config.ui?.messages || {}
-      },
-      ...config.ui || {}
-    };
-    const authConfig = {
-      ...config,
-      routes: {
-        login: "/login",
-        register: "/register",
-        forgot: "/forgot-password",
-        reset: "/reset-password",
-        ...config.routes || {}
-      },
-      loginRedirect: config.loginRedirect || "/",
-      logoutRedirect: config.logoutRedirect || "/login",
-      features: {
-        forgotPassword: true,
-        registration: true,
-        rememberMe: true,
-        ...config.features || {}
-      },
-      passwordResetMethod: config.passwordResetMethod || "code",
-      ui: uiConfig
-    };
-    super(authConfig);
-    this.auth = new AuthManager(this, authConfig);
-    this.authConfig = authConfig;
-    this.applyAuthTheme();
-    this.registerAuthPages();
-    this.setupAuthIntegration();
-    this.setupAuthGuards();
-  }
-  /**
-   * Applies the configured background and panel themes to the body.
-   */
-  applyAuthTheme() {
-    const theme = this.authConfig.ui.theme;
-    if (!theme) return;
-    const classesToRemove = Array.from(document.body.classList).filter(
-      (c2) => c2.startsWith("auth-bg-") || c2.startsWith("auth-panel-")
-    );
-    if (classesToRemove.length) {
-      document.body.classList.remove(...classesToRemove);
-    }
-    if (theme.background) {
-      document.body.classList.add(theme.background);
-    }
-    if (theme.panel) {
-      document.body.classList.add(theme.panel);
-    }
-  }
-  /**
-   * Registers all the standard authentication pages with the application.
-   */
-  registerAuthPages() {
-    const cfg = this.authConfig;
-    this.registerPage("login", LoginPage, {
-      route: cfg.routes.login,
-      title: "Login",
-      authConfig: cfg,
-      template: getTemplate("extensions/auth/pages/LoginPage.mst")
+  `;
+  container.innerHTML = HTML;
+  if (theme) {
+    container.classList.add(String(theme));
+  }
+  const els = {
+    views: {
+      signin: container.querySelector("#view-signin"),
+      forgot: container.querySelector("#view-forgot"),
+      resetCode: container.querySelector("#view-reset-code"),
+      setPassword: container.querySelector("#view-set-password")
+    },
+    forms: {
+      signin: container.querySelector("#form-signin"),
+      forgot: container.querySelector("#form-forgot"),
+      resetCode: container.querySelector("#form-reset-code"),
+      setPassword: container.querySelector("#form-set-password")
+    },
+    buttons: {
+      signin: container.querySelector("#btn-signin"),
+      forgot: container.querySelector("#btn-forgot"),
+      resetCode: container.querySelector("#btn-reset-code"),
+      setPassword: container.querySelector("#btn-set-password"),
+      backSignin: container.querySelector("#btn-back-signin"),
+      backForgot: container.querySelector("#btn-back-forgot"),
+      google: container.querySelector("#btn-google"),
+      passkey: container.querySelector("#btn-passkey")
+    },
+    inputs: {
+      signinUsername: container.querySelector("#signin-username"),
+      signinPassword: container.querySelector("#signin-password"),
+      forgotEmail: container.querySelector("#forgot-email"),
+      resetCode: container.querySelector("#reset-code"),
+      resetPassword: container.querySelector("#reset-password"),
+      resetPasswordConfirm: container.querySelector("#reset-password-confirm"),
+      setPassword: container.querySelector("#set-password"),
+      setPasswordConfirm: container.querySelector("#set-password-confirm")
+    },
+    radios: {
+      resetMethodCode: container.querySelector("#method-code"),
+      resetMethodLink: container.querySelector("#method-link")
+    },
+    labels: {
+      resetEmailDisplay: container.querySelector("#reset-email-display")
+    },
+    links: {
+      forgot: container.querySelector("#link-forgot")
+    },
+    message: container.querySelector("#status-message")
+  };
+  function showView(name) {
+    Object.entries(els.views).forEach(([key, el]) => {
+      if (el) el.style.display = key === name ? "block" : "none";
     });
-    if (cfg.features.registration) {
-      this.registerPage("register", RegisterPage, {
-        route: cfg.routes.register,
-        title: "Register",
-        authConfig: cfg,
-        template: getTemplate("extensions/auth/pages/RegisterPage.mst")
-      });
-    }
-    if (cfg.features.forgotPassword) {
-      this.registerPage("forgot-password", ForgotPasswordPage, {
-        route: cfg.routes.forgot,
-        title: "Reset Password",
-        authConfig: cfg,
-        template: getTemplate("extensions/auth/pages/ForgotPasswordPage.mst")
-      });
-      this.registerPage("reset-password", ResetPasswordPage, {
-        route: cfg.routes.reset,
-        title: "Set New Password",
-        authConfig: cfg,
-        template: getTemplate("extensions/auth/pages/ResetPasswordPage.mst")
-      });
-    }
-  }
-  /**
-   * Sets up global event listeners to integrate AuthManager state with the app.
-   */
-  setupAuthIntegration() {
-    this.events.on("auth:login", (user) => {
-      this.showSuccess(`Welcome back, ${user.name || user.email}!`);
-      this.navigateAfterLogin();
-    });
-    this.events.on("auth:logout", () => {
-      this.navigate(this.authConfig.logoutRedirect);
-    });
-    this.events.on("auth:register", (user) => {
-      this.showSuccess(`Welcome, ${user.name || user.email}! Your account is ready.`);
-      this.navigate(this.authConfig.loginRedirect);
-    });
-    this.events.on("auth:tokenExpired", () => {
-      this.showWarning("Your session has expired. Please login again.");
-      this.navigate(this.authConfig.logoutRedirect);
-    });
-  }
-  /**
-   * Sets up route guards to protect pages.
-   */
-  setupAuthGuards() {
-    this.events.on("route:changed", ({ pageName, path }) => {
-      const page = this.getOrCreatePage(pageName);
-      if (!page) return;
-      const PageClass = page.constructor;
-      const isAuthenticated = this.auth.isAuthenticated;
-      const isAuthPage = ["login", "register", "forgot-password", "reset-password"].includes(pageName);
-      if (PageClass.requiresAuth && !isAuthenticated) {
-        sessionStorage.setItem("auth_redirect", path);
-        this.navigate(this.authConfig.routes.login);
-        this.showWarning("Please login to access this page.");
-        return;
-      }
-      if (isAuthenticated && isAuthPage) {
-        this.navigate(this.authConfig.loginRedirect);
-      }
-    });
-  }
-  /**
-   * Navigates to the intended page after a successful login.
-   */
-  navigateAfterLogin() {
-    const redirectPath = sessionStorage.getItem("auth_redirect");
-    if (redirectPath) {
-      sessionStorage.removeItem("auth_redirect");
-      this.navigate(redirectPath);
-    } else {
-      this.navigate(this.authConfig.loginRedirect);
-    }
-  }
-  /**
-   * Helper to protect a Page class.
-   * @param {Page} PageClass - The class to protect.
-   * @returns {Page} The protected class.
-   */
-  static requireAuth(PageClass) {
-    PageClass.requiresAuth = true;
-    return PageClass;
-  }
-}
-class PasskeyPlugin {
-  constructor(config = {}) {
-    this.name = "passkey";
-    this.config = {
-      rpName: "MOJO App",
-      rpId: window?.location?.hostname || "localhost",
-      timeout: 6e4,
-      userVerification: "preferred",
-      authenticatorAttachment: "platform",
-      // 'platform', 'cross-platform', or undefined
-      ...config
-    };
-    this.authManager = null;
-    this.app = null;
-    this.authService = null;
-  }
-  /**
-   * Initialize plugin with AuthManager and WebApp
-   * @param {AuthManager} authManager - Auth manager instance
-   * @param {WebApp} app - WebApp instance
-   */
-  async initialize(authManager, app) {
-    this.authManager = authManager;
-    this.app = app;
-    if (!this.isSupported()) {
-      console.warn("Passkey authentication is not supported in this browser");
+    setTimeout(() => {
+      const view = els.views[name];
+      const heading = view?.querySelector("h1, h2, .auth-title, .h5");
+      if (heading) {
+        heading.setAttribute("tabindex", "-1");
+        heading.focus?.();
+      } else {
+        const firstInput = view?.querySelector("input, button");
+        firstInput?.focus?.();
+      }
+    }, 60);
+  }
+  function showMessage(message, type = "info") {
+    const el = els.message;
+    if (!el) return;
+    el.textContent = message;
+    el.className = `alert alert-${type}`;
+    el.style.display = "block";
+    el.setAttribute("role", type === "danger" ? "alert" : "status");
+  }
+  function hideMessage() {
+    const el = els.message;
+    if (!el) return;
+    el.style.display = "none";
+  }
+  function setButtonLoading(button, loading) {
+    if (!button) return;
+    const textSpan = button.querySelector(".btn-text");
+    const spinner = button.querySelector(".btn-spinner");
+    button.disabled = !!loading;
+    if (textSpan) textSpan.style.display = loading ? "none" : "inline";
+    if (spinner) spinner.style.display = loading ? "inline-block" : "none";
+  }
+  function getResetMethod() {
+    if (els.radios.resetMethodCode?.checked) return "code";
+    if (els.radios.resetMethodLink?.checked) return "link";
+    return "code";
+  }
+  async function handleSignin(e) {
+    e?.preventDefault?.();
+    hideMessage();
+    const username = els.inputs.signinUsername?.value?.trim();
+    const password = els.inputs.signinPassword?.value;
+    if (!username || !password) {
+      showMessage("Please enter both username and password.", "danger");
       return;
     }
-    this.authManager.loginWithPasskey = this.loginWithPasskey.bind(this);
-    this.authManager.setupPasskey = this.setupPasskey.bind(this);
-    this.authManager.isPasskeySupported = this.isSupported.bind(this);
-    console.log("PasskeyPlugin initialized successfully");
-  }
-  /**
-   * Check if WebAuthn is supported in this browser
-   * @returns {boolean} True if supported
-   */
-  isSupported() {
-    return window.PublicKeyCredential !== void 0 && navigator.credentials !== void 0 && typeof navigator.credentials.create === "function" && typeof navigator.credentials.get === "function";
-  }
-  /**
-   * Login with passkey
-   * @returns {Promise<object>} Login result with user data and tokens
-   */
-  async loginWithPasskey() {
-    if (!this.isSupported()) {
-      throw new Error("Passkey authentication is not supported in this browser");
+    setButtonLoading(els.buttons.signin, true);
+    try {
+      await auth.login(username, password);
+      showMessage(`${T.successRedirecting}`, "success");
+      setTimeout(performRedirect, 350);
+    } catch (err) {
+      showMessage(auth.getErrorMessage(err) || T.invalidCredentials, "danger");
+      setButtonLoading(els.buttons.signin, false);
+    }
+  }
+  async function handleForgot(e) {
+    e?.preventDefault?.();
+    hideMessage();
+    const email = els.inputs.forgotEmail?.value?.trim();
+    const method = getResetMethod();
+    if (!email) {
+      showMessage("Please enter your email address.", "danger");
+      return;
     }
+    setButtonLoading(els.buttons.forgot, true);
     try {
-      const challengeResponse = await this.app.rest.POST("/api/auth/passkey/challenge");
-      if (!challengeResponse.success || !challengeResponse.data.data.challenge) {
-        throw new Error("No authentication challenge received from server");
-      }
-      const challengeData = challengeResponse.data.data;
-      const credentialRequestOptions = {
-        publicKey: {
-          challenge: this.base64ToArrayBuffer(challengeData.challenge),
-          timeout: this.config.timeout,
-          userVerification: this.config.userVerification,
-          rpId: this.config.rpId
-        }
-      };
-      const credential = await navigator.credentials.get(credentialRequestOptions);
-      if (!credential) {
-        throw new Error("No credential received from authenticator");
-      }
-      const credentialData = {
-        id: credential.id,
-        rawId: this.arrayBufferToBase64(credential.rawId),
-        type: credential.type,
-        response: {
-          authenticatorData: this.arrayBufferToBase64(credential.response.authenticatorData),
-          clientDataJSON: this.arrayBufferToBase64(credential.response.clientDataJSON),
-          signature: this.arrayBufferToBase64(credential.response.signature),
-          userHandle: credential.response.userHandle ? this.arrayBufferToBase64(credential.response.userHandle) : null
-        }
-      };
-      const loginResponse = await this.app.rest.POST("/api/auth/passkey/verify", {
-        credential: credentialData,
-        challengeId: challengeData.challengeId
-      });
-      if (!loginResponse.success || !loginResponse.data.status) {
-        throw new Error(loginResponse.data.error || "Passkey verification failed");
-      }
-      const { token, refreshToken, user } = loginResponse.data.data;
-      this.authManager.tokenManager.setTokens(token, refreshToken, true);
-      const userInfo = this.authManager.tokenManager.getUserInfo();
-      this.authManager.setAuthState({ ...user, ...userInfo });
-      if (this.authManager.config.autoRefresh) {
-        this.authManager.scheduleTokenRefresh();
+      await auth.forgot({ email, method });
+      if (method === "code") {
+        sessionStorage.setItem("reset_email", email);
+        sessionStorage.setItem("reset_method", method);
+        if (els.labels.resetEmailDisplay) els.labels.resetEmailDisplay.textContent = email;
+        showView("resetCode");
+        showMessage("Reset code sent! Check your email.", "success");
+      } else {
+        showMessage("Magic link sent! Check your email and click the link.", "success");
       }
-      this.authManager.emit("login", this.authManager.user);
-      return {
-        success: true,
-        user: this.authManager.user
-      };
-    } catch (error) {
-      console.error("Passkey login error:", error);
-      this.authManager.emit("loginError", error);
-      throw new Error(error.message || "Passkey authentication failed");
+    } catch (err) {
+      showMessage(auth.getErrorMessage(err) || "Something went wrong. Please try again.", "danger");
+    } finally {
+      setButtonLoading(els.buttons.forgot, false);
     }
   }
-  /**
-   * Setup passkey for current authenticated user
-   * @returns {Promise<object>} Setup result
-   */
-  async setupPasskey() {
-    if (!this.isSupported()) {
-      throw new Error("Passkey authentication is not supported in this browser");
-    }
-    if (!this.authManager.isAuthenticated) {
-      throw new Error("User must be authenticated to setup passkey");
+  async function handleResetCode(e) {
+    e?.preventDefault?.();
+    hideMessage();
+    const code = els.inputs.resetCode?.value?.trim();
+    const newPassword = els.inputs.resetPassword?.value;
+    const confirmPassword = els.inputs.resetPasswordConfirm?.value;
+    const email = sessionStorage.getItem("reset_email");
+    if (!email) {
+      showMessage("Session expired. Please restart the password reset process.", "danger");
+      showView("forgot");
+      return;
     }
-    try {
-      const optionsResponse = await this.app.rest.POST("/api/auth/passkey/register-options");
-      if (!optionsResponse.success || !optionsResponse.data.data.options) {
-        throw new Error("No registration options received from server");
-      }
-      const optionsData = optionsResponse.data.data;
-      const options = optionsData.options;
-      const credentialCreationOptions = {
-        publicKey: {
-          challenge: this.base64ToArrayBuffer(options.challenge),
-          rp: {
-            name: this.config.rpName,
-            id: this.config.rpId
-          },
-          user: {
-            id: this.base64ToArrayBuffer(options.userId),
-            name: options.userName,
-            displayName: options.userDisplayName
-          },
-          pubKeyCredParams: [
-            { alg: -7, type: "public-key" },
-            // ES256
-            { alg: -257, type: "public-key" }
-            // RS256
-          ],
-          authenticatorSelection: {
-            userVerification: this.config.userVerification
-          },
-          timeout: this.config.timeout,
-          attestation: "none"
-        }
-      };
-      if (this.config.authenticatorAttachment) {
-        credentialCreationOptions.publicKey.authenticatorSelection.authenticatorAttachment = this.config.authenticatorAttachment;
-      }
-      const credential = await navigator.credentials.create(credentialCreationOptions);
-      if (!credential) {
-        throw new Error("Failed to create credential");
-      }
-      const credentialData = {
-        id: credential.id,
-        rawId: this.arrayBufferToBase64(credential.rawId),
-        type: credential.type,
-        response: {
-          attestationObject: this.arrayBufferToBase64(credential.response.attestationObject),
-          clientDataJSON: this.arrayBufferToBase64(credential.response.clientDataJSON)
-        }
-      };
-      const registrationResponse = await this.app.rest.POST("/api/auth/passkey/register", {
-        credential: credentialData,
-        optionsId: optionsData.optionsId
-      });
-      if (!registrationResponse.success || !registrationResponse.data.status) {
-        throw new Error(registrationResponse.data.error || "Failed to register passkey");
-      }
-      this.authManager.emit("passkeySetupSuccess", registrationResponse.data.data);
-      return {
-        success: true,
-        data: registrationResponse.data.data
-      };
-    } catch (error) {
-      console.error("Passkey setup error:", error);
-      this.authManager.emit("passkeySetupError", error);
-      throw new Error(error.message || "Failed to setup passkey");
+    if (!code || !newPassword) {
+      showMessage(T.pleaseFillAllFields, "danger");
+      return;
     }
-  }
-  /**
-   * Check if user has passkeys registered
-   * @returns {Promise<object>} Result with passkey availability
-   */
-  async hasPasskeys() {
-    if (!this.authManager.isAuthenticated) {
-      return { success: false, hasPasskeys: false };
+    if (newPassword !== confirmPassword) {
+      showMessage(T.passwordsDoNotMatch, "danger");
+      return;
     }
+    setButtonLoading(els.buttons.resetCode, true);
     try {
-      const response = await this.app.rest.GET("/api/auth/passkey/list");
-      return {
-        success: response.success,
-        hasPasskeys: response.data.data?.passkeys && response.data.data.passkeys.length > 0,
-        count: response.data.data?.passkeys ? response.data.data.passkeys.length : 0
-      };
-    } catch (error) {
-      console.error("Error checking passkeys:", error);
-      return { success: false, hasPasskeys: false };
+      await auth.resetWithCode({ email, code, newPassword });
+      sessionStorage.removeItem("reset_email");
+      sessionStorage.removeItem("reset_method");
+      showMessage(T.successRedirecting, "success");
+      setTimeout(performRedirect, 350);
+    } catch (err) {
+      showMessage(auth.getErrorMessage(err) || "Invalid code or code expired.", "danger");
+      setButtonLoading(els.buttons.resetCode, false);
+    }
+  }
+  async function handleSetPassword(e) {
+    e?.preventDefault?.();
+    hideMessage();
+    const newPassword = els.inputs.setPassword?.value;
+    const confirmPassword = els.inputs.setPasswordConfirm?.value;
+    const token = sessionStorage.getItem("login_token");
+    if (!token) {
+      showMessage("Invalid or expired link. Please request a new one.", "danger");
+      showView("forgot");
+      return;
     }
-  }
-  /**
-   * Remove/revoke a specific passkey
-   * @param {string} credentialId - ID of credential to remove
-   * @returns {Promise<object>} Result of removal
-   */
-  async removePasskey(credentialId) {
-    if (!this.authManager.isAuthenticated) {
-      throw new Error("User must be authenticated to remove passkey");
+    if (!newPassword) {
+      showMessage("Please enter a new password.", "danger");
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      showMessage(T.passwordsDoNotMatch, "danger");
+      return;
     }
+    setButtonLoading(els.buttons.setPassword, true);
     try {
-      const response = await this.app.rest.DELETE("/api/auth/passkey/remove", { credentialId });
-      if (!response.success || !response.data.status) {
-        throw new Error(response.data.error || "Failed to remove passkey");
-      }
-      this.authManager.emit("passkeyRemoved", { credentialId });
-      return {
-        success: true,
-        data: response.data.data
-      };
-    } catch (error) {
-      console.error("Error removing passkey:", error);
-      throw new Error(error.message || "Failed to remove passkey");
+      await auth.resetWithToken({ token, newPassword });
+      sessionStorage.removeItem("login_token");
+      showMessage(T.successRedirecting, "success");
+      setTimeout(performRedirect, 350);
+    } catch (err) {
+      showMessage(auth.getErrorMessage(err) || "Invalid or expired link.", "danger");
+      setButtonLoading(els.buttons.setPassword, false);
+    }
+  }
+  function goToForgot(e) {
+    e?.preventDefault?.();
+    hideMessage();
+    showView("forgot");
+  }
+  function backToSignin() {
+    hideMessage();
+    showView("signin");
+  }
+  function backToForgot() {
+    hideMessage();
+    showView("forgot");
+  }
+  function bindProviders() {
+    if (providers?.google && els.buttons.google) {
+      els.buttons.google.addEventListener("click", (e) => {
+        e?.preventDefault?.();
+        providers.google.onClick?.({ container, auth, redirect: performRedirect, showMessage });
+      });
     }
-  }
-  /**
-   * Convert base64 string to ArrayBuffer
-   * @param {string} base64 - Base64 string
-   * @returns {ArrayBuffer} ArrayBuffer
-   */
-  base64ToArrayBuffer(base64) {
-    const binaryString = atob(base64);
-    const bytes = new Uint8Array(binaryString.length);
-    for (let i = 0; i < binaryString.length; i++) {
-      bytes[i] = binaryString.charCodeAt(i);
+    if (providers?.passkey && els.buttons.passkey) {
+      els.buttons.passkey.addEventListener("click", (e) => {
+        e?.preventDefault?.();
+        providers.passkey.onClick?.({ container, auth, redirect: performRedirect, showMessage });
+      });
     }
-    return bytes.buffer;
   }
-  /**
-   * Convert ArrayBuffer to base64 string
-   * @param {ArrayBuffer} buffer - ArrayBuffer
-   * @returns {string} Base64 string
-   */
-  arrayBufferToBase64(buffer) {
-    const bytes = new Uint8Array(buffer);
-    let binary = "";
-    for (let i = 0; i < bytes.byteLength; i++) {
-      binary += String.fromCharCode(bytes[i]);
+  els.forms.signin?.addEventListener("submit", handleSignin);
+  els.forms.forgot?.addEventListener("submit", handleForgot);
+  els.forms.resetCode?.addEventListener("submit", handleResetCode);
+  els.forms.setPassword?.addEventListener("submit", handleSetPassword);
+  els.links.forgot?.addEventListener("click", goToForgot);
+  els.buttons.backSignin?.addEventListener("click", backToSignin);
+  els.buttons.backForgot?.addEventListener("click", backToForgot);
+  bindProviders();
+  (function init() {
+    const params = new URLSearchParams(window.location.search);
+    const loginToken = params.get("login_token");
+    if (loginToken) {
+      sessionStorage.setItem("login_token", loginToken);
+      params.delete("login_token");
+      const newUrl = params.toString() ? `${window.location.pathname}?${params.toString()}` : window.location.pathname;
+      window.history.replaceState({}, "", newUrl);
+      showView("setPassword");
+      showMessage("Please set your new password.", "info");
+      return;
     }
-    return btoa(binary);
-  }
-  /**
-   * Get browser compatibility info
-   * @returns {object} Compatibility information
-   */
-  getBrowserCompatibility() {
-    return {
-      webAuthnSupported: !!window.PublicKeyCredential,
-      credentialsSupported: !!navigator.credentials,
-      platformSupported: this.config.authenticatorAttachment === "platform" ? window.PublicKeyCredential?.isUserVerifyingPlatformAuthenticatorAvailable?.() : true,
-      conditionalMediationSupported: window.PublicKeyCredential?.isConditionalMediationAvailable?.()
-    };
-  }
-  /**
-   * Plugin cleanup
-   */
-  destroy() {
-    if (this.authManager) {
-      delete this.authManager.loginWithPasskey;
-      delete this.authManager.setupPasskey;
-      delete this.authManager.isPasskeySupported;
+    const resetEmail = sessionStorage.getItem("reset_email");
+    if (resetEmail) {
+      if (els.labels.resetEmailDisplay) els.labels.resetEmailDisplay.textContent = resetEmail;
+      showView("resetCode");
+      return;
     }
-    this.authManager = null;
-    this.app = null;
-    this.authService = null;
-  }
+    showView("signin");
+  })();
+  return {
+    destroy() {
+      els.forms.signin?.removeEventListener("submit", handleSignin);
+      els.forms.forgot?.removeEventListener("submit", handleForgot);
+      els.forms.resetCode?.removeEventListener("submit", handleResetCode);
+      els.forms.setPassword?.removeEventListener("submit", handleSetPassword);
+      els.links.forgot?.removeEventListener("click", goToForgot);
+      els.buttons.backSignin?.removeEventListener("click", backToSignin);
+      els.buttons.backForgot?.removeEventListener("click", backToForgot);
+      if (providers?.google && els.buttons.google) {
+        els.buttons.google.replaceWith(els.buttons.google.cloneNode(true));
+      }
+      if (providers?.passkey && els.buttons.passkey) {
+        els.buttons.passkey.replaceWith(els.buttons.passkey.cloneNode(true));
+      }
+      container.innerHTML = "";
+    }
+  };
 }
+const index = {
+  mountAuth,
+  createAuthClient
+};
+const SimpleAuth = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  createAuthClient,
+  default: index,
+  mountAuth
+}, Symbol.toStringTag, { value: "Module" }));
 export {
-  AuthApp,
-  AuthManager,
   B as BUILD_TIME,
-  ForgotPasswordPage,
-  LoginPage,
-  PasskeyPlugin,
-  RegisterPage,
-  ResetPasswordPage,
   a as VERSION,
   V as VERSION_INFO,
   b as VERSION_MAJOR,
   c as VERSION_MINOR,
   d as VERSION_REVISION,
-  WebApp
+  createAuthClient,
+  SimpleAuth as default,
+  mountAuth
 };
 //# sourceMappingURL=auth.es.js.map