How to Integrate Lovable with Meetup

Before writing any code, you need OAuth2 credentials from Meetup's developer portal. Navigate to secure.meetup.com/oauth2/clients in your browser while logged into your Meetup account. Click 'Create a new consumer'. Fill in the application name (e.g., 'My Lovable App'), your app's description, and the redirect URI. For the redirect URI, use your deployed Lovable app URL followed by /auth/meetup/callback — for example, https://your-app.lovable.app/auth/meetup/callback. You can also add http://localhost:3000/auth/meetup/callback for local development. After creating the application, Meetup shows you a Consumer Key (this is your client ID) and a Consumer Secret (this is your client secret). Copy both values — you will store them as secrets in the next step. For the integration pattern in this tutorial, you also need an access token. If you are building a tool for your own groups (not requiring end-user login), you can generate a personal access token directly: go to secure.meetup.com/oauth2/access and authorize your own application. This produces an access token you can store as a secret and use for all API calls. If you need user-specific data (individual member RSVPs, private group access), you will need to implement the full OAuth2 authorization code flow — which involves a redirect to Meetup's auth page, a callback handler, and token exchange. For most organizer dashboard use cases, the personal access token approach is simpler and sufficient.

With your Meetup OAuth credentials in hand, store them securely in Lovable's encrypted Secrets panel. Open your Lovable project and click the '+' icon at the top of the editor next to the Preview label. This opens the Cloud panel with tabs for Database, Auth, Storage, Edge Functions, Secrets, Logs, and Usage. Click the Secrets tab. Click 'Add new secret' and add the following three secrets: - Name: MEETUP_CLIENT_ID — Value: your Consumer Key from the Meetup developer portal - Name: MEETUP_CLIENT_SECRET — Value: your Consumer Secret from the Meetup developer portal - Name: MEETUP_ACCESS_TOKEN — Value: your OAuth access token If you are implementing the refresh token flow, also add: - Name: MEETUP_REFRESH_TOKEN — Value: your OAuth refresh token Never paste these credentials directly into the Lovable chat prompt. Lovable's security infrastructure blocks approximately 1,200 hardcoded API keys per day, but the safest approach is to never expose credentials in chat at all — free-tier Lovable chat history is publicly visible, and credentials in chat can end up in Git commit history. The Secrets panel encrypts values at rest and makes them accessible only from Edge Functions via Deno.env.get(). Once all secrets are added, verify they appear in the Secrets panel with masked values (shown as asterisks). This confirms they are stored correctly. Edge Functions will reference them by the exact names you entered — any typo in the secret name will cause a runtime error when the function tries to retrieve the value.

Now create the Edge Function that proxies requests to Meetup's GraphQL API. This function receives a GraphQL query from your frontend, forwards it to Meetup's API with the OAuth access token, and returns the result. Keeping the token server-side prevents it from appearing in browser network logs or being accessible to client-side JavaScript. In Lovable's chat, describe what you need and paste the code below as a starting point. Prompt Lovable: 'Create a Supabase Edge Function at supabase/functions/meetup-api/index.ts that accepts a POST request with a GraphQL query body, forwards it to https://api.meetup.com/gql with the Meetup access token from Deno.env.get("MEETUP_ACCESS_TOKEN"), and returns the API response.' Lovable will scaffold the function and deploy it to your Cloud. The function handles CORS so your React frontend can call it from the browser, validates that a query was provided, appends the OAuth Bearer token, and returns the parsed response. For production use, add error handling for expired tokens: check if the response status is 401 and if so, use the refresh token to obtain a new access token before retrying the request.

