How to Integrate Lovable with Thinkific

Before writing any code, store your Thinkific API key and subdomain as encrypted secrets in Lovable. These credentials will be accessed by your Edge Function via Deno.env.get() and will never appear in your frontend code, your GitHub repository, or your chat history. To access the Secrets panel, click the '+' icon at the top of the Lovable editor next to the Preview label. This opens the Cloud panel with tabs for Database, Auth, Storage, Edge Functions, AI, Secrets, Logs, and Usage. Click the Secrets tab. Click 'Add new secret' and add two secrets: - Name: THINKIFIC_API_KEY — Value: your Thinkific API key (a long alphanumeric string found in your Thinkific admin panel under Settings → Code & API → API Key) - Name: THINKIFIC_SUBDOMAIN — Value: your school's subdomain (e.g., if your school URL is myschool.thinkific.com, the subdomain is myschool) To find your API key in Thinkific, log in to your admin panel, click your account name in the top-right corner, go to Settings, then scroll down to the Code & API section. Click 'API' and you will see your API key. Click 'Show' to reveal the full key, then copy it. Critical: Never paste API keys directly into Lovable's chat prompt. On the free tier, chat history is publicly visible, and keys pasted in chat can end up in your Git commit history. Lovable's security system blocks approximately 1,200 hardcoded API keys per day — use the Secrets panel to avoid the risk entirely.

With secrets stored, the next step is creating the Edge Function that will proxy all requests from your Lovable frontend to the Thinkific REST API. This function handles authentication by injecting your API key and subdomain as request headers, routes requests to the correct Thinkific endpoint, and returns the data to your frontend. Paste the following prompt into Lovable's chat to generate the Edge Function: 'Create a Supabase Edge Function at supabase/functions/thinkific-api/index.ts that acts as a proxy to the Thinkific REST API. It should accept a POST request with a JSON body containing: endpoint (e.g., /v1/courses), method (GET/POST/PUT), and optionally body data. The function should read THINKIFIC_API_KEY and THINKIFIC_SUBDOMAIN from environment variables and call https://{subdomain}.thinkific.com/api/public/{endpoint} with the headers: X-Auth-Token (the API key) and X-Auth-Subdomain (the subdomain). Return the Thinkific API response as JSON. Include proper CORS headers so the frontend can call it.' After Lovable generates the Edge Function, open the Code panel and review the generated file at supabase/functions/thinkific-api/index.ts. Verify that the function uses Deno.env.get() to read credentials (not hardcoded values), that CORS headers include the correct origins, and that error responses return meaningful HTTP status codes. The Thinkific API base URL is https://{subdomain}.thinkific.com/api/public — note that it uses /api/public for public/read endpoints and some authenticated endpoints. All requests must include both X-Auth-Token and X-Auth-Subdomain headers. The API follows standard REST conventions: GET for reads, POST for creates, PUT for updates, DELETE for removals.

1// supabase/functions/thinkific-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('THINKIFIC_API_KEY');
14    const subdomain = Deno.env.get('THINKIFIC_SUBDOMAIN');
15
16    if (!apiKey || !subdomain) {
17      return new Response(
18        JSON.stringify({ error: 'Thinkific credentials not configured' }),
19        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
20      );
21    }
22
23    const { endpoint, method = 'GET', body: requestBody } = await req.json();
24
25    const thinkificUrl = `https://${subdomain}.thinkific.com/api/public${endpoint}`;
26
27    const fetchOptions: RequestInit = {
28      method,
29      headers: {
30        'X-Auth-Token': apiKey,
31        'X-Auth-Subdomain': subdomain,
32        'Content-Type': 'application/json',
33      },
34    };
35
36    if (requestBody && method !== 'GET') {
37      fetchOptions.body = JSON.stringify(requestBody);
38    }
39
40    const response = await fetch(thinkificUrl, fetchOptions);
41    const data = await response.json();
42
43    return new Response(JSON.stringify(data), {
44      status: response.status,
45      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
46    });
47  } catch (error) {
48    return new Response(
49      JSON.stringify({ error: error.message }),
50      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
51    );
52  }
53});

