@better-auth-ui/core 1.6.0

package/dist/src/lib/localization.d.ts

@@ -0,0 +1,145 @@
+export declare const localization: {
+    auth: {
+        /** @remarks `"Account"` */
+        account: string;
+        /** @remarks `"Add Account"` */
+        addAccount: string;
+        /** @remarks `"Already have an account?"` */
+        alreadyHaveAnAccount: string;
+        /** @remarks `"Confirm Password"` */
+        confirmPassword: string;
+        /** @remarks `"Confirm your password"` */
+        confirmPasswordPlaceholder: string;
+        /** @remarks `"Continue with {{provider}}"` */
+        continueWith: string;
+        /** @remarks `"Email"` */
+        email: string;
+        /** @remarks `"Enter your email"` */
+        emailPlaceholder: string;
+        /** @remarks `"Forgot Password"` */
+        forgotPassword: string;
+        /** @remarks `"Forgot password?"` */
+        forgotPasswordLink: string;
+        /** @remarks `"Hide password"` */
+        hidePassword: string;
+        /** @remarks `"Invalid reset password token"` */
+        invalidResetPasswordToken: string;
+        /** @remarks `"Magic Link"` */
+        magicLink: string;
+        /** @remarks `"Magic link sent to your email"` */
+        magicLinkSent: string;
+        /** @remarks `"Name"` */
+        name: string;
+        /** @remarks `"Enter your name"` */
+        namePlaceholder: string;
+        /** @remarks `"Need to create an account?"` */
+        needToCreateAnAccount: string;
+        /** @remarks `"New Password"` */
+        newPassword: string;
+        /** @remarks `"Enter your new password"` */
+        newPasswordPlaceholder: string;
+        /** @remarks `"OR"` */
+        or: string;
+        /** @remarks `"Password"` */
+        password: string;
+        /** @remarks `"Enter your password"` */
+        passwordPlaceholder: string;
+        /** @remarks `"Password reset email sent"` */
+        passwordResetEmailSent: string;
+        /** @remarks `"Password reset successfully"` */
+        passwordResetSuccess: string;
+        /** @remarks `"Passwords do not match"` */
+        passwordsDoNotMatch: string;
+        /** @remarks `"Remember me"` */
+        rememberMe: string;
+        /** @remarks `"Remember your password?"` */
+        rememberYourPassword: string;
+        /** @remarks `"Resend"` */
+        resend: string;
+        /** @remarks `"Reset Password"` */
+        resetPassword: string;
+        /** @remarks `"Send Magic Link"` */
+        sendMagicLink: string;
+        /** @remarks `"Send Reset Link"` */
+        sendResetLink: string;
+        /** @remarks `"Show password"` */
+        showPassword: string;
+        /** @remarks `"Sign In"` */
+        signIn: string;
+        /** @remarks `"Sign Out"` */
+        signOut: string;
+        /** @remarks `"Sign Up"` */
+        signUp: string;
+        /** @remarks `"Switch Account"` */
+        switchAccount: string;
+        /** @remarks `"Verification email sent!"` */
+        verificationEmailSent: string;
+        /** @remarks `"Verify your email"` */
+        verifyYourEmail: string;
+    };
+    settings: {
+        /** @remarks `"Account"` */
+        account: string;
+        /** @remarks `"Account unlinked"` */
+        accountUnlinked: string;
+        /** @remarks `"Active"` */
+        active: string;
+        /** @remarks `"Active Sessions"` */
+        activeSessions: string;
+        /** @remarks `"Current Session"` */
+        currentSession: string;
+        /** @remarks `"Link"` */
+        link: string;
+        /** @remarks `"Linked Accounts"` */
+        linkedAccounts: string;
+        /** @remarks `"Link {{provider}}"` */
+        linkProvider: string;
+        /** @remarks `"Appearance"` */
+        appearance: string;
+        /** @remarks `"Change Email"` */
+        changeEmail: string;
+        /** @remarks `"Check your email to confirm the change"` */
+        changeEmailSuccess: string;
+        /** @remarks `"Change Password"` */
+        changePassword: string;
+        /** @remarks `"Password changed successfully"` */
+        changePasswordSuccess: string;
+        /** @remarks `"Current Password"` */
+        currentPassword: string;
+        /** @remarks `"Enter your current password"` */
+        currentPasswordPlaceholder: string;
+        /** @remarks `"Dark"` */
+        dark: string;
+        /** @remarks `"Light"` */
+        light: string;
+        /** @remarks `"Manage Accounts"` */
+        manageAccounts: string;
+        /** @remarks `"Profile"` */
+        profile: string;
+        /** @remarks `"Profile updated successfully"` */
+        profileUpdatedSuccess: string;
+        /** @remarks `"Revoke Session"` */
+        revokeSession: string;
+        /** @remarks `"Session revoked successfully"` */
+        revokeSessionSuccess: string;
+        /** @remarks `"Save changes"` */
+        saveChanges: string;
+        /** @remarks `"Security"` */
+        security: string;
+        /** @remarks `"Settings"` */
+        settings: string;
+        /** @remarks `"System"` */
+        system: string;
+        /** @remarks `"Theme"` */
+        theme: string;
+        /** @remarks `"Unlink {{provider}}"` */
+        unlinkProvider: string;
+        /** @remarks `"Update Email"` */
+        updateEmail: string;
+        /** @remarks `"Update Password"` */
+        updatePassword: string;
+    };
+};
+export type Localization = typeof localization;
+export type AuthLocalization = Localization["auth"];
+export type SettingsLocalization = Localization["settings"];

