How to Integrate Zoom with V0

Before writing any code, you need to create the Zoom app that will authorize your Next.js application to use the Zoom API. Go to marketplace.zoom.us and sign in with your Zoom account. Click 'Develop' in the top navigation, then 'Build App'. From the app types, select 'Server-to-Server OAuth' — this type is designed for backend integrations where your server acts on behalf of your Zoom account without needing individual users to authorize. Give your app a name like 'My Scheduling App'. After creation, Zoom will generate three values you need to save: Account ID, Client ID, and Client Secret. Copy all three immediately and store them securely — the Client Secret is only shown once in some Zoom versions. Next, configure the required API scopes. Click 'Scopes' in the left sidebar and add: meeting:write:admin (to create and delete meetings), meeting:read:admin (to list meetings), and user:read:admin (to get user info). Save the scopes. Finally, activate the app by clicking 'Activate your app' — the app must be active for the OAuth token endpoint to work. Note that Server-to-Server OAuth apps act on behalf of your Zoom account, not individual user accounts.

Open V0 at v0.dev and describe the meeting management interface you want to build. V0 works best when you describe the full data flow — mention that meeting creation should POST to /api/zoom/meetings and the meetings list should GET from /api/zoom/meetings. V0 will generate a React component with the form and list, plus a stub API route. The meeting creation form should collect the topic, start time, duration, timezone, and optionally a password and waiting room setting. The meetings list should display each meeting's topic, start time, join URL, and a delete button. V0 can also generate a copy-to-clipboard button for join URLs — ask for it explicitly in your prompt since it is a common UX pattern for meeting links. Once the design looks right, deploy from V0 to get a Vercel preview URL. You will configure real Zoom credentials in the next steps.

The core of the integration is the Next.js API route that handles Zoom API calls. Zoom's Server-to-Server OAuth requires exchanging your Account ID, Client ID, and Client Secret for a bearer access token at https://zoom.us/oauth/token. This token expires after one hour. For simplicity in a serverless context, request a new token with each API call rather than managing token refresh state — the token endpoint is fast and the overhead is minimal in a Vercel serverless function. Create app/api/zoom/meetings/route.ts with GET (list meetings) and POST (create meeting) handlers. The GET handler fetches the host user's ID first via the /users/me endpoint, then uses it to list meetings. The POST handler creates a scheduled meeting with the data from the request body. Both handlers call a shared getAccessToken() helper function that performs the OAuth token exchange. Note that the Authorization header for the token exchange uses Basic auth with base64-encoded credentials: btoa(clientId:clientSecret).

1import { NextResponse } from 'next/server';
2
3async function getAccessToken(): Promise<string> {
4  const credentials = Buffer.from(
5    `${process.env.ZOOM_CLIENT_ID}:${process.env.ZOOM_CLIENT_SECRET}`
6  ).toString('base64');
7
8  const response = await fetch(
9    `https://zoom.us/oauth/token?grant_type=account_credentials&account_id=${process.env.ZOOM_ACCOUNT_ID}`,
10    {
11      method: 'POST',
12      headers: {
13        Authorization: `Basic ${credentials}`,
14        'Content-Type': 'application/x-www-form-urlencoded',
15      },
16    }
17  );
18
19  const data = await response.json();
20  if (!data.access_token) {
21    throw new Error('Failed to get Zoom access token');
22  }
23  return data.access_token;
24}
25
26export async function GET() {
27  try {
28    const token = await getAccessToken();
29    const meRes = await fetch('https://api.zoom.us/v2/users/me', {
30      headers: { Authorization: `Bearer ${token}` },
31    });
32    const me = await meRes.json();
33
34    const meetingsRes = await fetch(
35      `https://api.zoom.us/v2/users/${me.id}/meetings?type=scheduled`,
36      { headers: { Authorization: `Bearer ${token}` } }
37    );
38    const meetings = await meetingsRes.json();
39    return NextResponse.json({ meetings: meetings.meetings ?? [] });
40  } catch (error) {
41    console.error('Zoom GET error:', error);
42    return NextResponse.json({ error: 'Failed to fetch meetings' }, { status: 500 });
43  }
44}
45
46export async function POST(request: Request) {
47  try {
48    const body = await request.json();
49    const token = await getAccessToken();
50    const meRes = await fetch('https://api.zoom.us/v2/users/me', {
51      headers: { Authorization: `Bearer ${token}` },
52    });
53    const me = await meRes.json();
54
55    const response = await fetch(`https://api.zoom.us/v2/users/${me.id}/meetings`, {
56      method: 'POST',
57      headers: {
58        Authorization: `Bearer ${token}`,
59        'Content-Type': 'application/json',
60      },
61      body: JSON.stringify({
62        topic: body.topic,
63        type: 2,
64        start_time: body.startTime,
65        duration: body.duration,
66        timezone: body.timezone,
67        password: body.password ?? '',
68        settings: { waiting_room: true, host_video: true, participant_video: true },
69      }),
70    });
71
72    const meeting = await response.json();
73    if (!response.ok) {
74      return NextResponse.json({ error: meeting.message }, { status: response.status });
75    }
76    return NextResponse.json({ meeting });
77  } catch (error) {
78    console.error('Zoom POST error:', error);
79    return NextResponse.json({ error: 'Failed to create meeting' }, { status: 500 });
80  }
81}

