How to Integrate Lovable with Teachable

Your Teachable API key is available in your school's admin settings. It grants full access to your school's data through the API, so treat it like a password. To find your API key: Log in to your Teachable school at your school's URL (e.g., yourschool.teachable.com/sign_in). In the admin dashboard, click on your school name or the settings cog in the top-right area. Navigate to Settings (or School Settings). Look for the 'API' section — it may be in the Admin section, Integrations, or Tools depending on your Teachable version. You should see your API key displayed there. If you do not see an API section, your current Teachable plan may not include API access — Teachable's Basic plan includes API access, but free plans may not. The Teachable API key is a long alphanumeric string. Copy it carefully — you will store it in Lovable's Cloud → Secrets in the next step. The base URL for Teachable's API is https://developers.teachable.com/v1 (or check the current documentation at developers.teachable.com — Teachable has updated their API over time). Most endpoints return JSON data about your school's courses, users, and transactions.

Store your Teachable API key in Lovable's Cloud → Secrets panel. This encrypted environment variable is accessible only from Edge Functions and never from client-side code, your GitHub repository, or chat history. In Lovable, click the '+' icon at the top of the editor next to the Preview label to open the Cloud panel. Click the Secrets tab. Click 'Add new secret' and add: - Name: TEACHABLE_API_KEY — Value: your Teachable API key The Teachable API key is all you need for authentication — it is sent as an Authorization header or an apiKey header (check your Teachable API documentation for the exact header name for your API version) on every request. Some versions of the Teachable API use: apiKey: {your_api_key} as a header. Others use Authorization: Bearer {api_key}. The Edge Function you create in the next step will handle this header correctly based on your API version. Lovable's security system blocks approximately 1,200 API keys from being hardcoded into application code per day. Using Cloud → Secrets ensures your Teachable API key never appears in frontend JavaScript, Git history, or build logs.

Build the Edge Function that proxies all requests from your Lovable frontend to the Teachable REST API. This function handles authentication by injecting your API key as a request header and routes calls to the correct Teachable endpoint. Paste this prompt into Lovable's chat: 'Create a Supabase Edge Function at supabase/functions/teachable-api/index.ts that proxies Teachable REST API requests. Accept POST requests with body { endpoint: string, method: string, body?: object, params?: object }. Read TEACHABLE_API_KEY from Deno.env. Build the request to https://developers.teachable.com/v1/{endpoint} with header apiKey: {apiKey} (the Teachable v1 API uses apiKey header not Bearer). Add params as query string for GET requests. Return the Teachable API response as JSON with CORS headers.' Teachable's REST API endpoints for the v1 API include: - GET /courses — list all courses in your school - GET /courses/{course_id} — single course details - GET /courses/{course_id}/enrollments — enrollments for a course - GET /users — list all users - GET /users/{user_id} — single user profile - GET /users/{user_id}/enrollments — courses a user is enrolled in - GET /transactions — list all transactions (purchases) Note: Teachable's API versioning and endpoint paths have changed over their history. Verify the exact base URL and auth header format against the current Teachable developer documentation before deploying. The v1 API at developers.teachable.com uses the apiKey request header, not Bearer authentication.

1// supabase/functions/teachable-api/index.ts
2const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5};
6
7Deno.serve(async (req) => {
8  if (req.method === 'OPTIONS') {
9    return new Response('ok', { headers: corsHeaders });
10  }
11
12  try {
13    const apiKey = Deno.env.get('TEACHABLE_API_KEY');
14    if (!apiKey) {
15      return new Response(
16        JSON.stringify({ error: 'TEACHABLE_API_KEY not configured' }),
17        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
18      );
19    }
20
21    const { endpoint, method = 'GET', params, body: requestBody } = await req.json();
22
23    if (!endpoint) {
24      return new Response(
25        JSON.stringify({ error: 'endpoint is required' }),
26        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
27      );
28    }
29
30    let url = `https://developers.teachable.com/v1/${endpoint}`;
31
32    if (params && method === 'GET') {
33      const queryString = new URLSearchParams(
34        Object.entries(params).map(([k, v]) => [k, String(v)])
35      ).toString();
36      if (queryString) url += `?${queryString}`;
37    }
38
39    const fetchOptions: RequestInit = {
40      method,
41      headers: {
42        'apiKey': apiKey,
43        'Content-Type': 'application/json',
44        'Accept': 'application/json',
45      },
46    };
47
48    if (requestBody && method !== 'GET') {
49      fetchOptions.body = JSON.stringify(requestBody);
50    }
51
52    const response = await fetch(url, fetchOptions);
53    const data = await response.json();
54
55    return new Response(JSON.stringify(data), {
56      status: response.status,
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, build React components that display Teachable data. Start with the course catalog (for the storefront use case) and revenue metrics (for the analytics use case). Paste this prompt into Lovable's chat: 'Create two React components: (1) TeachableCourseGrid: fetch all courses from the teachable-api Edge Function with endpoint courses. Display each course as a card showing: image_url, name, description (first 150 chars), heading (pricing description), and a list of price points from the course's pricing_plans. Add a direct enrollment link to {course.url} or a custom checkout flow. (2) TeachableRevenueStats: fetch recent transactions from endpoint transactions with params { page: 1, per: 100 }. Show: total revenue (sum of amounts), transactions count, and a table with columns: student name, course name, amount, and created_at date. Add a date range filter.' Teachable course objects include: id, name, description, image_url, url (the Teachable course page URL), published (boolean), free (boolean), and pricing_plans (array of plans with price and name). For revenue calculations, transaction objects include: id, amount (in cents — divide by 100 for display), created_at, user (nested object with name and email), and course (nested object with name). Build a revenue chart by grouping transactions by week or month using the created_at date. For complex multi-school Teachable setups or when you need to combine Teachable data with payment processor data from Stripe for comprehensive financial reporting, RapidDev's team can help architect the data pipeline.

Teachable sends webhooks when key events occur: new enrollments, completed purchases, user signups, and course completions. Receiving these in real time lets your Lovable app react immediately — sending a welcome email, updating a CRM, or triggering a custom onboarding flow. Paste this prompt into Lovable's chat: 'Create a Supabase Edge Function at supabase/functions/teachable-webhook/index.ts that receives Teachable webhook POST requests. Teachable does not use HMAC signing — it sends events with an object_key, event, and data payload. Parse the JSON body and handle these events: lesson_completion.new (store in a Supabase lesson_completions table), enrollment.new (store in enrollments table with course_id, student_email, enrolled_at), purchase.new (store in purchases table with amount, course_name, student_email, purchased_at). Return 200 OK for all events.' Deploy your app and note the Edge Function URL: https://[project-ref].supabase.co/functions/v1/teachable-webhook. In your Teachable admin panel, go to Settings → Integrations → Webhooks. Add your Edge Function URL as a webhook endpoint. Select the events you want to receive. Teachable webhook payloads follow the pattern: { object_key: 'enrollment', event: 'enrollment.new', data: { ... } }. The data object structure varies by event type — check Teachable's webhook documentation for the exact fields per event. Note that Teachable's webhook verification is simpler than Stripe's — there is no HMAC signature to verify. You can optionally add your own security by using a secret token as a query parameter in your webhook URL (e.g., ?token=randomSecret) and validating it in your Edge Function.