fireproof icon indicating copy to clipboard operation
fireproof copied to clipboard
verified publisher icon fireproof-storage

Add InPageReactStrategy for component-based authentication

Open jchris opened this issue 4 months ago • 5 comments

Problem

Currently, Fireproof's authentication strategies require either:

  1. SimpleTokenStrategy - Pre-configured tokens (no user auth flow)
  2. RedirectStrategy - Popup windows that can be blocked and redirect to external dashboard
  3. IframeStrategy - Incomplete implementation with broken waitForToken()

This creates friction for React applications that want to:

  • Integrate authentication naturally into their existing UI
  • Use their preferred auth providers (Clerk, Auth0, Firebase, etc.)
  • Avoid popup blockers and external redirects
  • Maintain consistent UX within their application

Proposed Solution

Create an InPageReactStrategy that allows consumers to provide their own React authentication component while maintaining the TokenStrategie interface.

Design Overview

export class InPageReactStrategy implements TokenStrategie {
  constructor(AuthComponent: React.ComponentType<AuthComponentProps>) {
    this.authComponent = AuthComponent;
  }
  
  open() {
    // Render consumer's auth component into DOM
    ReactDOM.render(createElement(this.authComponent, {
      deviceId,
      onToken: (tokenAndClaims) => this.handleToken(tokenAndClaims),
      onClose: () => this.cleanup()
    }), containerElement);
  }
  
  // ... implement other TokenStrategie methods
}

Consumer Usage

// Consumer provides their own auth component
function MyAuthComponent({ deviceId, onToken, onClose }: AuthComponentProps) {
  const { getToken } = useAuth(); // Clerk, Auth0, etc.
  
  const handleAuth = async () => {
    const providerToken = await getToken();
    
    // Exchange via consumer's backend
    const response = await fetch('/api/fireproof-token', {
      headers: { Authorization: `Bearer ${providerToken}` }
    });
    const { token } = await response.json();
    
    onToken({ token, claims: decodeJwt(token) });
  };
  
  return (
    <div className="my-auth-modal">
      <h2>Sign in to continue</h2>
      <button onClick={handleAuth}>Authenticate</button>
    </div>
  );
}

// Use with Fireproof  
const strategy = new InPageReactStrategy(MyAuthComponent);
const { database } = useFireproof("mydb", { strategy });

Benefits

  1. Framework Native - Works naturally with React patterns
  2. Provider Agnostic - Consumer chooses any auth provider
  3. No Popup Blockers - Renders inline components
  4. Consistent UX - Matches application's design system
  5. Clean Separation - Fireproof handles token interface, consumer handles auth provider
  6. Backend Token Exchange - Secure server-side token exchange pattern

Implementation Details

Interface Definition

interface AuthComponentProps {
  deviceId: string;
  onToken: (token: TokenAndClaims) => void;
  onClose: () => void;
  ledger?: string;
  tenant?: string;
}

Strategy Implementation

  • open() - Render React component into DOM container
  • tryToken() - Return cached token if available
  • waitForToken() - Return Promise that resolves when component calls onToken
  • stop() - Cleanup DOM and unmount component

Token Exchange Flow

  1. Consumer's React component handles auth provider integration
  2. Component gets provider token (Clerk, Auth0, etc.)
  3. Component calls consumer's API endpoint with provider token
  4. Backend verifies provider token and exchanges for Fireproof token
  5. Component calls onToken() with Fireproof token
  6. Strategy resolves waitForToken() Promise

Migration Path

This approach moves auth provider integration (like Clerk) from the Fireproof dashboard to the consumer side, providing:

  • Better separation of concerns
  • More flexibility for consumers
  • Reduced complexity in Fireproof core
  • Provider-agnostic authentication strategy

Files to Modify

  • use-fireproof/in-page-react-strategy.ts - New strategy implementation
  • use-fireproof/index.ts - Export new strategy
  • Documentation and examples

Related

This addresses authentication UX issues while maintaining the existing TokenStrategie interface established in core/types/protocols/cloud/gateway-control.ts:19.

jchris avatar Aug 24 '25 18:08 jchris

Update: Consumers Can Implement This Pattern Today! 🎉

After researching the codebase, I discovered that consumers can already implement this pattern without any changes to Fireproof core. The existing architecture is flexible enough to support custom TokenStrategie implementations.

How It Works

The toCloud() function already accepts custom strategies via the strategy parameter:

// From use-fireproof/index.ts:32
export function toCloud(opts: UseFpToCloudParam = {}): ToCloudAttachable {
  const myOpts = {
    strategy: opts.strategy ?? new RedirectStrategy(), // <-- Custom strategy here!
    // ...
  };
}

Complete Consumer Implementation

1. Custom Strategy Class

// InPageReactStrategy.ts (in consumer's app)
import React from 'react';
import ReactDOM from 'react-dom/client';
import { TokenStrategie, TokenAndClaims, ToCloudOpts } from '@fireproof/use-fireproof';
import { Logger, SuperThis } from '@adviser/cement';

interface AuthComponentProps {
  deviceId: string;
  onToken: (token: TokenAndClaims) => void;
  onClose: () => void;
  ledger?: string;
  tenant?: string;
}

