@tiquo/dom-package 1.0.0 → 1.0.1

package/README.md

@@ -5,8 +5,9 @@ Tiquo SDK for third-party websites. Integrate authentication, customer profiles,
 ## Features
 
 - **Email OTP Authentication** - Secure passwordless login using email verification codes
-- **Session Management** - Automatic session persistence and refresh
+- **JWT-Based Tokens** - Secure access and refresh tokens with automatic refresh
 - **Multi-Tab Sync** - Auth state automatically syncs across all browser tabs
+- **Native App Integration** - WebView token injection for iOS/Android hybrid apps
 - **Customer Flow Integration** - Embed authenticated customer flows with one line of code
 - **Framework Agnostic** - Works with React, Vue, Svelte, or vanilla JavaScript
 - **TypeScript Support** - Full type definitions included
@@ -85,8 +86,10 @@ Verify the OTP code and authenticate the user.
 const result = await auth.verifyOTP('user@example.com', '123456');
 // {
 //   success: true,
-//   sessionToken: 'xxx',
-//   expiresAt: 1234567890,
+//   accessToken: 'eyJhbGciOiJSUzI1NiJ9...',
+//   refreshToken: 'rt_xxx...',
+//   expiresIn: 3600,
+//   expiresAt: 1234567890000,
 //   isNewUser: false,
 //   hasCustomer: true
 // }
@@ -480,18 +483,85 @@ try {
 }
 ```
 
+## Native App WebView Integration
+
+When building hybrid apps with iOS/Android native + WebView, you can pass authentication tokens from the native app to the DOM package.
+
+### Method 1: Config Parameters
+
+```typescript
+const auth = new TiquoAuth({
+  publicKey: 'pk_dom_xxx',
+  accessToken: 'eyJhbGciOiJSUzI1NiJ9...',  // From OAuth flow
+  refreshToken: 'rt_xxx...'
+});
+```
+
+### Method 2: Global Variable (Native App Injects JS)
+
+**iOS (Swift):**
+```swift
+let script = """
+window.__TIQUO_INIT_TOKEN__ = {
+  accessToken: '\(accessToken)',
+  refreshToken: '\(refreshToken)'
+};
+"""
+let userScript = WKUserScript(source: script, injectionTime: .atDocumentStart, forMainFrameOnly: true)
+webView.configuration.userContentController.addUserScript(userScript)
+```
+
+**Android (Kotlin):**
+```kotlin
+webView.evaluateJavascript("""
+  window.__TIQUO_INIT_TOKEN__ = {
+    accessToken: '$accessToken',
+    refreshToken: '$refreshToken'
+  };
+""".trimIndent(), null)
+```
+
+### Method 3: URL Fragment
+
+```
+https://yoursite.com/page#access_token=eyJ...&refresh_token=rt_...
+```
+
+The DOM package automatically detects and consumes tokens from all three methods. The user will be immediately authenticated in the WebView without needing to log in again.
+
+For complete integration examples, see the [Client API documentation](https://github.com/tiquo/tiquo-dashboard/blob/main/apps/web/docs/CLIENT_API.md).
+
+## Token Management
+
+The SDK uses JWT tokens for authentication:
+
+- **Access Token**: Short-lived (1 hour), used for API requests
+- **Refresh Token**: Long-lived (30 days), used to obtain new access tokens
+- **Automatic Refresh**: Tokens are automatically refreshed before expiration
+
+```typescript
+// Get tokens for manual use (advanced)
+const accessToken = auth.getAccessToken();
+const refreshToken = auth.getRefreshToken();
+
+// Initialize with external tokens
+auth.initWithTokens(accessToken, refreshToken);
+```
+
 ## Security Considerations
 
 - The public key is safe to expose in client-side code
-- Sessions are stored in localStorage with automatic refresh
+- Tokens are stored in localStorage with automatic refresh
+- Access tokens expire after 1 hour (automatically refreshed)
+- Refresh tokens expire after 30 days
 - OTP codes expire after 10 minutes
 - Failed OTP attempts are rate limited (max 5 attempts per code)
 
 ## Support
 
-- [Documentation](https://docs.tiquo.com/dom-package)
+- [Documentation](https://docs.tiquo.co/dom-package)
 - [GitHub Issues](https://github.com/tiquo/dom-package/issues)
-- [Support Email](mailto:support@tiquo.com)
+- [Support Email](mailto:support@tiquo.co)
 
 ## License
 

package/dist/index.d.mts

@@ -3,6 +3,7 @@
  *
  * Customer authentication SDK for third-party websites using Tiquo.
  * Enables email OTP authentication without passwords.
+ * Now uses JWT tokens for authentication with automatic refresh.
  *
  * @example
  * ```typescript
