@erikey/react 0.4.26 → 0.4.28

package/src/ui/lib/triplit/model-names.ts

@@ -0,0 +1,24 @@
+const namespaces = [
+    "user",
+    "session",
+    "account",
+    "passkey",
+    "twoFactor"
+] as const
+type Namespace = (typeof namespaces)[number]
+
+export type ModelNames = {
+    [key in Namespace]: string
+}
+
+export const getModelName = ({
+    namespace,
+    modelNames,
+    usePlural = false
+}: {
+    namespace: Namespace
+    modelNames?: Partial<ModelNames>
+    usePlural?: boolean
+}) => {
+    return modelNames?.[namespace] || `${namespace}${usePlural ? "s" : ""}`
+}

package/src/ui/lib/triplit/use-conditional-query.ts

@@ -0,0 +1,82 @@
+import type {
+    FetchResult,
+    Models,
+    SchemaQuery,
+    SubscriptionOptions,
+    SubscriptionSignalPayload,
+    TriplitClient
+} from "@triplit/client"
+import type { WorkerClient } from "@triplit/client/worker-client"
+import { createStateSubscription } from "@triplit/react"
+import { useCallback, useMemo, useState, useSyncExternalStore } from "react"
+
+export function useConditionalQuery<
+    M extends Models<M>,
+    Q extends SchemaQuery<M>
+>(
+    client: TriplitClient<M> | WorkerClient<M>,
+    query?: Q | false | null | "" | 0,
+    options?: Partial<SubscriptionOptions> & { disabled?: boolean }
+) {
+    const stringifiedQuery =
+        !options?.disabled && query && JSON.stringify(query)
+    const localOnly = !!options?.localOnly
+    const [remoteFulfilled, setRemoteFulfilled] = useState(false)
+
+    const defaultValue: SubscriptionSignalPayload<M, Q> = {
+        results: undefined,
+        fetching: true,
+        fetchingLocal: false,
+        fetchingRemote: false,
+        error: undefined
+    }
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: prevent infinite re-renders
+    const [subscribe, snapshot] = useMemo(
+        () =>
+            stringifiedQuery
+                ? createStateSubscription(client, query, {
+                      ...options,
+                      onRemoteFulfilled: () => setRemoteFulfilled(true)
+                  })
+                : [() => () => {}, () => defaultValue],
+        [stringifiedQuery, localOnly]
+    )
+
+    const getServerSnapshot = useCallback(() => snapshot(), [snapshot])
+    const { fetching, ...rest } = useSyncExternalStore(
+        subscribe,
+        snapshot,
+        getServerSnapshot
+    )
+    return { fetching: fetching && !remoteFulfilled, ...rest }
+}
+
+type useConditionalQueryOnePayload<
+    M extends Models<M>,
+    Q extends SchemaQuery<M>
+> = Omit<SubscriptionSignalPayload<M, Q>, "results"> & {
+    result: FetchResult<M, Q, "one">
+}
+
+export function useConditionalQueryOne<
+    M extends Models<M>,
+    Q extends SchemaQuery<M>
+>(
+    client: TriplitClient<M> | WorkerClient<M>,
+    query?: Q | false | null | "" | 0,
+    options?: Partial<SubscriptionOptions> & { disabled?: boolean }
+): useConditionalQueryOnePayload<M, Q> {
+    const { fetching, fetchingLocal, fetchingRemote, results, error } =
+        useConditionalQuery(
+            client,
+            query ? ({ ...query, limit: 1 } as Q) : query,
+            options
+        )
+
+    const result = useMemo(() => {
+        return results?.[0] ?? null
+    }, [results])
+
+    return { fetching, fetchingLocal, fetchingRemote, result, error }
+}

package/src/ui/lib/triplit/use-list-accounts.ts

@@ -0,0 +1,31 @@
+import type { AuthHooks } from "../../types/auth-hooks"
+import { getModelName } from "./model-names"
+import { useConditionalQuery } from "./use-conditional-query"
+import type { UseTriplitOptionsProps } from "./use-triplit-hooks"
+import { useTriplitToken } from "./use-triplit-token"
+
+export function useListAccounts({
+    triplit,
+    modelNames,
+    usePlural,
+    isPending
+}: UseTriplitOptionsProps): ReturnType<AuthHooks["useListAccounts"]> {
+    const modelName = getModelName({
+        namespace: "account",
+        modelNames,
+        usePlural
+    })
+
+    const { payload } = useTriplitToken(triplit)
+
+    const { results, error, fetching } = useConditionalQuery(
+        triplit,
+        payload?.sub && triplit.query(modelName)
+    )
+
+    return {
+        data: results,
+        isPending: isPending || fetching,
+        error
+    }
+}