package/dist/src/lib/localization.js

@@ -0,0 +1,142 @@
+export const localization = {
+    auth: {
+        /** @remarks `"Account"` */
+        account: "Account",
+        /** @remarks `"Add Account"` */
+        addAccount: "Add Account",
+        /** @remarks `"Already have an account?"` */
+        alreadyHaveAnAccount: "Already have an account?",
+        /** @remarks `"Confirm Password"` */
+        confirmPassword: "Confirm Password",
+        /** @remarks `"Confirm your password"` */
+        confirmPasswordPlaceholder: "Confirm your password",
+        /** @remarks `"Continue with {{provider}}"` */
+        continueWith: "Continue with {{provider}}",
+        /** @remarks `"Email"` */
+        email: "Email",
+        /** @remarks `"Enter your email"` */
+        emailPlaceholder: "Enter your email",
+        /** @remarks `"Forgot Password"` */
+        forgotPassword: "Forgot Password",
+        /** @remarks `"Forgot password?"` */
+        forgotPasswordLink: "Forgot password?",
+        /** @remarks `"Hide password"` */
+        hidePassword: "Hide password",
+        /** @remarks `"Invalid reset password token"` */
+        invalidResetPasswordToken: "Invalid reset password token",
+        /** @remarks `"Magic Link"` */
+        magicLink: "Magic Link",
+        /** @remarks `"Magic link sent to your email"` */
+        magicLinkSent: "Magic link sent to your email",
+        /** @remarks `"Name"` */
+        name: "Name",
+        /** @remarks `"Enter your name"` */
+        namePlaceholder: "Enter your name",
+        /** @remarks `"Need to create an account?"` */
+        needToCreateAnAccount: "Need to create an account?",
+        /** @remarks `"New Password"` */
+        newPassword: "New Password",
+        /** @remarks `"Enter your new password"` */
+        newPasswordPlaceholder: "Enter your new password",
+        /** @remarks `"OR"` */
+        or: "OR",
+        /** @remarks `"Password"` */
+        password: "Password",
+        /** @remarks `"Enter your password"` */
+        passwordPlaceholder: "Enter your password",
+        /** @remarks `"Password reset email sent"` */
+        passwordResetEmailSent: "Password reset email sent",
+        /** @remarks `"Password reset successfully"` */
+        passwordResetSuccess: "Password reset successfully",
+        /** @remarks `"Passwords do not match"` */
+        passwordsDoNotMatch: "Passwords do not match",
+        /** @remarks `"Remember me"` */
+        rememberMe: "Remember me",
+        /** @remarks `"Remember your password?"` */
+        rememberYourPassword: "Remember your password?",
+        /** @remarks `"Resend"` */
+        resend: "Resend",
+        /** @remarks `"Reset Password"` */
+        resetPassword: "Reset Password",
+        /** @remarks `"Send Magic Link"` */
+        sendMagicLink: "Send Magic Link",
+        /** @remarks `"Send Reset Link"` */
+        sendResetLink: "Send Reset Link",
+        /** @remarks `"Show password"` */
+        showPassword: "Show password",
+        /** @remarks `"Sign In"` */
+        signIn: "Sign In",
+        /** @remarks `"Sign Out"` */
+        signOut: "Sign Out",
+        /** @remarks `"Sign Up"` */
+        signUp: "Sign Up",
+        /** @remarks `"Switch Account"` */
+        switchAccount: "Switch Account",
+        /** @remarks `"Verification email sent!"` */
+        verificationEmailSent: "Verification email sent!",
+        /** @remarks `"Verify your email"` */
+        verifyYourEmail: "Verify your email"
+    },
+    settings: {
+        /** @remarks `"Account"` */
+        account: "Account",
+        /** @remarks `"Account unlinked"` */
+        accountUnlinked: "Account unlinked",
+        /** @remarks `"Active"` */
+        active: "Active",
+        /** @remarks `"Active Sessions"` */
+        activeSessions: "Active Sessions",
+        /** @remarks `"Current Session"` */
+        currentSession: "Current Session",
+        /** @remarks `"Link"` */
+        link: "Link",
+        /** @remarks `"Linked Accounts"` */
+        linkedAccounts: "Linked Accounts",
+        /** @remarks `"Link {{provider}}"` */
+        linkProvider: "Link {{provider}}",
+        /** @remarks `"Appearance"` */
+        appearance: "Appearance",
+        /** @remarks `"Change Email"` */
+        changeEmail: "Change Email",
+        /** @remarks `"Check your email to confirm the change"` */
+        changeEmailSuccess: "Check your email to confirm the change",
+        /** @remarks `"Change Password"` */
+        changePassword: "Change Password",
+        /** @remarks `"Password changed successfully"` */
+        changePasswordSuccess: "Password changed successfully",
+        /** @remarks `"Current Password"` */
+        currentPassword: "Current Password",
+        /** @remarks `"Enter your current password"` */
+        currentPasswordPlaceholder: "Enter your current password",
+        /** @remarks `"Dark"` */
+        dark: "Dark",
+        /** @remarks `"Light"` */
+        light: "Light",
+        /** @remarks `"Manage Accounts"` */
+        manageAccounts: "Manage Accounts",
+        /** @remarks `"Profile"` */
+        profile: "Profile",
+        /** @remarks `"Profile updated successfully"` */
+        profileUpdatedSuccess: "Profile updated successfully",
+        /** @remarks `"Revoke Session"` */
+        revokeSession: "Revoke Session",
+        /** @remarks `"Session revoked successfully"` */
+        revokeSessionSuccess: "Session revoked successfully",
+        /** @remarks `"Save changes"` */
+        saveChanges: "Save changes",
+        /** @remarks `"Security"` */
+        security: "Security",
+        /** @remarks `"Settings"` */
+        settings: "Settings",
+        /** @remarks `"System"` */
+        system: "System",
+        /** @remarks `"Theme"` */
+        theme: "Theme",
+        /** @remarks `"Unlink {{provider}}"` */
+        unlinkProvider: "Unlink {{provider}}",
+        /** @remarks `"Update Email"` */
+        updateEmail: "Update Email",
+        /** @remarks `"Update Password"` */
+        updatePassword: "Update Password"
+    }
+};