export class InPageReactStrategy implements TokenStrategie {
  private authComponent: React.ComponentType<AuthComponentProps>;
  private containerElement?: HTMLElement;
  private root?: ReturnType<typeof ReactDOM.createRoot>;
  private currentToken?: TokenAndClaims;
  private tokenPromise?: Promise<TokenAndClaims | undefined>;
  private resolveToken?: (token: TokenAndClaims | undefined) => void;
  
  constructor(AuthComponent: React.ComponentType<AuthComponentProps>) {
    this.authComponent = AuthComponent;
  }

  open(sthis: SuperThis, logger: Logger, deviceId: string, opts: ToCloudOpts) {
    if (this.containerElement) return; // Already open
    
    // Create container
    this.containerElement = document.createElement('div');
    this.containerElement.id = 'fireproof-auth-container';
    this.containerElement.style.cssText = `
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background: rgba(0,0,0,0.5); z-index: 10000;
      display: flex; align-items: center; justify-content: center;
    `;
    document.body.appendChild(this.containerElement);
    
    // Render React component
    this.root = ReactDOM.createRoot(this.containerElement);
    this.root.render(
      React.createElement(this.authComponent, {
        deviceId,
        ledger: opts.ledger,
        tenant: opts.tenant,
        onToken: (tokenAndClaims) => {
          this.currentToken = tokenAndClaims;
          this.resolveToken?.(tokenAndClaims);
          this.cleanup();
        },
        onClose: () => {
          this.resolveToken?.(undefined);
          this.cleanup();
        }
      })
    );
    
    logger.Debug().Msg(`InPageReactStrategy opened for device ${deviceId}`);
  }

  async tryToken(): Promise<TokenAndClaims | undefined> {
    return this.currentToken;
  }

  async waitForToken(): Promise<TokenAndClaims | undefined> {
    if (this.currentToken) return this.currentToken;
    
    if (!this.tokenPromise) {
      this.tokenPromise = new Promise<TokenAndClaims | undefined>((resolve) => {
        this.resolveToken = resolve;
      });
    }
    
    return this.tokenPromise;
  }

  stop() {
    this.cleanup();
  }
  
  private cleanup() {
    if (this.root) {
      this.root.unmount();
      this.root = undefined;
    }
    if (this.containerElement) {
      document.body.removeChild(this.containerElement);
      this.containerElement = undefined;
    }
    this.tokenPromise = undefined;
    this.resolveToken = undefined;
  }
}

2. Consumer's Auth Component (with Clerk)

// AuthComponent.tsx (in consumer's app)
import React, { useState } from 'react';
import { useAuth } from '@clerk/nextjs';
import { decodeJwt } from 'jose';

interface AuthComponentProps {
  deviceId: string;
  onToken: (token: TokenAndClaims) => void;
  onClose: () => void;
  ledger?: string;
  tenant?: string;
}

export function FireproofAuthComponent({ deviceId, onToken, onClose }: AuthComponentProps) {
  const { getToken, isSignedIn } = useAuth();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string>();

  const handleAuth = async () => {
    try {
      setLoading(true);
      setError(undefined);
      
      // Get Clerk token
      const clerkToken = await getToken();
      if (!clerkToken) throw new Error('No Clerk token available');
      
      // Exchange for Fireproof token via backend
      const response = await fetch('/api/fireproof-token', {
        method: 'POST',
        headers: { 
          'Authorization': `Bearer ${clerkToken}`,
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ deviceId })
      });
      
      if (!response.ok) throw new Error('Token exchange failed');
      
      const { token } = await response.json();
      const claims = decodeJwt(token);
      
      // Return token to Fireproof
      onToken({ token, claims });
      
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{
      background: 'white',
      padding: '2rem',
      borderRadius: '8px',
      maxWidth: '400px',
      width: '90%'
    }}>
      <h2>Connect to Fireproof Cloud</h2>
      <p>Device: {deviceId}</p>
      
      {error && (
        <div style={{ color: 'red', marginBottom: '1rem' }}>
          Error: {error}
        </div>
      )}
      
      {!isSignedIn ? (
        <div>
          <p>Please sign in to continue</p>
          <button onClick={onClose}>Cancel</button>
        </div>
      ) : (
        <div>
          <button 
            onClick={handleAuth} 
            disabled={loading}
            style={{ marginRight: '1rem' }}
          >
            {loading ? 'Connecting...' : 'Connect to Fireproof'}
          </button>
          <button onClick={onClose}>Cancel</button>
        </div>
      )}
    </div>
  );
}

3. Backend Token Exchange

// pages/api/fireproof-token.ts (Next.js API route)
import { clerkClient } from '@clerk/nextjs/server';
import { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  try {
    // Verify Clerk token
    const clerkToken = req.headers.authorization?.replace('Bearer ', '');
    if (!clerkToken) throw new Error('No authorization token');
    
    const clerkUser = await clerkClient.verifyToken(clerkToken);
    if (!clerkUser) throw new Error('Invalid token');

    // Create Fireproof token (implement your token generation logic)
    const fireproofToken = await createFireproofToken({
      userId: clerkUser.sub,
      deviceId: req.body.deviceId,
      // Add tenant, ledger, etc. based on your needs
    });
    
    res.json({ token: fireproofToken });
    
  } catch (error) {
    console.error('Token exchange error:', error);
    res.status(401).json({ error: 'Token exchange failed' });
  }
}

