How to Integrate Lovable with SendGrid

Before touching Lovable, you need a SendGrid API key scoped to email sending only. Log in to your SendGrid account at app.sendgrid.com. In the left sidebar, navigate to Settings → API Keys. Click the 'Create API Key' button in the top-right corner. Give your key a descriptive name like 'Lovable Production' so you can identify it later. Under API Key Permissions, select 'Restricted Access' rather than Full Access — this follows the principle of least privilege. Expand the Mail Send section and set it to 'Full Access'. All other permissions should remain at 'No Access'. Click 'Create & View'. SendGrid will display your API key exactly once — it starts with 'SG.' and is a long alphanumeric string. Copy it immediately and paste it somewhere temporary (like a local text file that you will delete afterward). You cannot retrieve this key again after closing the dialog; you would need to create a new one. Also verify your sender identity before using the API. In SendGrid, go to Settings → Sender Authentication. For testing, you can use Single Sender Verification (verify a specific email address). For production, set up Domain Authentication (verify your entire domain with DNS records) for better deliverability and to avoid spam filters. If you skip sender verification, SendGrid will reject your API calls with a 403 error.

With your API key ready, the next step is storing it securely in Lovable's Cloud Secrets panel. Secrets are encrypted environment variables that are only accessible inside Edge Functions via Deno.env.get() — they are never exposed to your frontend React code, never committed to your GitHub repository, and never visible in Lovable's chat history. In your Lovable project, click the '+' icon at the top of the editor panel (next to the Preview label). This opens the Cloud panel with multiple tabs: Database, Auth, Storage, Edge Functions, AI, Secrets, Logs, and Usage. Click the 'Secrets' tab. Click 'Add new secret'. In the Name field, type SENDGRID_API_KEY exactly (case-sensitive — your Edge Function code will reference this exact name). In the Value field, paste the API key you copied in Step 1. Click Save. Optionally, add a second secret for your sender email address: Name: SENDGRID_FROM_EMAIL, Value: the verified email you set up in SendGrid (e.g., noreply@yourapp.com). Storing the sender address as a secret makes it easy to change without touching code. Critical: Never paste your SendGrid API key directly into Lovable's chat prompt. On free-tier workspaces, chat history is publicly visible. Even on paid plans, keys pasted in chat can end up in your Git commit history. Lovable blocks approximately 1,200 hardcoded API keys per day — but the safest approach is to never expose them in the first place.

Now you will create the Edge Function that acts as a secure proxy between your Lovable frontend and SendGrid's API. Open Lovable's chat and paste a prompt describing the email function you need. Lovable will generate the TypeScript code, create the file at supabase/functions/send-email/index.ts, and deploy it to Lovable Cloud automatically. The function needs to: accept a POST request from your frontend, validate the request body, retrieve the SendGrid API key from environment variables, construct the SendGrid v3 email payload, send a POST request to https://api.sendgrid.com/v3/mail/send, and return a success or error response. Two important implementation details for Deno Edge Functions: First, always include CORS headers in your response so the browser does not block the response from your frontend. Second, handle the OPTIONS preflight request that browsers send before cross-origin POST requests. The code block below shows the complete, production-ready pattern. After Lovable generates the function, review it in the Code panel (click '+' then Code) at supabase/functions/send-email/index.ts. Verify that it uses Deno.env.get('SENDGRID_API_KEY') — not a hardcoded key — and that it returns proper CORS headers for both the OPTIONS preflight and the actual POST response.