package/dist/src/lib/provider-names.d.ts

@@ -0,0 +1,12 @@
+import type { SocialProvider } from "better-auth/social-providers";
+/**
+ * Mapping of social authentication provider identifiers to their human-readable display names.
+ */
+export declare const providerNames: Record<SocialProvider, string>;
+/**
+ * Get the human-readable display name for an authentication provider.
+ *
+ * @param provider - The provider identifier (e.g., "github", "google").
+ * @returns The mapped display name for `provider` if available, otherwise `provider` with its first character capitalized.
+ */
+export declare function getProviderName(provider: string): string;

package/dist/src/lib/provider-names.js

@@ -0,0 +1,49 @@
+/**
+ * Mapping of social authentication provider identifiers to their human-readable display names.
+ */
+export const providerNames = {
+    apple: "Apple",
+    atlassian: "Atlassian",
+    cognito: "Cognito",
+    discord: "Discord",
+    dropbox: "Dropbox",
+    facebook: "Facebook",
+    figma: "Figma",
+    github: "GitHub",
+    gitlab: "GitLab",
+    google: "Google",
+    huggingface: "Hugging Face",
+    kakao: "Kakao",
+    kick: "Kick",
+    line: "LINE",
+    linear: "Linear",
+    linkedin: "LinkedIn",
+    microsoft: "Microsoft",
+    naver: "Naver",
+    notion: "Notion",
+    paybin: "Paybin",
+    paypal: "PayPal",
+    polar: "Polar",
+    railway: "Railway",
+    reddit: "Reddit",
+    roblox: "Roblox",
+    salesforce: "Salesforce",
+    slack: "Slack",
+    spotify: "Spotify",
+    tiktok: "TikTok",
+    twitch: "Twitch",
+    twitter: "X",
+    vercel: "Vercel",
+    vk: "VK",
+    zoom: "Zoom"
+};
+/**
+ * Get the human-readable display name for an authentication provider.
+ *
+ * @param provider - The provider identifier (e.g., "github", "google").
+ * @returns The mapped display name for `provider` if available, otherwise `provider` with its first character capitalized.
+ */
+export function getProviderName(provider) {
+    return (providerNames[provider] ||
+        provider.charAt(0).toUpperCase() + provider.slice(1));
+}