async function createFireproofToken(payload: any): Promise<string> {
  // Implement your JWT signing logic here
  // This would typically involve calling your Fireproof Cloud API
  // or signing a JWT with appropriate claims
}

4. Usage in React App

// App.tsx
import { useFireproof, toCloud } from '@fireproof/use-fireproof';
import { InPageReactStrategy } from './InPageReactStrategy';
import { FireproofAuthComponent } from './AuthComponent';

function App() {
  const authStrategy = new InPageReactStrategy(FireproofAuthComponent);
  
  const { database, useLiveQuery, attach } = useFireproof('my-app', {
    attach: toCloud({
      strategy: authStrategy,
      // other options...
    })
  });

  // Use attach.ctx.tokenAndClaims to check auth state
  const isAuthenticated = attach.ctx.tokenAndClaims.state === 'ready';
  
  return (
    <div>
      {isAuthenticated ? (
        <div>
          <h1>Connected to Fireproof!</h1>
          {/* Your app content */}
        </div>
      ) : (
        <div>
          <h1>Welcome</h1>
          <p>Authentication will be handled automatically when needed</p>
        </div>
      )}
    </div>
  );
}

Key Benefits of This Approach

✅ Zero Changes to Fireproof Core - Uses existing architecture
✅ Full Customization - Complete control over auth UI/UX
✅ Provider Agnostic - Works with any auth provider
✅ Type Safety - Full TypeScript support
✅ Clean Separation - Auth provider logic stays in consumer app

Considerations

  • Bundle Size: Consumer app needs to include React/ReactDOM if not already present
  • Token Security: Ensure proper token validation and exchange on backend
  • Error Handling: Implement robust error handling for auth failures
  • Cleanup: Strategy properly cleans up DOM elements and promises

This pattern demonstrates that Fireproof's current architecture is already flexible and extensible! 🚀

jchris avatar Aug 24 '25 18:08 jchris

Even Simpler Approach: Subclass RedirectStrategy + Clerk! 🚀

The engineering team shared a brilliant insight that makes this much simpler! Instead of creating a completely new strategy, we can subclass the existing RedirectStrategy and override just the open() method to use Clerk in the consumer app.

Key Innovation: Supply Fireproof Public Keys to Clerk

By providing Fireproof public keys to Clerk in the consumer app, we can:

  • ✅ Eliminate the backend completely - no token exchange API needed
  • ✅ Direct token generation - Clerk can create Fireproof-compatible JWTs
  • ✅ Keep existing polling logic - reuse RedirectStrategy's robust waitForToken()
  • ✅ Better UX - no popup windows, integrated in-app auth

Implementation: ClerkRedirectStrategy

1. Subclass RedirectStrategy

// ClerkRedirectStrategy.ts (in consumer's app)
import React from 'react';
import ReactDOM from 'react-dom/client';
import { RedirectStrategy } from '@fireproof/use-fireproof';
import { SuperThis, Logger } from '@adviser/cement';
import { ToCloudOpts } from '@fireproof/core-types-protocols-cloud';

export class ClerkRedirectStrategy extends RedirectStrategy {
  private clerkComponent: React.ComponentType<ClerkAuthProps>;
  private root?: ReturnType<typeof ReactDOM.createRoot>;
  
  constructor(
    ClerkAuthComponent: React.ComponentType<ClerkAuthProps>, 
    opts?: Partial<RedirectStrategyOpts>
  ) {
    super(opts);
    this.clerkComponent = ClerkAuthComponent;
  }

  // Override open() to show Clerk UI instead of dashboard popup
  open(sthis: SuperThis, logger: Logger, deviceId: string, opts: ToCloudOpts) {
    const redirectCtx = opts.context.get(WebCtx) as WebToCloudCtx;
    logger.Debug().Msg("open clerk auth");
    
    // Generate resultId like parent class
    this.resultId = sthis.nextId().str;

    // Create overlay like parent, but with Clerk component
    let overlayNode = document.body.querySelector("#fpOverlay") as HTMLDivElement;
    if (!overlayNode) {
      const styleNode = document.createElement("style");
      styleNode.innerHTML = DOMPurify.sanitize(this.overlayCss);
      document.head.appendChild(styleNode);
      overlayNode = document.createElement("div") as HTMLDivElement;
      overlayNode.id = "fpOverlay";
      overlayNode.className = "fpOverlay";
      document.body.appendChild(overlayNode);
    }

    // Render Clerk component instead of HTML link
    overlayNode.style.display = "block";
    this.overlayNode = overlayNode;
    
    this.root = ReactDOM.createRoot(overlayNode);
    this.root.render(
      React.createElement(this.clerkComponent, {
        deviceId,
        resultId: this.resultId,
        ledger: opts.ledger,
        tenant: opts.tenant,
        onClose: () => this.stop()
      })
    );
  }

