How to Integrate Bolt.new with Thinkific

Thinkific's API authentication uses two pieces of information: your API key and your school subdomain. Both appear in every API request as request headers (`X-Auth-API-Key` and `X-Auth-Subdomain`), making authentication straightforward compared to OAuth flows. Log into your Thinkific admin at your-school.thinkific.com. Navigate to Settings → API in the left sidebar. If you are on the free plan, API access is available — Thinkific is notable for providing API access across all plans including free. Click 'Generate API Key' to create a new key. Give it a descriptive name like 'Bolt Student Portal' and copy the generated key immediately — Thinkific shows it once. Your subdomain is the prefix of your Thinkific school URL. If your school is at `myschool.thinkific.com`, your subdomain is `myschool`. If you have a custom domain, your subdomain is still the original Thinkific subdomain assigned at signup — check the URL in your Thinkific admin dashboard to find it. Add both values to your .env file. The subdomain is not sensitive (it is visible in any browser visiting your Thinkific school), but the API key must be kept private. Both are needed in the same .env file for your API routes to authenticate successfully. Remember to also add these as environment variables in your deployment platform (Netlify or Bolt Cloud) when you deploy.

1# .env file in your Bolt project root
2# Thinkific API credentials — from Settings → API in Thinkific admin
3THINKIFIC_API_KEY=your_thinkific_api_key_here
4# Your school's subdomain (the part before .thinkific.com)
5THINKIFIC_SUBDOMAIN=your-school-subdomain
6
7# For webhook verification
8THINKIFIC_WEBHOOK_SECRET=your_webhook_secret_here
9
10# Supabase for data storage
11NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
12NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Thinkific's API follows RESTful conventions with consistent authentication. Every request requires two headers: `X-Auth-API-Key: [your_key]` and `X-Auth-Subdomain: [your_subdomain]`. The base URL is `https://api.thinkific.com/api/public/v1`. The key endpoints for building a student portal are: `GET /courses` (all published courses), `GET /courses/{id}` (single course details), `GET /users` (list users, filterable by email), `GET /enrollments` (list enrollments, filterable by user_id or course_id), and `POST /enrollments` (enroll a user in a course). The enrollment POST endpoint accepts a user_id and course_id — it enrolls the user immediately without requiring payment, making it suitable for free courses or paid courses where payment was collected externally. Bolt's WebContainer supports all these API calls as outbound HTTP requests — you can test course listing, user lookup, and enrollment data during development in the preview. Build at least three API routes: one for the course catalog, one for user lookup by email, and one for enrollment data. Structure them clearly with consistent error handling so the frontend can display friendly messages when the API is unavailable or returns unexpected data. For enrollment creation (POST /enrollments), always validate that the user exists in Thinkific before calling the enrollment endpoint. If the user does not exist, create them first using `POST /users` with their email and name. The enrollment endpoint returns the enrollment object including the direct link to start the course.

1// app/api/thinkific/courses/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const THINKIFIC_API_KEY = process.env.THINKIFIC_API_KEY;
5const THINKIFIC_SUBDOMAIN = process.env.THINKIFIC_SUBDOMAIN;
6const THINKIFIC_BASE = 'https://api.thinkific.com/api/public/v1';
7
8const thinkificHeaders = {
9  'X-Auth-API-Key': THINKIFIC_API_KEY!,
10  'X-Auth-Subdomain': THINKIFIC_SUBDOMAIN!,
11  'Content-Type': 'application/json',
12};
13
14export async function GET(request: NextRequest) {
15  if (!THINKIFIC_API_KEY || !THINKIFIC_SUBDOMAIN) {
16    return NextResponse.json({ error: 'Thinkific not configured' }, { status: 500 });
17  }
18
19  const { searchParams } = new URL(request.url);
20  const page = searchParams.get('page') || '1';
21  const limit = searchParams.get('limit') || '25';
22
23  const response = await fetch(
24    `${THINKIFIC_BASE}/courses?page=${page}&limit=${limit}`,
25    { headers: thinkificHeaders }
26  );
27
28  if (!response.ok) {
29    return NextResponse.json(
30      { error: `Thinkific error: ${response.status}` },
31      { status: response.status }
32    );
33  }
34
35  const data = await response.json();
36
37  const courses = (data.items || []).map((c: any) => ({
38    id: c.id,
39    name: c.name,
40    description: c.description,
41    slug: c.slug,
42    price: c.price,
43    isFree: c.is_free,
44    thumbnailUrl: c.course_card_image_url,
45    studentCount: c.students_count,
46    courseUrl: `https://${THINKIFIC_SUBDOMAIN}.thinkific.com/courses/${c.slug}`,
47  }));
48
49  return NextResponse.json({
50    courses,
51    pagination: data.meta?.pagination,
52  });
53}