package/src/ui/lib/triplit/use-list-sessions.ts

@@ -0,0 +1,33 @@
+import type { Session } from "better-auth"
+import type { AuthHooks } from "../../types/auth-hooks"
+import { getModelName } from "./model-names"
+import { useConditionalQuery } from "./use-conditional-query"
+import type { UseTriplitOptionsProps } from "./use-triplit-hooks"
+import { useTriplitToken } from "./use-triplit-token"
+
+export function useListSessions({
+    triplit,
+    modelNames,
+    usePlural,
+    isPending
+}: UseTriplitOptionsProps): ReturnType<AuthHooks["useListSessions"]> {
+    const modelName = getModelName({
+        namespace: "session",
+        modelNames,
+        usePlural
+    })
+
+    const { payload } = useTriplitToken(triplit)
+
+    const {
+        results: sessions,
+        error,
+        fetching
+    } = useConditionalQuery(triplit, payload?.sub && triplit.query(modelName))
+
+    return {
+        data: sessions as Session[] | undefined,
+        isPending: isPending || fetching,
+        error
+    }
+}

package/src/ui/lib/triplit/use-session.ts

@@ -0,0 +1,42 @@
+import type { User } from "../../types/auth-client"
+import type { AuthHooks } from "../../types/auth-hooks"
+import { getModelName } from "./model-names"
+import { useConditionalQueryOne } from "./use-conditional-query"
+import type { UseTriplitOptionsProps } from "./use-triplit-hooks"
+import { useTriplitToken } from "./use-triplit-token"
+
+export function useSession({
+    triplit,
+    sessionData,
+    isPending,
+    refetch,
+    usePlural,
+    modelNames
+}: UseTriplitOptionsProps): ReturnType<AuthHooks["useSession"]> {
+    const modelName = getModelName({
+        namespace: "user",
+        modelNames,
+        usePlural
+    })
+
+    const { payload } = useTriplitToken(triplit)
+
+    const { result: user, error } = useConditionalQueryOne(
+        triplit,
+        payload?.sub && triplit.query(modelName)
+    )
+
+    return {
+        data: sessionData
+            ? {
+                  session: sessionData.session,
+                  user: (sessionData?.user.id === user?.id
+                      ? user
+                      : sessionData.user) as User
+              }
+            : null,
+        error,
+        isPending: isPending,
+        refetch: refetch || (() => {})
+    }
+}

package/src/ui/lib/triplit/use-triplit-hooks.ts

@@ -0,0 +1,68 @@
+import type { TriplitClient } from "@triplit/client"
+import type { User } from "better-auth"
+import { useMemo } from "react"
+
+import type { Session } from "../../types/auth-client"
+import type { AuthHooks } from "../../types/auth-hooks"
+import type { Refetch } from "../../types/refetch"
+import { useListAccounts } from "./use-list-accounts"
+import { useListSessions } from "./use-list-sessions"
+import { useSession } from "./use-session"
+
+const namespaces = ["user", "session", "account", "passkey"] as const
+type Namespace = (typeof namespaces)[number]
+
+type ModelNames = {
+    [key in Namespace]: string
+}
+
+export interface UseTriplitOptionsProps {
+    // biome-ignore lint/suspicious/noExplicitAny: ignore
+    triplit: TriplitClient<any>
+    modelNames?: Partial<ModelNames>
+    usePlural?: boolean
+    sessionData?: { user: User; session: Session } | null
+    refetch?: Refetch
+    isPending: boolean
+}
+
+export function useTriplitHooks({
+    triplit,
+    usePlural = true,
+    modelNames,
+    sessionData,
+    isPending
+}: UseTriplitOptionsProps) {
+    const hooks = useMemo(() => {
+        return {
+            useSession: () =>
+                useSession({
+                    triplit,
+                    modelNames,
+                    usePlural,
+                    sessionData,
+                    isPending
+                }),
+            useListAccounts: () =>
+                useListAccounts({
+                    triplit,
+                    modelNames,
+                    usePlural,
+                    sessionData,
+                    isPending
+                }),
+            useListSessions: () =>
+                useListSessions({
+                    triplit,
+                    modelNames,
+                    usePlural,
+                    sessionData,
+                    isPending
+                })
+        } as AuthHooks
+    }, [triplit, modelNames, usePlural, sessionData, isPending])
+
+    return {
+        hooks
+    }
+}