1// supabase/functions/meetup-api/index.ts
2const MEETUP_GRAPHQL_URL = 'https://api.meetup.com/gql';
3
4Deno.serve(async (req) => {
5  // Handle CORS preflight
6  if (req.method === 'OPTIONS') {
7    return new Response(null, {
8      headers: {
9        'Access-Control-Allow-Origin': '*',
10        'Access-Control-Allow-Methods': 'POST, OPTIONS',
11        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
12      },
13    });
14  }
15
16  if (req.method !== 'POST') {
17    return new Response(JSON.stringify({ error: 'Method not allowed' }), {
18      status: 405,
19      headers: { 'Content-Type': 'application/json' },
20    });
21  }
22
23  const accessToken = Deno.env.get('MEETUP_ACCESS_TOKEN');
24  if (!accessToken) {
25    return new Response(JSON.stringify({ error: 'Meetup access token not configured' }), {
26      status: 500,
27      headers: { 'Content-Type': 'application/json' },
28    });
29  }
30
31  let body: { query: string; variables?: Record<string, unknown> };
32  try {
33    body = await req.json();
34  } catch {
35    return new Response(JSON.stringify({ error: 'Invalid JSON body' }), {
36      status: 400,
37      headers: { 'Content-Type': 'application/json' },
38    });
39  }
40
41  if (!body.query) {
42    return new Response(JSON.stringify({ error: 'GraphQL query is required' }), {
43      status: 400,
44      headers: { 'Content-Type': 'application/json' },
45    });
46  }
47
48  const meetupResponse = await fetch(MEETUP_GRAPHQL_URL, {
49    method: 'POST',
50    headers: {
51      'Content-Type': 'application/json',
52      'Authorization': `Bearer ${accessToken}`,
53    },
54    body: JSON.stringify({ query: body.query, variables: body.variables }),
55  });
56
57  const data = await meetupResponse.json();
58
59  return new Response(JSON.stringify(data), {
60    status: meetupResponse.status,
61    headers: {
62      'Content-Type': 'application/json',
63      'Access-Control-Allow-Origin': '*',
64    },
65  });
66});

With the Edge Function in place, use Lovable's chat to generate the frontend components. Lovable will create React components that call your Edge Function, display events in a card grid or list, and handle loading and error states — all without you writing any React code manually. The key is to be specific about the UI layout and the GraphQL query you want the component to use. Meetup's GraphQL schema exposes a keywordSearch query for event discovery and a groupByUrlname query for accessing a specific group's events. Describe both the data you need and how you want it displayed. After Lovable generates the initial components, review them in the preview. If the event cards need additional fields (like the group photo or a map link), prompt Lovable to add them: 'Add the group photo and a Google Maps link to the venue on each event card.' If you need filtering by topic or date, describe the filter UI you want. Lovable will update the GraphQL query variables and the filter component together. For RSVP tracking, describe a separate view: 'Add an RSVP management page that shows all attendees who RSVPed yes to a selected event, with their name and join date, fetched from the meetup-api Edge Function.' Lovable will generate the attendee list component and the GraphQL query for fetching RSVP data. If you are building for multiple clients or group organizers, consider caching Meetup API responses in Supabase. Prompt Lovable: 'Store the fetched event data in a Supabase table called meetup_events_cache with a fetched_at timestamp, and only call the Meetup API if the cache is older than 15 minutes.' This reduces API call frequency and keeps your app responsive even during Meetup API slowdowns. For complex multi-tenant organizer dashboards, RapidDev's team can help architect the caching layer and OAuth refresh flow.

Meetup OAuth access tokens expire after one hour. If your app makes API calls over an extended session or on a scheduled basis, you will eventually hit a 401 Unauthorized response from Meetup's API. Handling this gracefully requires the Edge Function to detect the expired token, exchange the refresh token for a new access token, and retry the original request — all transparently to the frontend user. Update the Edge Function to implement token refresh. Add a helper function that calls Meetup's token endpoint (https://secure.meetup.com/oauth2/access) with your client credentials and refresh token. When the Meetup GraphQL call returns a 401, call the refresh helper, store the new access token (for the scope of this request — Supabase Secrets cannot be updated at runtime, so for long-term persistence you would store tokens in a Supabase table), and retry. For apps that run Edge Functions on a schedule (checking for new RSVPs or event updates), the better pattern is to store OAuth tokens in a Supabase database table with an expires_at column. Before each API call, the Edge Function checks whether the stored token has expired, refreshes it if needed, updates the database record, and then proceeds with the API call. This approach survives Deno cold starts and works correctly across multiple concurrent function invocations. Also handle the case where the Meetup API returns GraphQL errors alongside a 200 HTTP status — Meetup follows the GraphQL convention of returning errors in the response body rather than using HTTP error codes. Check the response for a top-level errors array and surface these to your frontend with a user-friendly message.