  stop() {
    if (this.root) {
      this.root.unmount();
      this.root = undefined;
    }
    super.stop(); // Call parent cleanup
  }
}

2. Clerk Auth Component

// ClerkAuthComponent.tsx
import React, { useState } from 'react';
import { useAuth, useUser, SignIn } from '@clerk/nextjs';
import { generateFireproofToken } from './fireproof-clerk-utils';

interface ClerkAuthProps {
  deviceId: string;
  resultId: string;
  ledger?: string;
  tenant?: string;
  onClose: () => void;
}

export function ClerkAuthComponent({ deviceId, resultId, ledger, tenant, onClose }: ClerkAuthProps) {
  const { isSignedIn, getToken } = useAuth();
  const { user } = useUser();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string>();

  const handleConnect = async () => {
    try {
      setLoading(true);
      
      // Get Clerk JWT
      const clerkJwt = await getToken();
      if (!clerkJwt) throw new Error('Failed to get Clerk token');

      // Generate Fireproof token using public keys
      const fireproofToken = await generateFireproofToken({
        clerkJwt,
        deviceId,
        userId: user?.id,
        ledger,
        tenant,
        resultId
      });

      // Store token via dashboard API (same as original RedirectStrategy)
      await fetch('/api/dashboard/store-token', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          resultId, 
          token: fireproofToken 
        })
      });

      // Close overlay - parent's waitForToken() will pick up the token
      onClose();
      
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  if (!isSignedIn) {
    return (
      <div className="fpOverlayContent">
        <div className="fpCloseButton" onClick={onClose}>&times;</div>
        <h2>Sign in to Fireproof</h2>
        <SignIn />
      </div>
    );
  }

  return (
    <div className="fpOverlayContent">
      <div className="fpCloseButton" onClick={onClose}>&times;</div>
      <h2>Connect to Fireproof Cloud</h2>
      <p>Hello, {user?.firstName || user?.emailAddresses[0]?.emailAddress}!</p>
      <p>Device: {deviceId}</p>
      
      {error && <div style={{ color: 'red' }}>Error: {error}</div>}
      
      <button onClick={handleConnect} disabled={loading}>
        {loading ? 'Connecting...' : 'Connect to Fireproof'}
      </button>
    </div>
  );
}

3. Fireproof Token Generation Utility

// fireproof-clerk-utils.ts
import { SignJWT } from 'jose';

interface GenerateTokenParams {
  clerkJwt: string;
  deviceId: string;
  userId?: string;
  ledger?: string;
  tenant?: string;
  resultId: string;
}

export async function generateFireproofToken(params: GenerateTokenParams): Promise<string> {
  // Decode Clerk JWT to get user info
  const clerkPayload = JSON.parse(atob(params.clerkJwt.split('.')[1]));
  
  // Create Fireproof-compatible JWT using public keys
  const fireproofPayload = {
    sub: params.userId || clerkPayload.sub,
    iss: 'your-app',
    aud: 'fireproof',
    exp: Math.floor(Date.now() / 1000) + (60 * 60 * 24), // 24 hours
    iat: Math.floor(Date.now() / 1000),
    deviceId: params.deviceId,
    ledger: params.ledger,
    tenant: params.tenant,
    // Add other Fireproof-required claims
  };

  // Sign with Fireproof public key (provided by Fireproof team)
  const secret = new TextEncoder().encode(process.env.FIREPROOF_SIGNING_KEY);
  
  const jwt = await new SignJWT(fireproofPayload)
    .setProtectedHeader({ alg: 'HS256' })
    .sign(secret);

  return jwt;
}

4. Usage

// App.tsx
import { ClerkProvider } from '@clerk/nextjs';
import { useFireproof, toCloud } from '@fireproof/use-fireproof';
import { ClerkRedirectStrategy } from './ClerkRedirectStrategy';
import { ClerkAuthComponent } from './ClerkAuthComponent';

function App() {
  const clerkStrategy = new ClerkRedirectStrategy(ClerkAuthComponent);
  
  const { database, useLiveQuery, attach } = useFireproof('my-app', {
    attach: toCloud({
      strategy: clerkStrategy
    })
  });

  return (
    <ClerkProvider publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}>
      <div>
        <h1>My Fireproof + Clerk App</h1>
        {/* Your app content */}
      </div>
    </ClerkProvider>
  );
}

Benefits of This Approach

🎯 Leverages Existing Code - Reuses RedirectStrategy's proven polling logic
🔐 Eliminates Backend - Direct JWT signing with Fireproof public keys
🚀 Better UX - No popup windows, integrated Clerk UI
⚡ Simpler Setup - Just override one method
🛡️ Type Safety - Full TypeScript support
🔄 Robust Polling - Inherits waitForToken() retry logic

Key Requirements

  1. Fireproof Public Keys - Fireproof team provides signing keys for consumer apps
  2. Dashboard API Compatibility - Store token endpoint for resultId polling
  3. Clerk Configuration - Configure Clerk with Fireproof audience/claims

This approach gives us the best of both worlds: the simplicity of subclassing existing code + the power of direct Clerk integration! 🎉