package/src/ui/lib/triplit/use-triplit-token.ts

@@ -0,0 +1,44 @@
+import type { TriplitClient } from "@triplit/client"
+import { useConnectionStatus } from "@triplit/react"
+import { useMemo } from "react"
+
+export function useTriplitToken(triplit: TriplitClient) {
+    const connectionStatus = useConnectionStatus(triplit)
+
+    // biome-ignore lint/correctness/useExhaustiveDependencies: update when connection status changes
+    const payload = useMemo(
+        () =>
+            triplit.token
+                ? (decodeJWT(triplit.token) as Record<string, unknown> & {
+                      exp: number
+                      iat: number
+                      sub?: string
+                      email?: string
+                      name?: string
+                  })
+                : undefined,
+        [connectionStatus]
+    )
+
+    return { token: payload && triplit.token, payload }
+}
+
+function decodeJWT(token: string) {
+    try {
+        const base64Url = token.split(".")[1]
+        const base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/")
+        const jsonPayload = decodeURIComponent(
+            atob(base64)
+                .split("")
+                .map((char) => {
+                    return `%${(`00${char.charCodeAt(0).toString(16)}`).slice(-2)}`
+                })
+                .join("")
+        )
+
+        return JSON.parse(jsonPayload)
+    } catch (error) {
+        console.error("Failed to decode JWT:", error)
+        return null
+    }
+}

package/src/ui/lib/utils.ts

@@ -0,0 +1,119 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+import * as z from "zod"
+import type { AuthLocalization } from "../localization/auth-localization"
+import type { PasswordValidation } from "../types/password-validation"
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+export function isValidEmail(email: string) {
+    const emailRegex: RegExp = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+    return emailRegex.test(email)
+}
+
+/**
+ * Converts error codes from SNAKE_CASE to camelCase
+ * Example: INVALID_TWO_FACTOR_COOKIE -> invalidTwoFactorCookie
+ */
+export function errorCodeToCamelCase(errorCode: string): string {
+    return errorCode
+        .toLowerCase()
+        .replace(/_([a-z])/g, (_, char) => char.toUpperCase())
+}
+
+/**
+ * Gets a localized error message from an error object
+ */
+export function getLocalizedError({
+    error,
+    localization,
+    localizeErrors = true
+}: {
+    // biome-ignore lint/suspicious/noExplicitAny: ignore
+    error: any
+    localization?: Partial<AuthLocalization>
+    localizeErrors: boolean
+}) {
+    const DEFAULT_ERROR_MESSAGE = "Request failed"
+
+    // If localization is disabled, return backend error message directly
+    if (!localizeErrors) {
+        if (error?.message) return error.message
+        if (error?.error?.message) return error.error.message
+
+        return DEFAULT_ERROR_MESSAGE
+    }
+
+    if (typeof error === "string") {
+        if (localization?.[error as keyof AuthLocalization])
+            return localization[error as keyof AuthLocalization]
+    }
+
+    if (error?.error) {
+        if (error.error.code) {
+            const errorCode = error.error.code as keyof AuthLocalization
+            if (localization?.[errorCode]) return localization[errorCode]
+        }
+
+        return (
+            error.error.message ||
+            error.error.code ||
+            error.error.statusText ||
+            localization?.REQUEST_FAILED
+        )
+    }
+
+    return (
+        error?.message || localization?.REQUEST_FAILED || DEFAULT_ERROR_MESSAGE
+    )
+}
+
+export function getSearchParam(paramName: string) {
+    return typeof window !== "undefined"
+        ? new URLSearchParams(window.location.search).get(paramName)
+        : null
+}
+
+export function getViewByPath<T extends object>(viewPaths: T, path?: string) {
+    for (const key in viewPaths) {
+        if (viewPaths[key] === path) {
+            return key
+        }
+    }
+}
+
+export function getKeyByValue<T extends Record<string, unknown>>(
+    object: T,
+    value?: T[keyof T]
+): keyof T | undefined {
+    return (Object.keys(object) as Array<keyof T>).find(
+        (key) => object[key] === value
+    )
+}
+
+export function getPasswordSchema(
+    passwordValidation?: PasswordValidation,
+    localization?: AuthLocalization
+) {
+    let schema = z.string().min(1, {
+        message: localization?.PASSWORD_REQUIRED
+    })
+    if (passwordValidation?.minLength) {
+        schema = schema.min(passwordValidation.minLength, {
+            message: localization?.PASSWORD_TOO_SHORT
+        })
+    }
+    if (passwordValidation?.maxLength) {
+        schema = schema.max(passwordValidation.maxLength, {
+            message: localization?.PASSWORD_TOO_LONG
+        })
+    }
+    if (passwordValidation?.regex) {
+        schema = schema.regex(passwordValidation.regex, {
+            message: localization?.INVALID_PASSWORD
+        })
+    }
+    return schema
+}

