Troubleshooting

    # Test your API key
    curl -X POST https://api.doshi.app/client/auth/token \
      -H "Authorization: Bearer YOUR_API_KEY" \
      -H "Content-Type: application/json" \
      -d '{"email": "[email protected]"}'

    // Verify API key is loaded
    console.log('API Key exists:', !!process.env.DOSHI_API_KEY);
    console.log('API Key length:', process.env.DOSHI_API_KEY?.length);
    // Don't log the actual key!

    // Ensure you're sending email OR partnerUserId
    const requestBody = {
      email: user.email || undefined,
      partnerUserId: user.id || undefined
    };
    
    if (!requestBody.email && !requestBody.partnerUserId) {
      throw new Error('Must provide email or partnerUserId');
    }

    const response = await fetch(doshiApiUrl, options);
    
    if (!response.ok) {
      const errorText = await response.text();
      console.error('API Error:', response.status, errorText);
      throw new Error(`API returned ${response.status}: ${errorText}`);
    }

    // ✅ Generate token right before passing to iframe
    const token = await fetchToken();
    passToIframe(token);

    // ❌ Don't store tokens for long periods
    const token = await fetchToken();
    localStorage.setItem('token', token); // Don't do this

    // Each iframe load should get a fresh token
    useEffect(() => {
      const fetchAndSetToken = async () => {
        const newToken = await fetchToken();
        setToken(newToken);
      };
      
      fetchAndSetToken();
    }, []); // Fresh token on mount

    const isValidToken = (token: string) => {
      return token && 
             typeof token === 'string' && 
             token.length > 0 &&
             !token.includes(' '); // No spaces
    };

    if (!isValidToken(token)) {
      console.error('Invalid token format');
    }

    // ❌ NEVER do this in frontend
    const response = await fetch(doshiApiUrl, {
      headers: {
        'Authorization': `Bearer ${API_KEY}` // EXPOSED!
      }
    });

    // ✅ Call your backend instead
    const response = await fetch('/api/generate-doshi-token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ userId: user.id })
    });

    // backend/routes/auth.ts
    app.post('/api/generate-doshi-token', async (req, res) => {
      // Verify user is authenticated
      if (!req.session?.userId) {
        return res.status(401).json({ error: 'Unauthorized' });
      }

      // Call Doshi API with server-side API key
      const response = await fetch(doshiApiUrl, {
        headers: {
          'Authorization': `Bearer ${process.env.DOSHI_API_KEY}`
        }
      });

      const data = await response.json();
      res.json({ token: data.token });
    });

    window.addEventListener("message", (event) => {
      console.log('Message received from:', event.origin);
      console.log('Expected origin:', 'https://embed.doshi.app');
      
      // Temporarily disable check for debugging
      // if (event.origin !== 'https://embed.doshi.app') return;
      
      console.log('Message data:', event.data);
    });

    const iframe = document.querySelector('iframe');
    
    iframe.addEventListener('load', () => {
      console.log('✅ Iframe loaded');
      // Now it's safe to send messages
    });

    // Make sure you're sending proper JSON
    const message = JSON.stringify({
      token: authToken,
      email: userEmail,
      type: "AUTH"
    });
    
    console.log('Sending message:', message);
    iframe.contentWindow.postMessage(message, 'https://embed.doshi.app');

    window.addEventListener('error', (event) => {
      console.error('JavaScript error:', event.error);
    });

    window.addEventListener("message", (event) => {
      console.log('Expected:', 'https://embed.doshi.app');
      console.log('Received:', event.origin);
      console.log('Match:', event.origin === 'https://embed.doshi.app');
    });

    // Normalize origin comparison
    const normalizeOrigin = (origin) => origin.replace(/\/$/, '');
    
    if (normalizeOrigin(event.origin) !== normalizeOrigin(expectedOrigin)) {
      return;
    }

    const allowedOrigins = [
      'https://embed.doshi.app',
      'https://staging-embed.doshi.app',
      'http://localhost:3000' // Development only
    ];
    
    if (!allowedOrigins.includes(event.origin)) {
      console.warn('Rejected message from:', event.origin);
      return;
    }

    const iframe = document.querySelector('iframe');
    console.log('Iframe src:', iframe?.src);
    // Should be: https://embed.doshi.app

    const iframe = document.querySelector('iframe');
    
    iframe.addEventListener('load', () => {
      console.log('Iframe loaded, waiting for PING...');
    });

    // Set a timeout to detect if PING never arrives
    setTimeout(() => {
      console.warn('No PING received after 5 seconds');
    }, 5000);

    iframe.addEventListener('error', (e) => {
      console.error('Iframe failed to load:', e);
    });

    const params = new URLSearchParams({
      token: authToken,
      email: userEmail
    });
    
    const fullUrl = `https://embed.doshi.app?${params.toString()}`;
    
    console.log('Constructed URL:', fullUrl);
    console.log('URL length:', fullUrl.length);
    
    // Verify iframe gets the URL
    const iframe = document.querySelector('iframe');
    console.log('Iframe src:', iframe?.src);

    const params = new URLSearchParams();
    
    // Only add defined values
    if (authToken) params.append('token', authToken);
    if (userEmail) params.append('email', userEmail);
    
    console.log('Params:', Object.fromEntries(params));

    const url = buildWebviewUrl(baseUrl, params);
    
    if (url.length > 2000) {
      console.error('URL too long:', url.length, 'characters');
      // Switch to postMessage method
    }

    // Only include essential parameters
    const minimalParams = {
      token: authToken,
      email: userEmail
      // Fetch other data from API after auth
    };

    // If URL is too long, use postMessage instead
    if (estimatedUrlLength > 2000) {
      return <WebviewWithPostMessage {...props} />;
    }
    return <WebviewWithQueryParams {...props} />;

    // ✅ Automatic encoding
    const params = new URLSearchParams();
    params.append('email', '[email protected]');
    params.append('name', 'John & Jane');
    
    // ❌ Manual concatenation
    const url = `${baseUrl}[email protected]`; // Wrong!

    const params = new URLSearchParams({ email: '[email protected]' });
    console.log('Encoded:', params.toString());
    // Should be: email=user%2Btest%40example.com

    const authData = {
      token: authToken,
      is2FaEnabled: true, // Must be boolean true, not string
      dob: '1990-01-15',
      organizationId: 'org_123',
      // ... other required fields
    };
    
    console.log('2FA enabled:', authData.is2FaEnabled === true);

    const required2FAFields = [
      'dob',
      'organizationId',
      'partnerUserId',
      'firstName',
      'lastName'
    ];
    
    const missing = required2FAFields.filter(field => !authData[field]);
    
    if (missing.length > 0) {
      console.error('Missing 2FA fields:', missing);
    }

    // Check with your account manager if 2FA is enabled
    // for your organization in Doshi

    // Ensure phone number is registered in Doshi
    // Contact [email protected] if needed

    // If SMS not working, user can try different channels
    // The iframe will handle this automatically

    // OTP may take 30-60 seconds to arrive
    // User can request resend from the iframe

    // OTPs typically expire after 5-10 minutes
    // User should request a new OTP

    // All user details must match exactly
    // (name, DOB, organization ID, partner user ID)

    // Check for support
    if (typeof window.postMessage === 'undefined') {
      console.error('postMessage not supported');
      // Fallback to query parameters
      return <WebviewWithQueryParams {...props} />;
    }

    // Check for support and provide fallback
    function buildQueryString(params) {
      if (typeof URLSearchParams !== 'undefined') {
        return new URLSearchParams(params).toString();
      }
      
      // Fallback: manual encoding
      return Object.entries(params)
        .map(([key, value]) => 
          `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
        )
        .join('&');
    }

    <iframe
      src="https://embed.doshi.app"
      allow="fullscreen"
      sandbox="allow-same-origin allow-scripts allow-forms"
    />

    // iOS Safari requires HTTPS for iframes
    const url = "https://embed.doshi.app"; // Must be HTTPS

    // Adjust WebView constraints when keyboard shows
    NotificationCenter.default.addObserver(
        self,
        selector: #selector(keyboardWillShow),
        name: UIResponder.keyboardWillShowNotification,
        object: nil
    )

    <!-- In AndroidManifest.xml -->
    <activity
        android:name=".WebViewActivity"
        android:windowSoftInputMode="adjustResize">
    </activity>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    webView.scrollView.isScrollEnabled = false
    webView.scrollView.bounces = false

    webView.settings.apply {
        setSupportZoom(false)
        builtInZoomControls = false
    }

    window.addEventListener('message', (event) => {
      if (event.origin !== 'https://embed.doshi.app') return;
      
      const data = JSON.parse(event.data);
      
      if (data.type === 'EXTERNAL_LINK') {
        // Handle the link in your environment
        window.open(data.url, '_blank', 'noopener,noreferrer');
      }
    });

    // Android
    webView.settings.javaScriptEnabled = true
    webView.settings.domStorageEnabled = true

    // iOS
    let preferences = WKPreferences()
    preferences.javaScriptEnabled = true
    webConfiguration.preferences = preferences

    <!-- Android: In AndroidManifest.xml -->
    <uses-permission android:name="android.permission.INTERNET" />

    <!-- iOS: In Info.plist (if using HTTP for testing) -->
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>

    const AUTH_TIMEOUT = 10000; // 10 seconds
    
    const authenticateWithTimeout = () => {
      return Promise.race([
        authenticate(),
        new Promise((_, reject) => 
          setTimeout(() => reject(new Error('Timeout')), AUTH_TIMEOUT)
        )
      ]);
    };

    <div className="loading">
      <Spinner />
      <p>This may take a moment...</p>
    </div>

    <link rel="preconnect" href="https://embed.doshi.app">
    <link rel="dns-prefetch" href="https://embed.doshi.app">

    const authenticateWithRetry = async (maxRetries = 3) => {
      for (let i = 0; i < maxRetries; i++) {
        try {
          return await authenticate();
        } catch (error) {
          if (i === maxRetries - 1) throw error;
          await new Promise(resolve => setTimeout(resolve, 1000 * (i + 1)));
        }
      }
    };

    if (!navigator.onLine) {
      setError('No internet connection');
      return;
    }
    
    window.addEventListener('online', () => {
      console.log('Connection restored');
      retry();
    });

    curl ifconfig.me

    # Run on each server
    curl ifconfig.me