How to Connect External API Endpoints (Stripe, OpenAI) to Lovable

Why external API calls from Lovable need a server-side proxy

When you want your Lovable app to call an external API like OpenAI, Stripe, or a weather service, you cannot make the request directly from your React frontend code. Two problems prevent this. First, CORS (Cross-Origin Resource Sharing) blocks browser requests to different domains unless the API explicitly allows your domain. Most third-party APIs do not add your Lovable domain to their CORS headers because they expect server-to-server communication, not browser requests. Second, security. External APIs require secret keys for authentication. If you put an API key in your React code, it is visible to anyone who opens the browser developer tools. Even environment variables with the VITE_ prefix are embedded in the built JavaScript — they are not truly secret. The solution is a server-side proxy using Supabase Edge Functions. Your frontend sends a request to your own Edge Function (same origin, no CORS). The Edge Function reads the API key from Secrets (truly secure, never in browser code) and makes the request to the external API. The Edge Function then returns the response to your frontend.

• Calling external APIs directly from React components — blocked by CORS
• API keys in frontend code — visible in browser developer tools
• VITE_ prefixed API keys — still embedded in built JavaScript, not truly secret
• No error handling for API failures — app crashes when the external service is down
• Rate limiting not handled — too many requests from the frontend exhaust API quotas

Error messages you might see

Before you start

• A Lovable project open in the editor
• An API key or token from the external service (OpenAI, Stripe, etc.)
• The external API's documentation (endpoint URLs, request format, authentication method)
• Access to Cloud tab → Secrets and Cloud tab → Edge Functions

How to fix it

// WRONG: API key in frontend code — exposed to everyone
const response = await fetch('https://api.openai.com/v1/chat/completions', {
  headers: { 'Authorization': 'Bearer sk-abc123secretkey' },
});

// CORRECT: API key stored in Secrets, accessed only in Edge Functions
// Cloud tab → Secrets → Add: OPENAI_API_KEY = sk-abc123secretkey
// Edge Functions access it with: Deno.env.get('OPENAI_API_KEY')

1// supabase/functions/openai-chat/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7};
8
9serve(async (req) => {
10  if (req.method === 'OPTIONS') {
11    return new Response('ok', { headers: corsHeaders });
12  }
13
14  try {
15    const { messages } = await req.json();
16    const apiKey = Deno.env.get('OPENAI_API_KEY');
17
18    if (!apiKey) {
19      throw new Error('OpenAI API key not configured in Secrets');
20    }
21
22    const response = await fetch('https://api.openai.com/v1/chat/completions', {
23      method: 'POST',
24      headers: {
25        'Authorization': `Bearer ${apiKey}`,
26        'Content-Type': 'application/json',
27      },
28      body: JSON.stringify({
29        model: 'gpt-4',
30        messages,
31        max_tokens: 1000,
32      }),
33    });
34
35    const data = await response.json();
36
37    if (!response.ok) {
38      throw new Error(data.error?.message || 'OpenAI API error');
39    }
40
41    return new Response(JSON.stringify(data), {
42      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
43    });
44  } catch (error) {
45    return new Response(JSON.stringify({ error: error.message }), {
46      status: 500,
47      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
48    });
49  }
50});

// Direct external API call — blocked by CORS
async function askAI(question: string) {
  const response = await fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${import.meta.env.VITE_OPENAI_KEY}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ model: 'gpt-4', messages: [{ role: 'user', content: question }] }),
  });
  return response.json();
}

// Call through Edge Function proxy — no CORS, key is secure
import { supabase } from '@/integrations/supabase/client';
async function askAI(question: string) {
  const { data, error } = await supabase.functions.invoke('openai-chat', {
    body: { messages: [{ role: 'user', content: question }] },
  });
  if (error) throw new Error(error.message);
  return data;
}

// No error handling — UI shows nothing on failure
function ChatComponent() {
  const [answer, setAnswer] = useState('');
  async function handleAsk() {
    const data = await askAI(question);
    setAnswer(data.choices[0].message.content);
  }
}

// Proper loading, error, and success states
function ChatComponent() {
  const [answer, setAnswer] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  async function handleAsk() {
    setIsLoading(true);
    setError(null);
    try {
      const data = await askAI(question);
      setAnswer(data.choices[0].message.content);
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Something went wrong');
    } finally {
      setIsLoading(false);
    }
  }
  return (
    <div>
      <Button onClick={handleAsk} disabled={isLoading}>
        {isLoading ? 'Thinking...' : 'Ask AI'}
      </Button>
      {error && <p className="text-red-500">{error}</p>}
      {answer && <p>{answer}</p>}
    </div>
  );
}

Complete code example

1import { useState, useCallback } from 'react';
2import { supabase } from '@/integrations/supabase/client';
3
4/**
5 * Custom hook for calling external APIs through Edge Function proxies.
6 * Handles loading, error, and success states automatically.
7 *
8 * Usage:
9 *   const { data, isLoading, error, execute } = useExternalApi<ResponseType>();
10 *   await execute('function-name', { key: 'value' });
11 */
12export function useExternalApi<T = unknown>() {
13  const [data, setData] = useState<T | null>(null);
14  const [isLoading, setIsLoading] = useState(false);
15  const [error, setError] = useState<string | null>(null);
16
17  const execute = useCallback(
18    async (functionName: string, body: Record<string, unknown>) => {
19      setIsLoading(true);
20      setError(null);
21
22      try {
23        const { data: responseData, error: invokeError } =
24          await supabase.functions.invoke(functionName, { body });
25
26        if (invokeError) {
27          throw new Error(invokeError.message);
28        }
29
30        setData(responseData as T);
31        return responseData as T;
32      } catch (err) {
33        const message =
34          err instanceof Error ? err.message : 'API request failed';
35        setError(message);
36        throw err;
37      } finally {
38        setIsLoading(false);
39      }
40    },
41    []
42  );
43
44  const reset = useCallback(() => {
45    setData(null);
46    setError(null);
47    setIsLoading(false);
48  }, []);
49
50  return { data, isLoading, error, execute, reset };
51}

Best practices to prevent this

• Always use Edge Function proxies for external API calls — never call external APIs directly from React components
• Store API keys in Cloud tab → Secrets without the VITE_ prefix — they should only be accessible from Edge Functions
• Create a custom React hook (useExternalApi) that handles loading, error, and success states consistently
• Add proper error messages in Edge Functions — return descriptive errors so the frontend can show helpful messages
• Implement retry logic with exponential backoff in Edge Functions for rate-limited or occasionally failing APIs
• Validate incoming request data in Edge Functions before forwarding to the external API — reject malformed requests early
• Log API call results in Cloud tab → Logs to monitor usage and debug failures

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

Related error patterns