package/src/ui/lib/view-paths.ts

@@ -0,0 +1,61 @@
+export const authViewPaths = {
+    /** @default "callback" */
+    CALLBACK: "callback",
+    /** @default "email-otp" */
+    EMAIL_OTP: "email-otp",
+    /** @default "email-verification" */
+    EMAIL_VERIFICATION: "email-verification",
+    /** @default "forgot-password" */
+    FORGOT_PASSWORD: "forgot-password",
+    /** @default "magic-link" */
+    MAGIC_LINK: "magic-link",
+    /** @default "recover-account" */
+    RECOVER_ACCOUNT: "recover-account",
+    /** @default "reset-password" */
+    RESET_PASSWORD: "reset-password",
+    /** @default "sign-in" */
+    SIGN_IN: "sign-in",
+    /** @default "sign-out" */
+    SIGN_OUT: "sign-out",
+    /** @default "sign-up" */
+    SIGN_UP: "sign-up",
+    /** @default "two-factor" */
+    TWO_FACTOR: "two-factor",
+    /** @default "accept-invitation" */
+    ACCEPT_INVITATION: "accept-invitation"
+}
+
+export type AuthViewPaths = typeof authViewPaths
+
+// Account-scoped views (signed-in user)
+export const accountViewPaths = {
+    /** @default "settings" */
+    SETTINGS: "settings",
+    /** @default "security" */
+    SECURITY: "security",
+    /** @default "teams" */
+    TEAMS: "teams",
+    /** @default "api-keys" */
+    API_KEYS: "api-keys",
+    /** @default "organizations" */
+    ORGANIZATIONS: "organizations"
+}
+
+export type AccountViewPaths = typeof accountViewPaths
+
+// Organization-scoped views
+export const organizationViewPaths = {
+    /** @default "settings" */
+    SETTINGS: "settings",
+    /** @default "members" */
+    MEMBERS: "members",
+    /** @default "teams" */
+    TEAMS: "teams",
+    /** @default "api-keys" */
+    API_KEYS: "api-keys"
+}
+
+export type OrganizationViewPaths = typeof organizationViewPaths
+export type AuthViewPath = keyof AuthViewPaths
+export type AccountViewPath = keyof AccountViewPaths
+export type OrganizationViewPath = keyof OrganizationViewPaths

package/src/ui/lib/wallet.ts

