@erikey/react 0.4.26 → 0.4.27

package/src/kv-client.ts

@@ -0,0 +1,316 @@
+/**
+ * @erikey/react - KV Store Client
+ *
+ * Erikey-specific key-value storage for end-users.
+ * Stores data per-user, scoped to the project.
+ *
+ * This is NOT part of better-auth - it's an Erikey-specific feature.
+ */
+
+import {
+  shouldUseBearerAuth,
+  getStoredToken,
+} from './lib/cross-origin-auth';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface KvClientConfig {
+  /**
+   * Your Erikey project ID (pk_live_xxx or pk_test_xxx)
+   */
+  projectId: string;
+
+  /**
+   * Base URL for the auth API
+   * @default 'https://auth.erikey.com'
+   */
+  baseUrl?: string;
+}
+
+export interface KvPair {
+  key: string;
+  value: any;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface KvBulkSetInput {
+  key: string;
+  value: any;
+}
+
+export interface SetValueResponse {
+  success: boolean;
+  data?: { key: string; value: any };
+  error?: string;
+}
+
+export interface GetValueResponse {
+  success: boolean;
+  data?: KvPair;
+  error?: string;
+}
+
+export interface GetValuesResponse {
+  success: boolean;
+  data?: { kvPairs: KvPair[]; total: number };
+  error?: string;
+}
+
+export interface DeleteValueResponse {
+  success: boolean;
+  data?: { message: string };
+  error?: string;
+}
+
+export interface DeleteValuesResponse {
+  success: boolean;
+  data?: { deleted: string[]; failed: Array<{ key: string; error: string }> };
+  error?: string;
+}
+
+export interface SetValuesResponse {
+  success: boolean;
+  data?: { results: Array<{ key: string; success: boolean }>; total: number };
+  error?: string;
+}
+
+// ============================================================================
+// KV Client
+// ============================================================================
+
+/**
+ * Create a KV store client for per-user data storage
+ *
+ * @example
+ * ```tsx
+ * import { createKvClient } from '@erikey/react';
+ *
+ * const kv = createKvClient({
+ *   projectId: 'pk_live_xxx',
+ * });
+ *
+ * // Store a value
+ * await kv.setValue('preferences', { theme: 'dark' });
+ *
+ * // Get a value
+ * const { data } = await kv.getValue('preferences');
+ *
+ * // Get all values
+ * const { data: all } = await kv.getValues();
+ *
+ * // Delete a value
+ * await kv.deleteValue('preferences');
+ * ```
+ */
+export function createKvClient(config: KvClientConfig) {
+  const { projectId, baseUrl = 'https://auth.erikey.com' } = config;
+  const useBearerAuth = shouldUseBearerAuth(baseUrl);
+
+  /**
+   * Internal helper for making authenticated requests
+   */
+  const fetchWithAuth = async <T>(
+    endpoint: string,
+    options?: RequestInit
+  ): Promise<T> => {
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+      'X-Project-Id': projectId,
+      ...(options?.headers as Record<string, string> || {}),
+    };
+
+    // Add Bearer token for cross-origin contexts
+    if (useBearerAuth) {
+      const token = getStoredToken(projectId);
+      if (token) {
+        headers['Authorization'] = `Bearer ${token}`;
+      }
+    }
+
+    const response = await fetch(`${baseUrl}/api/auth${endpoint}`, {
+      ...options,
+      credentials: useBearerAuth ? 'omit' : 'include',
+      headers,
+    });
+
+    const data = await response.json() as any;
+
+    if (!response.ok) {
+      return {
+        success: false,
+        error: data?.error?.message || data?.message || 'Request failed',
+      } as T;
+    }
+
+    return {
+      success: true,
+      data,
+    } as T;
+  };
+
+  return {
+    /**
+     * Set a single key-value pair
+     */
+    setValue: async (key: string, value: any): Promise<SetValueResponse> => {
+      return fetchWithAuth<SetValueResponse>(`/key-value/${encodeURIComponent(key)}`, {
+        method: 'PUT',
+        body: JSON.stringify({ value }),
+      });
+    },
+
+    /**
+     * Get a single key-value pair
+     */
+    getValue: async (key: string): Promise<GetValueResponse> => {
+      const result = await fetchWithAuth<{ success: boolean; data?: any; error?: string }>(
+        `/key-value/${encodeURIComponent(key)}`,
+        { method: 'GET' }
+      );
+
+      if (!result.success) {
+        return { success: false, error: result.error };
+      }
+
+      return {
+        success: true,
+        data: {
+          key: result.data.key,
+          value: result.data.value,
+          createdAt: result.data.createdAt,
+          updatedAt: result.data.updatedAt,
+        },
+      };
+    },
+
+    /**
+     * Get all key-value pairs for the authenticated user
+     */
+    getValues: async (): Promise<GetValuesResponse> => {
+      const result = await fetchWithAuth<{ success: boolean; data?: any; error?: string }>(
+        '/key-value',
+        { method: 'GET' }
+      );
+
+      if (!result.success) {
+        return { success: false, error: result.error };
+      }
+
+      return {
+        success: true,
+        data: {
+          kvPairs: result.data.kvPairs,
+          total: result.data.total,
+        },
+      };
+    },
+
+    /**
+     * Delete a single key-value pair
+     */
+    deleteValue: async (key: string): Promise<DeleteValueResponse> => {
+      const result = await fetchWithAuth<{ success: boolean; data?: any; error?: string }>(
+        `/key-value/${encodeURIComponent(key)}`,
+        { method: 'DELETE' }
+      );
+
+      if (!result.success) {
+        return { success: false, error: result.error };
+      }
+
+      return {
+        success: true,
+        data: {
+          message: result.data.message || 'KV pair deleted',
+        },
+      };
+    },
+
+    /**
+     * Delete multiple key-value pairs
+     */
+    deleteValues: async (keys: string[]): Promise<DeleteValuesResponse> => {
+      if (keys.length === 0) {
+        return {
+          success: true,
+          data: {
+            deleted: [],
+            failed: [],
+          },
+        };
+      }
+
+      const results = await Promise.allSettled(
+        keys.map((key) =>
+          fetchWithAuth<{ success: boolean; error?: string }>(
+            `/key-value/${encodeURIComponent(key)}`,
+            { method: 'DELETE' }
+          ).then((result) => ({ key, result }))
+        )
+      );
+
+      const deleted: string[] = [];
+      const failed: Array<{ key: string; error: string }> = [];
+
+      results.forEach((result, index) => {
+        if (result.status === 'fulfilled') {
+          const { key, result: deleteResult } = result.value;
+          if (deleteResult.success) {
+            deleted.push(key);
+          } else {
+            failed.push({
+              key,
+              error: deleteResult.error || 'Delete failed',
+            });
+          }
+        } else {
+          failed.push({
+            key: keys[index],
+            error: result.reason?.message || 'Request failed',
+          });
+        }
+      });
+
+      return {
+        success: failed.length === 0,
+        data: {
+          deleted,
+          failed,
+        },
+      };
+    },
+
+    /**
+     * Set multiple key-value pairs in bulk (max 100 pairs)
+     */
+    setValues: async (kvPairs: KvBulkSetInput[]): Promise<SetValuesResponse> => {
+      const result = await fetchWithAuth<{ success: boolean; data?: any; error?: string }>(
+        '/key-value/bulk',
+        {
+          method: 'POST',
+          body: JSON.stringify({ kvPairs }),
+        }
+      );
+
+      if (!result.success) {
+        return { success: false, error: result.error };
+      }
+
+      return {
+        success: true,
+        data: {
+          results: result.data.results,
+          total: result.data.total,
+        },
+      };
+    },
+  };
+}
+
+/**
+ * Type helper for inferring the KV client type
+ */
+export type KvClient = ReturnType<typeof createKvClient>;