Configure your Zoom OAuth credentials in Vercel so the deployed API route can authenticate. Navigate to your project in the Vercel dashboard, go to Settings → Environment Variables, and add three variables. ZOOM_ACCOUNT_ID is the Account ID from your Zoom marketplace app (a string like AbCdEfGhIjKlMnOp). ZOOM_CLIENT_ID is the Client ID shown in your app's credentials page. ZOOM_CLIENT_SECRET is the Client Secret — treat this like a password and never commit it to Git. Set all three for the Production and Preview environments. If you want the Preview deployment to use a separate Zoom app for safety (so test meeting creation does not clutter your real Zoom account), create a second Zoom Server-to-Server OAuth app for development and use its credentials for the Preview environment scope. After adding all variables, go to the Deployments tab and click Redeploy to apply the new configuration. If you access the Vercel environment variables section and see the variables are grayed out after redeploying, the deployment has successfully picked them up — the values are masked for security.

1# .env.local (local development only — set in Vercel Dashboard for deployments)
2ZOOM_ACCOUNT_ID=your_account_id_here
3ZOOM_CLIENT_ID=your_client_id_here
4ZOOM_CLIENT_SECRET=your_client_secret_here

Test the full integration by visiting your Vercel deployment URL and creating a meeting through the form. If creation succeeds, the meeting should appear in the table within seconds. Common failures at this stage include the Zoom app not being 'activated' (check the app status in Zoom Marketplace) or missing scopes (the error message will indicate which scope is missing). To handle Zoom webhooks — for example, receiving a notification when a meeting starts or ends — create an additional route at app/api/zoom/webhook/route.ts. Zoom webhooks require URL verification: when you register a webhook URL in the Zoom Marketplace app settings, Zoom sends a CRC validation request that your endpoint must respond to correctly. The validation involves computing an HMAC-SHA256 hash of the challenge token using your Webhook Secret Token. Once verified, Zoom will send event notifications to your endpoint for the events you subscribe to (meeting.started, meeting.ended, participant.joined, etc.). For RapidDev clients building complex scheduling platforms, we can help implement full webhook handling and database sync for meeting attendance tracking.

1// app/api/zoom/webhook/route.ts
2import { NextResponse } from 'next/server';
3import crypto from 'crypto';
4
5export async function POST(request: Request) {
6  const body = await request.json();
7
8  // Handle Zoom URL validation challenge
9  if (body.event === 'endpoint.url_validation') {
10    const hash = crypto
11      .createHmac('sha256', process.env.ZOOM_WEBHOOK_SECRET!)
12      .update(body.payload.plainToken)
13      .digest('hex');
14    return NextResponse.json({
15      plainToken: body.payload.plainToken,
16      encryptedToken: hash,
17    });
18  }
19
20  // Handle meeting events
21  if (body.event === 'meeting.started') {
22    console.log('Meeting started:', body.payload.object.id);
23  }
24  if (body.event === 'meeting.ended') {
25    console.log('Meeting ended:', body.payload.object.id);
26  }
27
28  return NextResponse.json({ received: true });
29}