@@ -0,0 +1,129 @@
+/**
+ * Minimal Wallet Utilities
+ *
+ * Uses raw window.ethereum calls (no viem dependency).
+ * Works with any injected wallet (MetaMask, Phantom, Coinbase, etc.)
+ */
+
+declare global {
+  interface Window {
+    ethereum?: {
+      request: (args: { method: string; params?: unknown[] }) => Promise<unknown>;
+      on?: (event: string, handler: (...args: unknown[]) => void) => void;
+      removeListener?: (event: string, handler: (...args: unknown[]) => void) => void;
+    };
+  }
+}
+
+export interface WalletConnection {
+  address: string;
+  chainId: number;
+}
+
+/**
+ * Check if an injected wallet (MetaMask, Phantom, etc.) is available
+ */
+export function hasInjectedWallet(): boolean {
+  return typeof window !== 'undefined' && !!window.ethereum;
+}
+
+/**
+ * Connect to injected wallet and get address + chainId
+ */
+export async function connectWallet(): Promise<WalletConnection> {
+  if (!window.ethereum) {
+    throw new Error('No wallet found. Please install MetaMask or Phantom.');
+  }
+
+  const accounts = await window.ethereum.request({
+    method: 'eth_requestAccounts',
+  }) as string[];
+
+  if (!accounts || accounts.length === 0) {
+    throw new Error('No accounts found');
+  }
+
+  const chainIdHex = await window.ethereum.request({
+    method: 'eth_chainId',
+  }) as string;
+
+  // Convert address to checksummed format (EIP-55)
+  const address = toChecksumAddress(accounts[0]);
+
+  return {
+    address,
+    chainId: parseInt(chainIdHex, 16),
+  };
+}
+
+/**
+ * Sign a message using the connected wallet
+ */
+export async function signMessage(message: string, address: string): Promise<string> {
+  if (!window.ethereum) {
+    throw new Error('No wallet found');
+  }
+
+  return window.ethereum.request({
+    method: 'personal_sign',
+    params: [message, address],
+  }) as Promise<string>;
+}
+
+/**
+ * Build a SIWE message string (ERC-4361 format)
+ * No external siwe package needed - it's just formatted text
+ */
+export function buildSiweMessage(opts: {
+  domain: string;
+  address: string;
+  statement: string;
+  uri: string;
+  version: string;
+  chainId: number;
+  nonce: string;
+  issuedAt?: string;
+}): string {
+  const issuedAt = opts.issuedAt || new Date().toISOString();
+
+  // ERC-4361 SIWE message format
+  // https://eips.ethereum.org/EIPS/eip-4361
+  return `${opts.domain} wants you to sign in with your Ethereum account:
+${opts.address}
+
+${opts.statement}
+
+URI: ${opts.uri}
+Version: ${opts.version}
+Chain ID: ${opts.chainId}
+Nonce: ${opts.nonce}
+Issued At: ${issuedAt}`;
+}
+
+/**
+ * Convert address to EIP-55 checksummed format
+ * Required by SIWE - lowercase addresses will fail verification
+ */
+function toChecksumAddress(address: string): string {
+  // Remove 0x prefix, lowercase
+  const addr = address.toLowerCase().replace('0x', '');
+
+  // Simple keccak256 hash using SubtleCrypto isn't available synchronously,
+  // so we use the standard algorithm with a precomputed approach.
+  // For now, return mixed case based on simple character position heuristic.
+  // This matches the format wallets typically return.
+
+  // Most modern wallets (MetaMask, Phantom) already return checksummed addresses
+  // from eth_requestAccounts. If not, the server-side siwe package handles it.
+  // We do a basic validation here.
+  if (address.match(/^0x[0-9a-fA-F]{40}$/)) {
+    // If it's already mixed case (checksummed), return as-is
+    if (address !== address.toLowerCase() && address !== address.toUpperCase()) {
+      return address;
+    }
+  }
+
+  // Return as-is - server will handle validation
+  // Modern wallets return checksummed addresses anyway
+  return address;
+}

package/src/ui/localization/admin-error-codes.ts

@@ -0,0 +1,20 @@
+export const ADMIN_ERROR_CODES = {
+    FAILED_TO_CREATE_USER: "Failed to create user",
+    USER_ALREADY_EXISTS: "User already exists",
+    YOU_CANNOT_BAN_YOURSELF: "You cannot ban yourself",
+    YOU_ARE_NOT_ALLOWED_TO_CHANGE_USERS_ROLE:
+        "You are not allowed to change users role",
+    YOU_ARE_NOT_ALLOWED_TO_CREATE_USERS: "You are not allowed to create users",
+    YOU_ARE_NOT_ALLOWED_TO_LIST_USERS: "You are not allowed to list users",
+    YOU_ARE_NOT_ALLOWED_TO_LIST_USERS_SESSIONS:
+        "You are not allowed to list users sessions",
+    YOU_ARE_NOT_ALLOWED_TO_BAN_USERS: "You are not allowed to ban users",
+    YOU_ARE_NOT_ALLOWED_TO_IMPERSONATE_USERS:
+        "You are not allowed to impersonate users",
+    YOU_ARE_NOT_ALLOWED_TO_REVOKE_USERS_SESSIONS:
+        "You are not allowed to revoke users sessions",
+    YOU_ARE_NOT_ALLOWED_TO_DELETE_USERS: "You are not allowed to delete users",
+    YOU_ARE_NOT_ALLOWED_TO_SET_USERS_PASSWORD:
+        "You are not allowed to set users password",
+    BANNED_USER: "You have been banned from this application"
+}

package/src/ui/localization/anonymous-error-codes.ts

@@ -0,0 +1,6 @@
+export const ANONYMOUS_ERROR_CODES = {
+    FAILED_TO_CREATE_USER: "Failed to create user",
+    COULD_NOT_CREATE_SESSION: "Could not create session",
+    ANONYMOUS_USERS_CANNOT_SIGN_IN_AGAIN_ANONYMOUSLY:
+        "Anonymous users cannot sign in again anonymously"
+}