package/src/lib/cross-origin-auth.ts

@@ -0,0 +1,99 @@
+/**
+ * Cross-origin authentication utilities
+ *
+ * Handles authentication in cross-origin contexts where cookies don't work:
+ * - Sandpack preview iframes
+ * - Deployed customer sites (e.g., mysite.com -> auth.erikey.com)
+ *
+ * Uses localStorage to store bearer tokens as a fallback.
+ */
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface StoredSession {
+  id: string;
+  token: string;
+  expiresAt: string;
+}
+
+// ============================================================================
+// Detection
+// ============================================================================
+
+/**
+ * Detect if we should use Bearer token authentication
+ *
+ * Returns true when the current origin differs from the auth API origin,
+ * meaning cookies won't work and we need Bearer tokens.
+ */
+export function shouldUseBearerAuth(authApiUrl: string): boolean {
+  if (typeof window === 'undefined') {
+    return false;
+  }
+
+  try {
+    const currentOrigin = window.location.origin;
+    const authOrigin = new URL(authApiUrl).origin;
+    return currentOrigin !== authOrigin;
+  } catch {
+    return false;
+  }
+}
+
+// ============================================================================
+// Storage
+// ============================================================================
+
+function getStorageKey(projectId: string): string {
+  return `erikey.session.${projectId}`;
+}
+
+/**
+ * Store session token in localStorage for cross-origin contexts
+ */
+export function storeToken(projectId: string, session: StoredSession): void {
+  if (typeof window === 'undefined') return;
+
+  const key = getStorageKey(projectId);
+  localStorage.setItem(key, JSON.stringify(session));
+}
+
+/**
+ * Get stored token from localStorage
+ * Returns null if not found or expired
+ */
+export function getStoredToken(projectId: string): string | null {
+  if (typeof window === 'undefined') return null;
+
+  const key = getStorageKey(projectId);
+  const stored = localStorage.getItem(key);
+
+  if (!stored) return null;
+
+  try {
+    const session: StoredSession = JSON.parse(stored);
+
+    // Check if expired
+    if (new Date(session.expiresAt) < new Date()) {
+      localStorage.removeItem(key);
+      return null;
+    }
+
+    return session.token;
+  } catch {
+    localStorage.removeItem(key);
+    return null;
+  }
+}
+
+/**
+ * Clear stored token from localStorage
+ */
+export function clearToken(projectId: string): void {
+  if (typeof window === 'undefined') return;
+
+  const key = getStorageKey(projectId);
+  localStorage.removeItem(key);
+}