@@ -24,6 +25,22 @@
  * // Logout
  * await auth.logout();
  * ```
+ *
+ * For native app WebView integration:
+ * ```typescript
+ * // Method 1: Pass token via config
+ * const auth = new TiquoAuth({
+ *   publicKey: 'pk_dom_xxxxx',
+ *   accessToken: 'eyJ...',
+ *   refreshToken: 'rt_...'
+ * });
+ *
+ * // Method 2: Inject via global variable (native app injects JS)
+ * // window.__TIQUO_INIT_TOKEN__ = { accessToken: 'eyJ...', refreshToken: 'rt_...' };
+ *
+ * // Method 3: Pass via URL fragment
+ * // https://yoursite.com/#access_token=eyJ...&refresh_token=rt_...
+ * ```
  */
 interface TiquoAuthConfig {
     /** Public key from your Tiquo Auth DOM settings */
@@ -36,6 +53,18 @@ interface TiquoAuthConfig {
     debug?: boolean;
     /** Enable multi-tab session sync via BroadcastChannel (default: true) */
     enableTabSync?: boolean;
+    /** Pre-authenticated access token (for WebView injection from native apps) */
+    accessToken?: string;
+    /** Pre-authenticated refresh token (for WebView injection from native apps) */
+    refreshToken?: string;
+}
+declare global {
+    interface Window {
+        __TIQUO_INIT_TOKEN__?: {
+            accessToken: string;
+            refreshToken?: string;
+        };
+    }
 }
 interface TiquoUser {
     id: string;
@@ -61,7 +90,9 @@ interface SendOTPResult {
 }
 interface VerifyOTPResult {
     success: boolean;
-    sessionToken: string;
+    accessToken: string;
+    refreshToken: string;
+    expiresIn: number;
     expiresAt: number;
     isNewUser: boolean;
     hasCustomer: boolean;
@@ -181,10 +212,12 @@ declare class TiquoAuthError extends Error {
 }
 declare class TiquoAuth {
     private config;
-    private sessionToken;
+    private accessToken;
+    private refreshToken;
     private session;
     private listeners;
     private refreshTimer;
+    private isRefreshing;
     private broadcastChannel;
     private tabId;
     private isProcessingTabSync;
@@ -251,14 +284,38 @@ declare class TiquoAuth {
         onError?: (error: Error) => void;
     }): Promise<HTMLIFrameElement>;
     /**
-     * Get the current session token (for advanced use cases)
+     * Get the current access token (for advanced use cases)
+     */
+    getAccessToken(): string | null;
+    /**
+     * Get the current refresh token (for advanced use cases)
+     */
+    getRefreshToken(): string | null;
+    /**
+     * Initialize with external tokens (for WebView integration)
+     */
+    initWithTokens(accessToken: string, refreshToken?: string): void;
+    /**
+     * Check for tokens injected by native apps (WebView integration)
      */
-    getSessionToken(): string | null;
+    private checkForInjectedTokens;
     private request;
+    /**
+     * Ensure we have a valid access token, refreshing if necessary
+     */
+    private ensureValidToken;
+    /**
+     * Refresh the access token if it's expired or about to expire
+     */
+    private refreshTokenIfNeeded;
+    /**
+     * Perform the actual token refresh
+     */
+    private performTokenRefresh;
     private refreshSession;
-    private saveSession;
-    private restoreSession;
-    private clearSession;
+    private saveTokens;
+    private restoreTokens;
+    private clearTokens;
     private notifyListeners;
     private scheduleRefresh;
     private log;
@@ -274,28 +331,6 @@ declare class TiquoAuth {
 /**
  * React hook for using TiquoAuth
  * Note: Requires a TiquoAuth instance to be passed in
- *
- * @example
- * ```tsx
- * const auth = new TiquoAuth({ publicKey: 'pk_dom_xxx' });
- *
- * function App() {
- *   const { user, isLoading, isAuthenticated, logout } = useTiquoAuth(auth);
- *
- *   if (isLoading) return <div>Loading...</div>;
- *
- *   if (!isAuthenticated) {
- *     return <LoginForm auth={auth} />;
- *   }
- *
- *   return (
- *     <div>
- *       Welcome, {user?.email}
- *       <button onClick={logout}>Logout</button>
- *     </div>
- *   );
- * }
- * ```
  */
 declare function useTiquoAuth(auth: TiquoAuth): {
     readonly user: TiquoUser | null;

package/dist/index.d.ts

@@ -3,6 +3,7 @@
  *
  * Customer authentication SDK for third-party websites using Tiquo.
  * Enables email OTP authentication without passwords.
+ * Now uses JWT tokens for authentication with automatic refresh.
  *
  * @example
  * ```typescript