jchris avatar Aug 24 '25 18:08 jchris

Even Simpler: Custom WebToCloudCtx! 🎯

Actually, there's an even more elegant approach! The toCloud() function already accepts a complete WebToCloudCtx context that handles all token operations. We can provide our own context implementation with Clerk integration.

The WebToCloudCtx Interface

Looking at the existing interface in use-fireproof/react/types.ts:123:

export interface WebToCloudCtx {
  readonly dashboardURI: string;
  readonly tokenApiURI: string;
  readonly tokenParam: string;
  keyBag?: KeyBagProvider;
  readonly sthis: SuperThis;

  ready(db: Database): Promise<void>;
  onTokenChange(on: (token?: TokenAndClaims) => void): void;
  resetToken(): Promise<void>;
  setToken(token: TokenAndClaims | string): Promise<void>;
  token(): Promise<TokenAndClaims | undefined>;
}

Implementation: ClerkWebContext

// ClerkWebContext.ts (in consumer's app)
import React from 'react';
import ReactDOM from 'react-dom/client';
import { useAuth, useUser } from '@clerk/nextjs';
import { WebToCloudCtx, TokenAndClaims } from '@fireproof/use-fireproof';
import { SuperThis, Database, KeyBagProvider } from '@fireproof/core-types-base';
import { decodeJwt } from 'jose';
import { generateFireproofToken } from './fireproof-clerk-utils';

export class ClerkWebContext implements WebToCloudCtx {
  readonly dashboardURI: string = ""; // Not used
  readonly tokenApiURI: string = "";  // Not used
  readonly tokenParam: string = "fpToken";
  readonly sthis: SuperThis;
  keyBag?: KeyBagProvider;
  
  private tokenCache?: TokenAndClaims;
  private tokenChangeListeners = new Set<(token?: TokenAndClaims) => void>();
  private authComponent: React.ComponentType<ClerkAuthModalProps>;
  private authPromise?: Promise<TokenAndClaims | undefined>;
  private authResolve?: (token: TokenAndClaims | undefined) => void;
  
  constructor(
    sthis: SuperThis,
    AuthModalComponent: React.ComponentType<ClerkAuthModalProps>
  ) {
    this.sthis = sthis;
    this.authComponent = AuthModalComponent;
  }

  async ready(db: Database): Promise<void> {
    this.keyBag = await db.ledger.opts.keyBag.getBagProvider();
    
    // Try to load cached token
    const cached = await this.loadCachedToken(db);
    if (cached) {
      this.tokenCache = cached;
      this.notifyTokenChange(cached);
    }
  }

  onTokenChange(listener: (token?: TokenAndClaims) => void): void {
    this.tokenChangeListeners.add(listener);
    // Immediately call with current token if available
    if (this.tokenCache) {
      listener(this.tokenCache);
    }
  }

  async resetToken(): Promise<void> {
    this.tokenCache = undefined;
    await this.keyBag?.del('clerk-fireproof-token');
    this.notifyTokenChange();
  }

  async setToken(token: TokenAndClaims | string): Promise<void> {
    const tokenObj = typeof token === 'string' 
      ? { token, claims: decodeJwt(token) as any }
      : token;
      
    this.tokenCache = tokenObj;
    await this.keyBag?.set({
      name: 'clerk-fireproof-token',
      keys: {
        [this.tokenParam]: {
          key: tokenObj.token,
          fingerPrint: await this.hashString(tokenObj.token),
          default: false
        }
      }
    });
    this.notifyTokenChange(tokenObj);
  }

  async token(): Promise<TokenAndClaims | undefined> {
    // Return cached token if valid
    if (this.tokenCache && this.isTokenValid(this.tokenCache)) {
      return this.tokenCache;
    }

    // Clear invalid token
    if (this.tokenCache) {
      await this.resetToken();
    }

    // Show auth modal and wait for user
    return this.showAuthModalAndWait();
  }

  private async showAuthModalAndWait(): Promise<TokenAndClaims | undefined> {
    if (this.authPromise) return this.authPromise;

    this.authPromise = new Promise<TokenAndClaims | undefined>((resolve) => {
      this.authResolve = resolve;
      
      // Create modal container
      const container = document.createElement('div');
      container.id = 'clerk-auth-modal';
      document.body.appendChild(container);
      
      const root = ReactDOM.createRoot(container);
      root.render(
        React.createElement(this.authComponent, {
          onToken: async (tokenAndClaims) => {
            await this.setToken(tokenAndClaims);
            this.cleanup(root, container);
            resolve(tokenAndClaims);
          },
          onCancel: () => {
            this.cleanup(root, container);
            resolve(undefined);
          }
        })
      );
    });

    return this.authPromise;
  }

  private cleanup(root: any, container: HTMLElement) {
    root.unmount();
    document.body.removeChild(container);
    this.authPromise = undefined;
    this.authResolve = undefined;
  }

  private async loadCachedToken(db: Database): Promise<TokenAndClaims | undefined> {
    try {
      const cached = await this.keyBag?.get('clerk-fireproof-token');
      if (!cached) return undefined;
      
      const tokenKey = (cached as any).keys?.[this.tokenParam]?.key;
      if (!tokenKey) return undefined;

      const claims = decodeJwt(tokenKey);
      return { token: tokenKey, claims: claims as any };
    } catch {
      return undefined;
    }
  }