package/src/stubs/captcha.ts

@@ -0,0 +1,24 @@
+/**
+ * Captcha Provider Stubs
+ *
+ * No-op implementations for captcha providers. These are optional features
+ * that most users won't need. If real captcha is required, the user should
+ * configure it separately in their application.
+ */
+
+// @wojtekmaj/react-recaptcha-v3
+export const GoogleReCaptchaProvider = ({ children }: { children?: React.ReactNode }) => children;
+export const useGoogleReCaptcha = () => ({ executeRecaptcha: null });
+
+// @captchafox/react
+export const CaptchaFox = () => null;
+
+// @hcaptcha/react-hcaptcha
+export const HCaptcha = () => null;
+export default HCaptcha;
+
+// @marsidev/react-turnstile
+export const Turnstile = () => null;
+
+// react-google-recaptcha
+export const ReCAPTCHA = () => null;

package/src/stubs/hashes.ts

@@ -0,0 +1,16 @@
+/**
+ * Noble Hashes Stubs
+ *
+ * No-op implementations for @noble/hashes.
+ * Used for cryptographic operations in passkey/WebAuthn flows.
+ */
+
+// @noble/hashes
+export const sha256 = () => new Uint8Array(32);
+
+// @noble/hashes/sha2
+export { sha256 as sha256Hash };
+
+// @noble/hashes/utils
+export const bytesToHex = (_bytes: Uint8Array) => '';
+export const hexToBytes = (_hex: string) => new Uint8Array(0);