With the Edge Function deployed, you can now build the React frontend components that call it. The pattern is straightforward: your React component makes a POST request to the Edge Function URL, passes the desired Thinkific endpoint path, and renders the returned data. Paste this prompt into Lovable's chat to generate a course catalog component: 'Create a React component called ThinkificCourseGrid that fetches all published courses from our Thinkific API Edge Function. Call the Edge Function at /functions/v1/thinkific-api with body { endpoint: "/v1/courses?page=1&limit=25" }. Display the courses in a responsive grid showing: course thumbnail image (course_card_image_url field), course title (name), short description (first 120 characters of description), price (from product.price with currency symbol), and an Enroll button that links to course.slug on your Thinkific school domain. Add a loading skeleton state and an error state. Use Tailwind CSS for styling.' Thinkific's courses endpoint returns a paginated response with items array containing course objects. Key fields to use in your UI: name (course title), description (HTML — strip tags for short preview), course_card_image_url (thumbnail), slug (URL path), product.price (price in cents — divide by 100 for display), and product.hidden (filter these out from public catalog). For enrollment status, you will need to call the /v1/enrollments endpoint filtered by user ID. This requires knowing the Thinkific user ID for the logged-in user, which you can look up via the /v1/users endpoint filtered by email. Consider storing the Thinkific user ID in your Supabase user profile table after the first lookup to avoid repeated API calls. For complex dashboard builds or when you need help mapping Thinkific's API response structure to your custom UI, RapidDev's team can assist with configuring multi-step data flows that combine Thinkific course data with your own Supabase database tables.

Thinkific supports webhooks that fire when key events occur: enrollment creation, enrollment completion, course completion, and payment events. Setting up a webhook receiver in Lovable lets your app react in real time — updating a progress dashboard, sending a congratulations email, or marking a user as qualified in your database — without polling the Thinkific API. First, create a webhook receiver Edge Function in Lovable. Paste this prompt: 'Create a Supabase Edge Function at supabase/functions/thinkific-webhook/index.ts that receives POST requests from Thinkific webhooks. The function should parse the JSON body, check the X-Thinkific-Webhook-Token header against a THINKIFIC_WEBHOOK_TOKEN secret, and handle these event types: learner.enrolled (store enrollment in Supabase enrollments table), learner.completed_lesson (update progress), learner.completed_course (mark as complete and trigger a congratulations action). Return 200 OK for all valid events.' After Lovable generates the function, add a new secret: THINKIFIC_WEBHOOK_TOKEN — set a long random string (you will use this same value in the Thinkific webhook configuration). Deploy your app via the Publish button. Copy the Edge Function URL — it follows the pattern https://[project-ref].supabase.co/functions/v1/thinkific-webhook. In your Thinkific admin panel, go to Settings → Code & API → Webhooks. Click 'Add new Webhook'. Enter your Edge Function URL. Set the Token to the same value you stored as THINKIFIC_WEBHOOK_TOKEN. Select the events you want to receive. Save. Thinkific sends webhooks as POST requests with a JSON body. The X-Thinkific-Webhook-Token header contains the token for verification. Unlike Stripe, Thinkific does not use HMAC signature verification — it uses a simple token match, so store a strong random string and check it carefully in your Edge Function.

The final step is wiring up the enrollment flow so users can enroll in courses directly from your Lovable app rather than being redirected to Thinkific's storefront. Thinkific's enrollment API lets you programmatically create enrollments via POST /v1/enrollments — useful for gating content behind your own authentication, offering discounts through your own pricing logic, or providing B2B bulk enrollment. Paste this prompt into Lovable's chat: 'Add an enrollment flow to my app: when a user clicks the Enroll button on a course card, first check if they are already enrolled by calling the Edge Function with endpoint /v1/enrollments?user_id={thinkific_user_id}&course_id={course_id}. If not enrolled, show a confirmation modal with the course price. On confirmation, call the Edge Function with a POST to /v1/enrollments with body { enrollment: { course_id: X, user_id: Y } } to create the enrollment. Handle free courses (price 0) and paid courses differently — for paid courses, redirect to the Thinkific checkout URL instead of enrolling directly.' For paid course enrollments, Thinkific requires payment to happen through their checkout flow. The programmatic enrollment endpoint (POST /v1/enrollments) only works for free enrollments or when enrolling users as part of a bundle/subscription that has already been paid. For paid one-time courses, generate a checkout URL by constructing: https://{subdomain}.thinkific.com/courses/{course_slug}/take — or use the free enrollment endpoint with a coupon code that makes the course free. Store the Thinkific user ID in your Supabase user profile table after first lookup. This avoids the overhead of looking up the user by email on every enrollment check. Add a column thinkific_user_id to your profiles table and populate it on first login or first course interaction. Make sure your Edge Function handles the case where a Thinkific user account does not exist for the logged-in Lovable user — in that case, you may need to create the user via POST /v1/users before enrolling them.