@@ -24,6 +25,22 @@
  * // Logout
  * await auth.logout();
  * ```
+ *
+ * For native app WebView integration:
+ * ```typescript
+ * // Method 1: Pass token via config
+ * const auth = new TiquoAuth({
+ *   publicKey: 'pk_dom_xxxxx',
+ *   accessToken: 'eyJ...',
+ *   refreshToken: 'rt_...'
+ * });
+ *
+ * // Method 2: Inject via global variable (native app injects JS)
+ * // window.__TIQUO_INIT_TOKEN__ = { accessToken: 'eyJ...', refreshToken: 'rt_...' };
+ *
+ * // Method 3: Pass via URL fragment
+ * // https://yoursite.com/#access_token=eyJ...&refresh_token=rt_...
+ * ```
  */
 interface TiquoAuthConfig {
     /** Public key from your Tiquo Auth DOM settings */
@@ -36,6 +53,18 @@ interface TiquoAuthConfig {
     debug?: boolean;
     /** Enable multi-tab session sync via BroadcastChannel (default: true) */
     enableTabSync?: boolean;
+    /** Pre-authenticated access token (for WebView injection from native apps) */
+    accessToken?: string;
+    /** Pre-authenticated refresh token (for WebView injection from native apps) */
+    refreshToken?: string;
+}
+declare global {
+    interface Window {
+        __TIQUO_INIT_TOKEN__?: {
+            accessToken: string;
+            refreshToken?: string;
+        };
+    }
 }
 interface TiquoUser {
     id: string;
@@ -61,7 +90,9 @@ interface SendOTPResult {
 }
 interface VerifyOTPResult {
     success: boolean;
-    sessionToken: string;
+    accessToken: string;
+    refreshToken: string;
+    expiresIn: number;
     expiresAt: number;
     isNewUser: boolean;
     hasCustomer: boolean;
@@ -181,10 +212,12 @@ declare class TiquoAuthError extends Error {
 }
 declare class TiquoAuth {
     private config;
-    private sessionToken;
+    private accessToken;
+    private refreshToken;
     private session;
     private listeners;
     private refreshTimer;
+    private isRefreshing;
     private broadcastChannel;
     private tabId;
     private isProcessingTabSync;
@@ -251,14 +284,38 @@ declare class TiquoAuth {
         onError?: (error: Error) => void;
     }): Promise<HTMLIFrameElement>;
     /**
-     * Get the current session token (for advanced use cases)
+     * Get the current access token (for advanced use cases)
+     */
+    getAccessToken(): string | null;
+    /**
+     * Get the current refresh token (for advanced use cases)
+     */
+    getRefreshToken(): string | null;
+    /**
+     * Initialize with external tokens (for WebView integration)
+     */
+    initWithTokens(accessToken: string, refreshToken?: string): void;
+    /**
+     * Check for tokens injected by native apps (WebView integration)
      */
-    getSessionToken(): string | null;
+    private checkForInjectedTokens;
     private request;
+    /**
+     * Ensure we have a valid access token, refreshing if necessary
+     */
+    private ensureValidToken;
+    /**
+     * Refresh the access token if it's expired or about to expire
+     */
+    private refreshTokenIfNeeded;
+    /**
+     * Perform the actual token refresh
+     */
+    private performTokenRefresh;
     private refreshSession;
-    private saveSession;
-    private restoreSession;
-    private clearSession;
+    private saveTokens;
+    private restoreTokens;
+    private clearTokens;
     private notifyListeners;
     private scheduleRefresh;
     private log;
@@ -274,28 +331,6 @@ declare class TiquoAuth {
 /**
  * React hook for using TiquoAuth
  * Note: Requires a TiquoAuth instance to be passed in
- *
- * @example
- * ```tsx
- * const auth = new TiquoAuth({ publicKey: 'pk_dom_xxx' });
- *
- * function App() {
- *   const { user, isLoading, isAuthenticated, logout } = useTiquoAuth(auth);
- *
- *   if (isLoading) return <div>Loading...</div>;
- *
- *   if (!isAuthenticated) {
- *     return <LoginForm auth={auth} />;
- *   }
- *
- *   return (
- *     <div>
- *       Welcome, {user?.email}
- *       <button onClick={logout}>Logout</button>
- *     </div>
- *   );
- * }
- * ```
  */
 declare function useTiquoAuth(auth: TiquoAuth): {
     readonly user: TiquoUser | null;