package/dist/src/lib/utils.d.ts

@@ -0,0 +1 @@
+export declare function deepmerge<T>(target: T, source: Partial<T>): T;

package/dist/src/lib/utils.js

@@ -0,0 +1,30 @@
+function isObject(item) {
+    return item !== null && typeof item === "object" && !Array.isArray(item);
+}
+function isPlainObject(item) {
+    if (!isObject(item))
+        return false;
+    // Handle special object types that should not be merged
+    if (item instanceof Date)
+        return false;
+    if (item instanceof RegExp)
+        return false;
+    return true;
+}
+export function deepmerge(target, source) {
+    if (isPlainObject(target) && isPlainObject(source)) {
+        const result = { ...target };
+        for (const [key, value] of Object.entries(source)) {
+            if (value === undefined)
+                continue; // skip undefineds
+            if (key in target) {
+                result[key] = deepmerge(target[key], value);
+            }
+            else {
+                result[key] = value;
+            }
+        }
+        return result;
+    }
+    return source;
+}

package/dist/src/lib/view-paths.d.ts

@@ -0,0 +1,30 @@
+/**
+ * All view path segments.
+ */
+export declare const viewPaths: {
+    auth: {
+        signIn: string;
+        signUp: string;
+        magicLink: string;
+        forgotPassword: string;
+        resetPassword: string;
+        signOut: string;
+    };
+    settings: {
+        account: string;
+        security: string;
+    };
+};
+/**
+ * Provides type information for the nested view path structure used throughout
+ * the application for routing and navigation.
+ */
+export type ViewPaths = typeof viewPaths;
+/**
+ * Valid auth view key.
+ */
+export type AuthView = keyof ViewPaths["auth"];
+/**
+ * Valid settings view key.
+ */
+export type SettingsView = keyof ViewPaths["settings"];

package/dist/src/lib/view-paths.js

@@ -0,0 +1,17 @@
+/**
+ * All view path segments.
+ */
+export const viewPaths = {
+    auth: {
+        signIn: "sign-in",
+        signUp: "sign-up",
+        magicLink: "magic-link",
+        forgotPassword: "forgot-password",
+        resetPassword: "reset-password",
+        signOut: "sign-out"
+    },
+    settings: {
+        account: "account",
+        security: "security"
+    }
+};

package/dist/utils.d.ts

@@ -0,0 +1,3 @@
+export declare function resizeAvatar(file: File, size?: number, extension?: "png" | "jpg" | "webp" | "inherit"): Promise<File>;
+export declare function fileToBase64(file: File): Promise<string>;
+export declare function deepmerge<T>(target: T, source: Partial<T>): T;

package/dist/utils.js