package/src/stubs/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Stubs for Optional Dependencies
+ *
+ * These provide no-op implementations for optional features like captcha providers,
+ * passkey support, QR codes, etc. This allows the SDK to be fully self-contained
+ * without requiring consumers to install packages they don't use.
+ *
+ * If a user wants to use a real implementation, they can configure it in their app.
+ */
+
+// Re-export all stubs
+export * from './captcha';
+export * from './passkey';
+export * from './qr-code';
+export * from './hashes';
+export * from './query';
+export * from './realtime';

package/src/stubs/passkey.ts

@@ -0,0 +1,12 @@
+/**
+ * Passkey Stubs
+ *
+ * No-op implementations for @better-auth/passkey.
+ * Passkey support is optional and requires WebAuthn-capable browsers.
+ */
+
+// @better-auth/passkey
+export const passkey = () => ({});
+
+// @better-auth/passkey/client
+export const passkeyClient = () => ({});

package/src/stubs/qr-code.ts

@@ -0,0 +1,10 @@
+/**
+ * QR Code Stub
+ *
+ * No-op implementation for react-qr-code.
+ * Used for 2FA TOTP setup. If not needed, this stub prevents import errors.
+ */
+
+// react-qr-code
+const QRCode = () => null;
+export default QRCode;

package/src/stubs/query.ts

@@ -0,0 +1,16 @@
+/**
+ * Query Library Stubs
+ *
+ * No-op implementations for optional query/state management libraries.
+ */
+
+// @tanstack/react-query
+export const QueryClient = class {
+  constructor() {}
+};
+export const QueryClientProvider = ({ children }: { children?: React.ReactNode }) => children;
+export const useQuery = () => ({ data: undefined, isLoading: false, error: null });
+export const useMutation = () => ({ mutate: () => {}, isLoading: false, error: null });
+
+// @daveyplate/better-auth-tanstack
+export const createAuthTanstack = () => ({});

package/src/stubs/realtime.ts

@@ -0,0 +1,17 @@
+/**
+ * Realtime Database Stubs
+ *
+ * No-op implementations for optional realtime database libraries.
+ */
+
+// @instantdb/react
+export const init = () => ({});
+export const useQuery = () => ({ data: undefined, isLoading: false, error: null });
+
+// @triplit/client
+export const TriplitClient = class {
+  constructor() {}
+};
+
+// @triplit/react
+export const useTriplit = () => ({ client: null });

package/src/stubs/use-sync-external-store.ts

@@ -0,0 +1,12 @@
+/**
+ * use-sync-external-store stub
+ *
+ * Redirects to React 18's built-in useSyncExternalStore.
+ * The npm package is a CJS polyfill that fails in browser ESM.
+ * Since we require React 18+, we use the native implementation.
+ */
+import { useSyncExternalStore } from 'react';
+
+export { useSyncExternalStore };
+export { useSyncExternalStore as useSyncExternalStoreWithSelector };
+export default useSyncExternalStore;

package/src/styles.css