With API routes returning Thinkific data, build the user-facing course catalog. The catalog page fetches all published courses from `/api/thinkific/courses` and renders them as cards. Each card shows the course name, description excerpt, price (or 'Free'), thumbnail, and an enrollment or checkout button. For free courses, the enrollment flow is: user clicks Enroll → authenticate with Supabase → look up or create their Thinkific user via `/api/thinkific/user` → call `/api/thinkific/enroll` to programmatically enroll them → show success with a link to the course on Thinkific. This all happens within your Bolt app without any Thinkific pages involved. For paid courses, redirect to Thinkific's checkout page: `https://[subdomain].thinkific.com/courses/{slug}/checkout` for direct Thinkific payment, or build a Stripe payment flow in your Bolt app and use the enrollment API after successful payment. The Stripe path gives you more control over the payment experience but requires your Supabase database to track who has paid for what. The student dashboard (for logged-in users) fetches enrollment data from `/api/thinkific/user` to get the Thinkific user ID, then queries `/api/thinkific/enrollments?user_id=[id]` to get all enrolled courses with completion status. Display these as an enrolled courses list with progress indicators and Continue Learning links pointing to the Thinkific course player.

1// app/api/thinkific/enroll/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const THINKIFIC_API_KEY = process.env.THINKIFIC_API_KEY;
5const THINKIFIC_SUBDOMAIN = process.env.THINKIFIC_SUBDOMAIN;
6const THINKIFIC_BASE = 'https://api.thinkific.com/api/public/v1';
7
8export async function POST(request: NextRequest) {
9  if (!THINKIFIC_API_KEY || !THINKIFIC_SUBDOMAIN) {
10    return NextResponse.json({ error: 'Thinkific not configured' }, { status: 500 });
11  }
12
13  const { userId, courseId } = await request.json();
14
15  if (!userId || !courseId) {
16    return NextResponse.json({ error: 'userId and courseId are required' }, { status: 400 });
17  }
18
19  const headers = {
20    'X-Auth-API-Key': THINKIFIC_API_KEY,
21    'X-Auth-Subdomain': THINKIFIC_SUBDOMAIN,
22    'Content-Type': 'application/json',
23  };
24
25  const response = await fetch(`${THINKIFIC_BASE}/enrollments`, {
26    method: 'POST',
27    headers,
28    body: JSON.stringify({
29      user_id: userId,
30      course_id: courseId,
31      activated_at: new Date().toISOString(),
32    }),
33  });
34
35  if (!response.ok) {
36    const error = await response.json();
37    return NextResponse.json(
38      { error: error.error || `Enrollment failed: ${response.status}` },
39      { status: response.status }
40    );
41  }
42
43  const enrollment = await response.json();
44
45  return NextResponse.json({
46    success: true,
47    enrollmentId: enrollment.id,
48    courseUrl: `https://${THINKIFIC_SUBDOMAIN}.thinkific.com/courses/${enrollment.course?.slug}`,
49  });
50}