@@ -0,0 +1,80 @@
+function isObject(item) {
+    return item !== null && typeof item === "object" && !Array.isArray(item);
+}
+function isPlainObject(item) {
+    if (!isObject(item))
+        return false;
+    // Handle special object types that should not be merged
+    if (item instanceof Date)
+        return false;
+    if (item instanceof RegExp)
+        return false;
+    return true;
+}
+export function resizeAvatar(file, size = 256, extension = "png") {
+    const MAX_SIZE = size;
+    const resolvedExtension = extension === "inherit" ? file.name.split(".").pop() : extension;
+    const mimeType = extension === "inherit"
+        ? file.type
+        : `image/${extension === "jpg" ? "jpeg" : extension}`;
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        const url = URL.createObjectURL(file);
+        img.onload = () => {
+            URL.revokeObjectURL(url);
+            const { naturalWidth: w, naturalHeight: h } = img;
+            const side = Math.min(w, h);
+            const cropX = (w - side) / 2;
+            const cropY = (h - side) / 2;
+            const outSize = Math.min(side, MAX_SIZE);
+            const canvas = document.createElement("canvas");
+            canvas.width = outSize;
+            canvas.height = outSize;
+            const ctx = canvas.getContext("2d");
+            if (!ctx) {
+                reject(new Error("Could not get canvas context"));
+                return;
+            }
+            ctx.drawImage(img, cropX, cropY, side, side, 0, 0, outSize, outSize);
+            canvas.toBlob((blob) => {
+                if (!blob) {
+                    reject(new Error("Could not create blob from canvas"));
+                    return;
+                }
+                resolve(new File([blob], file.name.replace(/\.[^.]+$/, `.${resolvedExtension}`), {
+                    type: mimeType
+                }));
+            }, mimeType, 1);
+        };
+        img.onerror = () => {
+            URL.revokeObjectURL(url);
+            reject(new Error("Failed to load image"));
+        };
+        img.src = url;
+    });
+}
+export function fileToBase64(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = () => reject(new Error("Failed to read file"));
+        reader.readAsDataURL(file);
+    });
+}
+export function deepmerge(target, source) {
+    if (isPlainObject(target) && isPlainObject(source)) {
+        const result = { ...target };
+        for (const [key, value] of Object.entries(source)) {
+            if (value === undefined)
+                continue; // skip undefineds
+            if (key in target) {
+                result[key] = deepmerge(target[key], value);
+            }
+            else {
+                result[key] = value;
+            }
+        }
+        return result;
+    }
+    return source;
+}

package/dist/view-paths.d.ts

@@ -0,0 +1,30 @@
+/**
+ * All view path segments.
+ */
+export declare const viewPaths: {
+    auth: {
+        signIn: string;
+        signUp: string;
+        magicLink: string;
+        forgotPassword: string;
+        resetPassword: string;
+        signOut: string;
+    };
+    settings: {
+        account: string;
+        security: string;
+    };
+};
+/**
+ * Provides type information for the nested view path structure used throughout
+ * the application for routing and navigation.
+ */
+export type ViewPaths = typeof viewPaths;
+/**
+ * Valid auth view key.
+ */
+export type AuthView = keyof ViewPaths["auth"];
+/**
+ * Valid settings view key.
+ */
+export type SettingsView = keyof ViewPaths["settings"];

package/dist/view-paths.js

@@ -0,0 +1,17 @@
+/**
+ * All view path segments.
+ */
+export const viewPaths = {
+    auth: {
+        signIn: "sign-in",
+        signUp: "sign-up",
+        magicLink: "magic-link",
+        forgotPassword: "forgot-password",
+        resetPassword: "reset-password",
+        signOut: "sign-out"
+    },
+    settings: {
+        account: "account",
+        security: "security"
+    }
+};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@better-auth-ui/core",
+  "version": "1.6.0",
+  "type": "module",
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "vitest"
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "devDependencies": {
+    "better-auth": "^1.6.4",
+    "vitest": "^4.1.4"
+  },
+  "peerDependencies": {
+    "better-auth": ">=1.6.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/config/appearance-config.ts

@@ -0,0 +1,24 @@
+/**
+ * Available theme options for the application.
+ */
+export type Theme = "system" | "light" | "dark"
+
+/**
+ * Configuration options for appearance/theme settings.
+ */
+export type AppearanceConfig = {
+  /**
+   * Function to set the application theme
+   * @param theme - The theme value to set
+   */
+  setTheme?: (theme: string) => void
+  /**
+   * Current theme value
+   */
+  theme?: string
+  /**
+   * Available theme options to display in the theme switcher
+   * @default ["system", "light", "dark"]
+   */
+  themes: Theme[]
+}