How to Integrate Lovable with Zoom

Navigate to marketplace.zoom.us and sign in with your Zoom account. Click 'Develop' in the top navigation, then select 'Build App'. From the app type list, choose 'Server-to-Server OAuth' — this is the correct type for backend integrations where your server makes API calls on behalf of your Zoom account without user-by-user authorization. Give your app a descriptive name like 'My Lovable App'. After creation, Zoom generates three credentials you will need: an Account ID, a Client ID, and a Client Secret. Copy all three and keep them somewhere temporarily safe — you will paste them into Lovable's Secrets panel in the next step. While on the app configuration page, go to the 'Scopes' tab and add the permissions your app needs. For basic meeting creation, add 'meeting:write:admin' and 'meeting:read:admin'. For webinar features, add 'webinar:write:admin' and 'webinar:read:admin'. For participant data, add 'meeting:read:admin' under participant scopes. Once scopes are set, click 'Activate your app' — the app must be activated before its credentials work. You will see a green 'Activated' badge when this is done.

In your Lovable project, open the Cloud tab by clicking the '+' icon near the top of the right-hand panel, then select the Cloud tab. Scroll down to the 'Secrets' section. You need to add three secrets — click the '+' button next to Secrets for each one. Name the first secret ZOOM_ACCOUNT_ID and paste the Account ID value from Zoom Marketplace. Name the second ZOOM_CLIENT_ID and paste the Client ID. Name the third ZOOM_CLIENT_SECRET and paste the Client Secret. Secret names must match exactly — including capitalisation and underscores — because your Edge Function will reference them with Deno.env.get('ZOOM_ACCOUNT_ID') and any typo causes a silent failure at runtime. After saving all three secrets, verify they appear in the Secrets list with green checkmarks. These values are encrypted at rest and never exposed to your frontend code or chat history. Lovable's security infrastructure blocks approximately 1,200 hardcoded API keys per day, and the Secrets panel is the correct place for all sensitive credentials. Never paste these values directly into a Lovable chat prompt or into your application code.

Open the Lovable chat interface and describe the Edge Function you need. Lovable's AI will generate the TypeScript code, deploy it as a Supabase Edge Function, and wire it into your project. The function must: retrieve your Zoom credentials from Deno.env.get(), call Zoom's OAuth token endpoint to get a short-lived Bearer token using the Account Credentials grant type, then call the Zoom Create Meeting API with that token. After Lovable generates and deploys the function, review the code in the Code panel to verify the Deno.env.get() calls match your exact secret names. The token endpoint is https://zoom.us/oauth/token?grant_type=account_credentials&account_id={accountId} and it returns an access_token valid for one hour. The meeting creation endpoint is https://api.zoom.us/v2/users/me/meetings. Your Edge Function should return the meeting's id, join_url, and start_url to the frontend — store these in Supabase if you need to access them later.

1// supabase/functions/zoom-meeting/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
9async function getZoomAccessToken(): Promise<string> {
10  const accountId = Deno.env.get('ZOOM_ACCOUNT_ID')!;
11  const clientId = Deno.env.get('ZOOM_CLIENT_ID')!;
12  const clientSecret = Deno.env.get('ZOOM_CLIENT_SECRET')!;
13
14  const credentials = btoa(`${clientId}:${clientSecret}`);
15  const tokenUrl = `https://zoom.us/oauth/token?grant_type=account_credentials&account_id=${accountId}`;
16
17  const response = await fetch(tokenUrl, {
18    method: 'POST',
19    headers: {
20      'Authorization': `Basic ${credentials}`,
21      'Content-Type': 'application/x-www-form-urlencoded',
22    },
23  });
24
25  if (!response.ok) {
26    const error = await response.text();
27    throw new Error(`Zoom token error: ${error}`);
28  }
29
30  const data = await response.json();
31  return data.access_token;
32}
33
34serve(async (req) => {
35  if (req.method === 'OPTIONS') {
36    return new Response('ok', { headers: corsHeaders });
37  }
38
39  try {
40    const { topic, start_time, duration, timezone } = await req.json();
41
42    const accessToken = await getZoomAccessToken();
43
44    const meetingResponse = await fetch('https://api.zoom.us/v2/users/me/meetings', {
45      method: 'POST',
46      headers: {
47        'Authorization': `Bearer ${accessToken}`,
48        'Content-Type': 'application/json',
49      },
50      body: JSON.stringify({
51        topic,
52        type: 2, // scheduled meeting
53        start_time,
54        duration,
55        timezone,
56        settings: {
57          host_video: true,
58          participant_video: true,
59          waiting_room: true,
60        },
61      }),
62    });
63
64    if (!meetingResponse.ok) {
65      const error = await meetingResponse.json();
66      throw new Error(`Zoom API error: ${JSON.stringify(error)}`);
67    }
68
69    const meeting = await meetingResponse.json();
70
71    return new Response(
72      JSON.stringify({
73        id: meeting.id,
74        join_url: meeting.join_url,
75        start_url: meeting.start_url,
76        start_time: meeting.start_time,
77        topic: meeting.topic,
78      }),
79      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
80    );
81  } catch (error) {
82    return new Response(
83      JSON.stringify({ error: error.message }),
84      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
85    );
86  }
87});

With the Edge Function deployed, you now need a frontend component in your Lovable app that calls it. Use the Lovable chat to describe the UI you want — a form, a button, or an automated trigger. The Edge Function URL follows the pattern https://[project-ref].supabase.co/functions/v1/zoom-meeting, but in Lovable-generated code it is typically called via the Supabase client's functions.invoke() method, which automatically handles authentication headers. When calling the Edge Function from React, use the Supabase client already configured in your project: supabase.functions.invoke('zoom-meeting', { body: { topic, start_time, duration, timezone } }). Handle the response by reading the join_url and displaying it to the user or storing it in your Supabase database. If you store meetings in a table, make sure you have an appropriate Row Level Security policy so users can only read their own meetings. The Lovable AI can generate both the component and the database insert logic if you describe the full flow in your prompt.

Zoom webhooks let your application receive real-time notifications when meetings start, participants join or leave, recordings become available, and dozens of other events occur. To receive them, you need a second Edge Function that acts as a webhook receiver endpoint. First, generate the webhook receiver Edge Function in Lovable. This function must handle two special Zoom requirements: (1) a URL validation challenge during initial setup, where Zoom sends a plaintext_token and expects you to return an encrypted_token using your webhook secret, and (2) signature verification on every subsequent event using the x-zm-signature and x-zm-request-timestamp headers. Store your webhook secret in Cloud → Secrets as ZOOM_WEBHOOK_SECRET. Once the Edge Function is deployed, go back to your Zoom Marketplace app configuration, click 'Feature' → 'Event Subscriptions', and add a new subscription. Paste your Edge Function URL (visible in the Cloud tab under Edge Functions) as the Event notification endpoint URL. Select the events you want to receive, such as 'Meeting Started', 'Meeting Ended', 'Participant Joined', and 'Recording Completed'. Zoom will send the URL validation challenge immediately, and your Edge Function must respond correctly for the subscription to activate. For complex webhook routing and processing logic, RapidDev's team can help configure multi-event handlers with proper database persistence.