1import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
2
3const corsHeaders = {
4  'Access-Control-Allow-Origin': '*',
5  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
6}
7
8serve(async (req) => {
9  // Handle CORS preflight
10  if (req.method === 'OPTIONS') {
11    return new Response('ok', { headers: corsHeaders })
12  }
13
14  try {
15    const { to, subject, html, text, fromName } = await req.json()
16
17    const apiKey = Deno.env.get('SENDGRID_API_KEY')
18    const fromEmail = Deno.env.get('SENDGRID_FROM_EMAIL') || 'noreply@example.com'
19
20    if (!apiKey) {
21      throw new Error('SENDGRID_API_KEY secret is not set')
22    }
23
24    if (!to || !subject || (!html && !text)) {
25      return new Response(
26        JSON.stringify({ error: 'Missing required fields: to, subject, and html or text' }),
27        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
28      )
29    }
30
31    const payload = {
32      personalizations: [{ to: [{ email: to }] }],
33      from: { email: fromEmail, name: fromName || 'MyApp' },
34      subject,
35      content: [
36        ...(text ? [{ type: 'text/plain', value: text }] : []),
37        ...(html ? [{ type: 'text/html', value: html }] : []),
38      ],
39    }
40
41    const response = await fetch('https://api.sendgrid.com/v3/mail/send', {
42      method: 'POST',
43      headers: {
44        'Authorization': `Bearer ${apiKey}`,
45        'Content-Type': 'application/json',
46      },
47      body: JSON.stringify(payload),
48    })
49
50    if (!response.ok) {
51      const errorBody = await response.text()
52      throw new Error(`SendGrid API error ${response.status}: ${errorBody}`)
53    }
54
55    return new Response(
56      JSON.stringify({ success: true, message: 'Email sent successfully' }),
57      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
58    )
59  } catch (error) {
60    return new Response(
61      JSON.stringify({ error: error.message }),
62      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
63    )
64  }
65})

With the Edge Function deployed, the next step is wiring it to your React components. You will call the Edge Function using the Supabase client's functions.invoke() method, which handles authentication headers and the correct endpoint URL automatically. This approach is cleaner than a raw fetch() call and integrates with your existing Supabase session. Identify where in your app emails should be triggered — the most common spots are: the signup success handler (for welcome emails), the Stripe webhook confirmation handler (for order receipts), or a button click in an admin panel (for manual notifications). In that component, add a call to supabase.functions.invoke('send-email', { body: { ... } }). The function name 'send-email' must match exactly the folder name you used in supabase/functions/send-email/. Lovable's AI knows this convention and will generate the correct invoke call if you describe it in a prompt. For error handling: wrap the invoke call in a try-catch and check the error property of the response. SendGrid failures (invalid email, unverified sender, API key issues) will come back as error messages in the response body. Log these during development and show appropriate feedback to users — for example, 'We had trouble sending your confirmation email. Please check your email address or contact support.'

1import { supabase } from '@/lib/supabase'
2import { toast } from '@/components/ui/use-toast'
3
4const sendWelcomeEmail = async (email: string, firstName: string) => {
5  try {
6    const { data, error } = await supabase.functions.invoke('send-email', {
7      body: {
8        to: email,
9        subject: `Welcome to MyApp, ${firstName}!`,
10        html: `
11          <div style="font-family: sans-serif; max-width: 600px; margin: 0 auto;">
12            <h1>Welcome, ${firstName}!</h1>
13            <p>Thanks for joining MyApp. Your account is ready.</p>
14            <a href="https://myapp.com/dashboard"
15               style="background: #6366f1; color: white; padding: 12px 24px;
16                      border-radius: 6px; text-decoration: none; display: inline-block;">
17              Go to Dashboard
18            </a>
19          </div>
20        `,
21        fromName: 'MyApp Team',
22      },
23    })
24
25    if (error) throw error
26
27    toast({
28      title: 'Welcome email sent!',
29      description: 'Check your inbox for a welcome message.',
30    })
31  } catch (err) {
32    console.error('Failed to send welcome email:', err)
33    // Don't block the user flow if email fails
34  }
35}

Testing SendGrid delivery requires a deployed Lovable app — Edge Functions do not run in Lovable's preview mode. Use the Publish button in the top-right corner to deploy your app, then test using the live URL. For initial testing, use your own email address as the recipient. Trigger the email flow (sign up, click a button, etc.) and wait for the email to arrive in your inbox. Check both inbox and spam folder — if this is your first test, the email may land in spam until your domain reputation improves. If the email does not arrive, check Cloud → Logs for the Edge Function execution details. Look for error responses from SendGrid — the most common are: 401 Unauthorized (API key is invalid or not set correctly in secrets), 403 Forbidden (sender email address is not verified in SendGrid), and 400 Bad Request (malformed payload, usually a missing required field). You can also test your Edge Function directly from Cloud → Edge Functions by selecting the function and using the built-in test panel. Paste a sample request body like {"to": "test@youremail.com", "subject": "Test", "html": "<p>Test email</p>"} and click Invoke. The raw response from SendGrid will appear, making it easy to diagnose issues without triggering your full UI flow. For production readiness: set up SendGrid's Event Webhook to track bounces, opens, and clicks. This requires a separate Edge Function that receives POST notifications from SendGrid and stores delivery events in your Supabase database for analytics.