  private isTokenValid(tokenAndClaims: TokenAndClaims): boolean {
    const now = Math.floor(Date.now() / 1000);
    return (tokenAndClaims.claims.exp || 0) > now + 300; // 5 min buffer
  }

  private notifyTokenChange(token?: TokenAndClaims) {
    for (const listener of this.tokenChangeListeners) {
      listener(token);
    }
  }

  private async hashString(str: string): Promise<string> {
    const encoder = new TextEncoder();
    const data = encoder.encode(str);
    const hash = await crypto.subtle.digest('SHA-256', data);
    return Array.from(new Uint8Array(hash))
      .map(b => b.toString(16).padStart(2, '0'))
      .join('');
  }
}

Clerk Auth Modal Component

// ClerkAuthModal.tsx
import React, { useState } from 'react';
import { useAuth, useUser, SignIn } from '@clerk/nextjs';
import { generateFireproofToken } from './fireproof-clerk-utils';
import { TokenAndClaims } from '@fireproof/use-fireproof';

interface ClerkAuthModalProps {
  onToken: (token: TokenAndClaims) => void;
  onCancel: () => void;
}

export function ClerkAuthModal({ onToken, onCancel }: ClerkAuthModalProps) {
  const { isSignedIn, getToken } = useAuth();
  const { user } = useUser();
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string>();

  const handleConnect = async () => {
    try {
      setLoading(true);
      
      const clerkJwt = await getToken();
      if (!clerkJwt) throw new Error('Failed to get Clerk token');

      // Generate Fireproof JWT directly (no backend needed!)
      const fireproofToken = await generateFireproofToken({
        clerkJwt,
        userId: user?.id,
        email: user?.primaryEmailAddress?.emailAddress
      });

      const claims = decodeJwt(fireproofToken);
      onToken({ token: fireproofToken, claims: claims as any });
      
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Authentication failed');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div style={{
      position: 'fixed', top: 0, left: 0, width: '100%', height: '100%',
      backgroundColor: 'rgba(0,0,0,0.5)', display: 'flex', 
      alignItems: 'center', justifyContent: 'center', zIndex: 10000
    }}>
      <div style={{
        backgroundColor: 'white', padding: '2rem', borderRadius: '8px',
        maxWidth: '400px', width: '90%'
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h2>Connect to Fireproof</h2>
          <button onClick={onCancel} style={{ background: 'none', border: 'none', fontSize: '1.5rem' }}>
            ×
          </button>
        </div>
        
        {!isSignedIn ? (
          <div>
            <p>Please sign in to continue:</p>
            <SignIn />
          </div>
        ) : (
          <div>
            <p>Welcome, {user?.firstName || user?.emailAddresses[0]?.emailAddress}!</p>
            {error && <div style={{ color: 'red', margin: '1rem 0' }}>Error: {error}</div>}
            <div style={{ display: 'flex', gap: '1rem', marginTop: '1rem' }}>
              <button onClick={handleConnect} disabled={loading}>
                {loading ? 'Connecting...' : 'Connect'}
              </button>
              <button onClick={onCancel}>Cancel</button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

Usage - Just Pass the Context!

// App.tsx
import { ClerkProvider } from '@clerk/nextjs';
import { useFireproof, toCloud } from '@fireproof/use-fireproof';
import { ClerkWebContext } from './ClerkWebContext';
import { ClerkAuthModal } from './ClerkAuthModal';
import { ensureSuperThis } from '@fireproof/core-runtime';

function App() {
  const clerkContext = new ClerkWebContext(
    ensureSuperThis(),
    ClerkAuthModal
  );
  
  const { database, useLiveQuery, attach } = useFireproof('my-app', {
    attach: toCloud({
      // Pass our custom context - that's it! 🎉
      dashboardURI: 'not-used',
      tokenApiURI: 'not-used', 
      context: new AppContext().set(WebCtx, clerkContext)
    })
  });

  return (
    <ClerkProvider publishableKey={process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY}>
      <div>
        <h1>My Fireproof + Clerk App</h1>
        {/* Your app content - token() will automatically show auth when needed */}
      </div>
    </ClerkProvider>
  );
}

Benefits of This Approach

🎯 Uses Existing Interface - Implements the well-defined WebToCloudCtx
🚀 No Subclassing - Works with any existing strategy
🔐 Complete Control - Handle frontend auth + backend token generation
⚡ Automatic Auth - Shows auth modal only when token needed/expired
💾 Token Caching - Persists tokens using KeyBag system
🛡️ Type Safety - Full TypeScript interface compliance

Key Insight

The WebToCloudCtx is the complete abstraction for all token operations! By implementing this interface with Clerk integration, we get:

  • Automatic token refresh when expired
  • Seamless integration with any TokenStrategie
  • Full control over both frontend UX and backend token generation
  • No changes needed to Fireproof core

This is the most elegant solution - use the existing architecture exactly as designed! 🏗️

jchris avatar Aug 24 '25 18:08 jchris

Important: Fireproof User ID vs Clerk User ID 🆔

Great question about user IDs! You're absolutely right - there are two distinct user IDs to be aware of:

1. Clerk User ID

  • From the authentication provider (Clerk)
  • Accessed via useUser() hook: user.id
  • Used for Clerk-specific operations

2. Fireproof User ID

  • Comes back in the Fireproof JWT claims ✅
  • Accessed via tokenAndClaims.claims.userId
  • Used for Fireproof permissions, tenant/ledger access, etc.

FPCloudClaim Structure

The Fireproof JWT contains rich claims about the user:

// From core/types/protocols/cloud/msg-types.ts
export interface FPCloudClaim extends JWTPayload {
  readonly userId: string;        // 🎯 Fireproof internal user ID
  readonly email: string;
  readonly nickname?: string;
  readonly provider?: "github" | "google";
  readonly created: Date;
  readonly tenants: TenantClaim[];  // User's tenant memberships
  readonly ledgers: LedgerClaim[];  // User's ledger permissions  
  readonly selected: TenantLedger;  // Currently selected tenant/ledger
}

How Developers Access Both IDs

import { useFireproof } from 'use-vibes';
import { useUser } from '@clerk/nextjs';

function MyApp() {
  const { user } = useUser(); // Clerk user
  const { database, attach } = useFireproof('my-app');

  // Get both user IDs
  const clerkUserId = user?.id;
  const fireproofUserId = attach.ctx.tokenAndClaims.state === 'ready' 
    ? attach.ctx.tokenAndClaims.tokenAndClaims.claims.userId
    : null;

  // Access other Fireproof user info
  const fireproofClaims = attach.ctx.tokenAndClaims.state === 'ready'
    ? attach.ctx.tokenAndClaims.tokenAndClaims.claims
    : null;

  console.log('Clerk User ID:', clerkUserId);
  console.log('Fireproof User ID:', fireproofUserId);
  console.log('User Tenants:', fireproofClaims?.tenants);
  console.log('User Ledgers:', fireproofClaims?.ledgers);
  
  return (
    <div>
      <h1>Welcome {user?.firstName}!</h1>
      <p>Clerk ID: {clerkUserId}</p>
      <p>Fireproof ID: {fireproofUserId}</p>
    </div>
  );
}

The Token Flow

  1. User authenticates with Clerk → Gets Clerk JWT
  2. Clerk JWT exchanged for Fireproof JWT → Dashboard looks up/creates Fireproof user
  3. Fireproof JWT returned → Contains claims.userId (Fireproof's internal ID)
  4. App gets both IDs:
    • useUser().id → Clerk user ID
    • tokenAndClaims.claims.userId → Fireproof user ID

Why Both Matter

  • Clerk User ID: For Clerk-specific operations, profile management
  • Fireproof User ID: For Fireproof data operations, permissions, sharing

Updated ClerkAuthComponent

The auth component should handle this correctly:

export function VibesClerkAuth({ deviceId, resultId, onClose }: ClerkAuthProps) {
  const { isSignedIn, getToken } = useAuth();
  const { user } = useUser();

  const handleConnect = async () => {
    const clerkJwt = await getToken();
    
    // Generate Fireproof JWT - dashboard will create Fireproof user record
    const fireproofToken = await generateFireproofToken({
      clerkJwt,
      clerkUserId: user?.id,  // Pass Clerk ID for linking
      email: user?.primaryEmailAddress?.emailAddress,
      deviceId,
      resultId
    });
    
    // Store for polling - when retrieved, will contain Fireproof userId
    await fetch('/api/vibes/store-token', {
      method: 'POST',
      body: JSON.stringify({ resultId, token: fireproofToken })
    });
    
    onClose();
  };
  
  return (
    <div className="vibes-auth-modal">
      <h2>🎵 Connect {user?.firstName} to Vibes</h2>
      <p>This will link your Clerk account to Fireproof</p>
      {/* ... rest of component */}
    </div>
  );
}

Key Takeaway

Developers get both user identities automatically:

  • Clerk handles authentication UI/flow
  • Fireproof handles data permissions and multi-tenancy
  • The JWT claims bridge contains all the user's Fireproof permissions and tenant/ledger access

This separation keeps concerns clean while providing rich user context! 🎯

jchris avatar Aug 24 '25 22:08 jchris

Refinement: Real-World Implementation Insights from vibes.diy 🛠️

After reviewing the actual implementation in vibes.diy PR #298, I can provide some real-world refinements to the InPageReactStrategy approach:

🔄 Key Refinements Based on Live Implementation

1. Direct Dashboard Integration (No Backend Needed!)

The vibes.diy team discovered you can call the Fireproof dashboard API directly, eliminating the custom backend:

// Refined token exchange - direct to Fireproof dashboard
export async function generateFireproofToken(clerkJwt: string): Promise<string> {
  const response = await fetch('https://connect.fireproof.direct/api', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      type: 'reqCloudSessionToken',  // ✅ Correct endpoint (not reqClerkTokenExchange)
      auth: {
        token: clerkJwt,
        type: 'clerk'  // Specify Clerk as auth provider
      }
    }),
  });

  if (!response.ok) {
    const errorDetails = await response.json().catch(() => response.text());
    throw new Error(`Dashboard API error: ${response.status} - ${JSON.stringify(errorDetails)}`);
  }

  const { token } = await response.json();
  return token;  // This contains the proper Fireproof user ID!
}

2. Simplified Auth Component Pattern

Based on the actual vibes.diy implementation, here's a more practical auth component:

// Refined auth component with automatic token exchange
export function VibesClerkAuth({ deviceId, onToken, onClose }: AuthComponentProps) {
  const { isSignedIn, getToken } = useAuth();
  const { user } = useUser();
  const [loading, setLoading] = useState(false);

  // Auto-exchange when user is signed in
  useEffect(() => {
    if (isSignedIn && user && !loading) {
      handleTokenExchange();
    }
  }, [isSignedIn, user]);

  const handleTokenExchange = async () => {
    try {
      setLoading(true);
      
      // Get real Clerk JWT (not fake client-side generation!)
      const clerkJwt = await getToken();
      if (!clerkJwt) throw new Error('Failed to get Clerk JWT');

      // Direct exchange with Fireproof dashboard
      const fireproofToken = await generateFireproofToken(clerkJwt);
      const claims = decodeJwt(fireproofToken) as FPCloudClaim;
      
      // Return real Fireproof token with proper user ID format
      onToken({ token: fireproofToken, claims });
      
    } catch (error) {
      console.error('Token exchange failed:', error);
    } finally {
      setLoading(false);
    }
  };

  if (!isSignedIn) {
    return (
      <div className="fireproof-auth-modal">
        <SignIn appearance={customAppearance} />
        <button onClick={onClose}>Cancel</button>
      </div>
    );
  }

  return (
    <div className="fireproof-auth-modal">
      <h2>🎵 Connecting to Fireproof...</h2>
      <p>Welcome, {user?.firstName}!</p>
      {loading ? (
        <div>Exchanging credentials...</div>
      ) : (
        <button onClick={handleTokenExchange}>Connect</button>
      )}
    </div>
  );
}

3. Enhanced Strategy with Better Error Handling

export class InPageReactStrategy implements TokenStrategie {
  private authComponent: React.ComponentType<AuthComponentProps>;
  private currentToken?: TokenAndClaims;
  private tokenPromise?: Promise<TokenAndClaims | undefined>;
  private cleanup: (() => void) | undefined;

  async waitForToken(sthis: SuperThis, logger: Logger, deviceId: string, opts: ToCloudOpts): Promise<TokenAndClaims | undefined> {
    // Check if we already have a valid token
    if (this.currentToken && this.isTokenValid(this.currentToken)) {
      return this.currentToken;
    }

    // Only create auth UI if we don't have a valid token
    if (!this.tokenPromise) {
      this.tokenPromise = this.createAuthPromise(sthis, logger, deviceId, opts);
    }
    
    return this.tokenPromise;
  }

  private isTokenValid(tokenAndClaims: TokenAndClaims): boolean {
    const now = Math.floor(Date.now() / 1000);
    return (tokenAndClaims.claims.exp || 0) > now + 300; // 5 min buffer
  }

  private createAuthPromise(sthis: SuperThis, logger: Logger, deviceId: string, opts: ToCloudOpts): Promise<TokenAndClaims | undefined> {
    return new Promise((resolve) => {
      this.renderAuthComponent(deviceId, opts, resolve);
    });
  }
}

🚀 Major Benefits of This Refined Approach

✅ No Custom Backend Required

  • Direct integration with Fireproof dashboard API
  • Eliminates token exchange server setup
  • Reduces infrastructure complexity

✅ Real Fireproof User IDs

  • Dashboard creates proper Fireproof user records
  • Returns tokens with correct user ID format (z2KBppKuUFKYxQvuj9)
  • Full tenant/ledger permissions included

✅ Automatic Token Management

  • Smart token validation and refresh
  • Automatic auth UI when token expires
  • Seamless background token exchange

✅ Production-Ready Error Handling

  • Detailed API error reporting
  • Graceful fallbacks for auth failures
  • User-friendly error messages

🎯 Implementation Status

The vibes.diy team has this 95% working - they just need to:

  1. Fix the API endpoint (reqCloudSessionToken not reqClerkTokenExchange)
  2. Correct the auth object structure
  3. Add proper error response parsing

Once those API details are corrected, this becomes a zero-configuration solution for Clerk + Fireproof integration!

🏗️ Architecture Advantages

// Consumer usage becomes incredibly simple:
const authStrategy = new InPageReactStrategy(VibesClerkAuth);
const { database } = useFireproof('my-app', {
  attach: toCloud({ strategy: authStrategy })
});
// That's it! Clerk auth + Fireproof data with proper user IDs ✨

This refined approach proves that Fireproof's existing architecture is not just flexible, but production-ready for complex auth integrations. The vibes.diy implementation demonstrates this pattern working in a real application! 🎉

Next: Once the API details are fixed, this should be extracted into a reusable library for the broader ecosystem.

jchris avatar Aug 25 '25 00:08 jchris