Thinkific webhooks deliver real-time notifications when students enroll in courses, complete lessons, or earn certificates. Setting up webhook delivery requires a deployed, publicly accessible URL — Bolt's WebContainer cannot receive incoming HTTP requests since it runs entirely in the browser with no public server. Deploy to Netlify or Bolt Cloud first by clicking Publish in Bolt's navigation. After deployment, go to Thinkific admin → Settings → Webhooks (or Apps & Integrations → Webhooks depending on your Thinkific version). Add a new webhook with your deployed URL, such as `https://your-app.netlify.app/api/thinkific/webhook`, and select the events to receive: `enrollment.created`, `enrollment.completed`, and optionally `lesson.completed`. Thinkific includes an HMAC signature in the `X-Thinkific-Hmac-SHA256` request header for webhook verification. Your webhook handler computes the expected HMAC by hashing the raw request body with your webhook secret using SHA-256, then compares it to the header value. This verification ensures the webhook came from Thinkific and not from a malicious third party. For each `enrollment.created` event, store the enrollment in Supabase and trigger a welcome sequence: send a welcome email via SendGrid or Resend, add the student to your email list, and optionally grant access to bonus resources. Respond to Thinkific's webhook with a 200 status quickly (within 10 seconds) — process any slow operations asynchronously after responding to avoid webhook timeout failures.

1// app/api/thinkific/webhook/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { createHmac } from 'crypto';
4import { createClient } from '@supabase/supabase-js';
5
6const WEBHOOK_SECRET = process.env.THINKIFIC_WEBHOOK_SECRET;
7
8const supabase = createClient(
9  process.env.NEXT_PUBLIC_SUPABASE_URL!,
10  process.env.SUPABASE_SERVICE_ROLE_KEY!
11);
12
13export async function POST(request: NextRequest) {
14  const body = await request.text();
15  const signature = request.headers.get('X-Thinkific-Hmac-SHA256');
16
17  // Verify webhook signature
18  if (WEBHOOK_SECRET && signature) {
19    const expectedSig = createHmac('sha256', WEBHOOK_SECRET)
20      .update(body)
21      .digest('base64');
22
23    if (expectedSig !== signature) {
24      console.error('Thinkific webhook signature mismatch');
25      return NextResponse.json({ error: 'Invalid signature' }, { status: 401 });
26    }
27  }
28
29  const payload = JSON.parse(body);
30  const { type, resource } = payload;
31
32  if (type === 'enrollment.created') {
33    const { user, course } = resource;
34
35    await supabase.from('enrollments').upsert({
36      student_email: user?.email,
37      student_name: `${user?.first_name || ''} ${user?.last_name || ''}`.trim(),
38      course_name: course?.name,
39      course_id: course?.id,
40      thinkific_enrollment_id: resource?.id,
41      enrolled_at: new Date().toISOString(),
42      source: 'webhook',
43    }, { onConflict: 'thinkific_enrollment_id' });
44  }
45
46  if (type === 'enrollment.completed') {
47    await supabase
48      .from('enrollments')
49      .update({ completed: true, completed_at: new Date().toISOString() })
50      .eq('thinkific_enrollment_id', resource?.id);
51  }
52
53  return NextResponse.json({ received: true });
54}

With all components built, deploy to Netlify or Bolt Cloud. Click Publish in Bolt's navigation. After deployment, add environment variables to your hosting platform: `THINKIFIC_API_KEY`, `THINKIFIC_SUBDOMAIN`, `THINKIFIC_WEBHOOK_SECRET`, `NEXT_PUBLIC_SUPABASE_URL`, `NEXT_PUBLIC_SUPABASE_ANON_KEY`, and `SUPABASE_SERVICE_ROLE_KEY` (for the webhook handler). Trigger a redeploy after adding all variables. Test the complete flow in this order: first verify the course catalog loads at `/courses` on your deployed URL. Then create a test user in your Bolt app and verify the Thinkific user lookup by email returns a valid Thinkific user ID. Test the free course enrollment flow for an existing free course in your Thinkific school. Finally, verify webhook delivery by making a test enrollment in Thinkific's admin UI (manually enroll a test user from your Thinkific admin) and checking whether the webhook triggers and creates a record in Supabase. For debugging, check Netlify's Function Logs (or Bolt Cloud logs) for any API route errors. Thinkific's webhook settings page shows a delivery history — check the response status for recent webhook deliveries. A 200 response means your handler accepted the webhook; any 4xx or 5xx means a bug in the handler or misconfigured environment variables. For ongoing maintenance, Thinkific's API occasionally adds new fields to responses without breaking changes. Subscribe to Thinkific's developer newsletter or check their API changelog to stay informed of updates that might add useful data to your integration.