@@ -0,0 +1,141 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*
+ * Animation CSS for SDK components
+ *
+ * These styles are bundled with the SDK to ensure they work regardless of
+ * consumer's Tailwind configuration. Placed AFTER @tailwind utilities so
+ * these styles take precedence over purged Tailwind output.
+ *
+ * This solves the problem where consumer's Tailwind purges animation classes
+ * because they only exist in the SDK's minified bundle.
+ */
+
+/* Keyframes for enter/exit animations (from tailwindcss-animate) */
+@keyframes enter {
+	from {
+		opacity: var(--tw-enter-opacity, 1);
+		transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
+			scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
+			rotate(var(--tw-enter-rotate, 0));
+	}
+}
+
+@keyframes exit {
+	to {
+		opacity: var(--tw-exit-opacity, 1);
+		transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
+			scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))
+			rotate(var(--tw-exit-rotate, 0));
+	}
+}
+
+/* Animation base classes */
+.animate-in {
+	animation-name: enter;
+	animation-duration: 150ms;
+	--tw-enter-opacity: initial;
+	--tw-enter-scale: initial;
+	--tw-enter-rotate: initial;
+	--tw-enter-translate-x: initial;
+	--tw-enter-translate-y: initial;
+}
+
+.animate-out {
+	animation-name: exit;
+	animation-duration: 150ms;
+	--tw-exit-opacity: initial;
+	--tw-exit-scale: initial;
+	--tw-exit-rotate: initial;
+	--tw-exit-translate-x: initial;
+	--tw-exit-translate-y: initial;
+}
+
+/* Opacity variants */
+.fade-in-0 { --tw-enter-opacity: 0; }
+.fade-out-0 { --tw-exit-opacity: 0; }
+
+/* Scale variants */
+.zoom-in-95 { --tw-enter-scale: 0.95; }
+.zoom-out-95 { --tw-exit-scale: 0.95; }
+
+/* Slide variants */
+.slide-in-from-top-2 { --tw-enter-translate-y: -0.5rem; }
+.slide-in-from-bottom-2 { --tw-enter-translate-y: 0.5rem; }
+.slide-in-from-left-2 { --tw-enter-translate-x: -0.5rem; }
+.slide-in-from-right-2 { --tw-enter-translate-x: 0.5rem; }
+
+/* Data attribute variants for Radix UI components */
+[data-state="open"].animate-in {
+	animation-name: enter;
+	animation-duration: 150ms;
+}
+
+[data-state="closed"].animate-out {
+	animation-name: exit;
+	animation-duration: 150ms;
+}
+
+[data-state="open"].fade-in-0,
+.data-\[state\=open\]\:fade-in-0[data-state="open"] {
+	--tw-enter-opacity: 0;
+}
+
+[data-state="closed"].fade-out-0,
+.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
+	--tw-exit-opacity: 0;
+}
+
+[data-state="open"].zoom-in-95,
+.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
+	--tw-enter-scale: 0.95;
+}
+
+[data-state="closed"].zoom-out-95,
+.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
+	--tw-exit-scale: 0.95;
+}
+
+/* Slide variants with data-side for dropdown positioning */
+[data-side="bottom"].slide-in-from-top-2,
+.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
+	--tw-enter-translate-y: -0.5rem;
+}
+
+[data-side="top"].slide-in-from-bottom-2,
+.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
+	--tw-enter-translate-y: 0.5rem;
+}
+
+[data-side="left"].slide-in-from-right-2,
+.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
+	--tw-enter-translate-x: 0.5rem;
+}
+
+[data-side="right"].slide-in-from-left-2,
+.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
+	--tw-enter-translate-x: -0.5rem;
+}
+
+/* Tailwind's data attribute variant syntax support */
+.data-\[state\=open\]\:animate-in[data-state="open"] {
+	animation-name: enter;
+	animation-duration: 150ms;
+	--tw-enter-opacity: initial;
+	--tw-enter-scale: initial;
+	--tw-enter-rotate: initial;
+	--tw-enter-translate-x: initial;
+	--tw-enter-translate-y: initial;
+}
+
+.data-\[state\=closed\]\:animate-out[data-state="closed"] {
+	animation-name: exit;
+	animation-duration: 150ms;
+	--tw-exit-opacity: initial;
+	--tw-exit-scale: initial;
+	--tw-exit-rotate: initial;
+	--tw-exit-translate-x: initial;
+	--tw-exit-translate-y: initial;
+}

package/src/types.ts

@@ -0,0 +1,14 @@
+/**
+ * @erikey/react types
+ *
+ * Re-exports shared types from @erikey/core for dashboard client compatibility.
+ * For end-user auth types, see auth-client.ts.
+ */
+
+// Re-export dashboard-related types from core
+export type {
+  SessionData,
+  Organization,
+  APIKey,
+  Permission,
+} from '@erikey/core/types';