How to Integrate Bolt.new with LearnWorlds

LearnWorlds API authentication is straightforward: every API request includes your API key as the Lw-Client header. There is no OAuth flow, token expiry, or refresh logic to manage. The API key is a static credential tied to your LearnWorlds school account. To get your API key: log into your LearnWorlds school admin panel at your-school.learnworlds.com/admin. Navigate to Settings (gear icon) → API section. Click 'Generate API Key' or copy the existing key. The API key is shown once — if you lose it, generate a new one. Store it as LEARNWORLDS_API_KEY in your Bolt .env file. Also note your school URL: this is the base domain for your API calls. LearnWorlds API endpoints follow the pattern: https://your-school.learnworlds.com/api/v2/courses. Store your school domain as LEARNWORLDS_SCHOOL_URL=https://your-school.learnworlds.com in .env. API rate limits: LearnWorlds limits API calls to prevent abuse. The exact limits depend on your plan, but typical limits are in the hundreds to thousands of requests per hour. For a public-facing portal with many students, implement caching in your API routes to reduce raw API calls. During development in Bolt's WebContainer, all outbound HTTPS calls to your LearnWorlds school domain work correctly. The LearnWorlds API is a standard HTTPS REST API — no TCP sockets, no native libraries, no special network requirements. You can test the full integration including course listing, enrollment creation, and progress retrieval in the Bolt preview without deploying.

1// lib/learnworlds.ts
2const BASE = `${process.env.LEARNWORLDS_SCHOOL_URL}/api/v2`;
3const API_KEY = process.env.LEARNWORLDS_API_KEY!;
4
5export interface LWCourse {
6  id: string;
7  title: string;
8  description: string;
9  image: string;
10  price: number;
11  duration: string;
12  category: string;
13  instructor: { name: string; avatar: string };
14  enrolled_count: number;
15  published: boolean;
16}
17
18export interface LWUser {
19  id: string;
20  email: string;
21  username: string;
22  created_at: string;
23}
24
25export interface LWEnrollment {
26  course_id: string;
27  course_title: string;
28  enrolled_at: string;
29  completed_at: string | null;
30  progress_percent: number;
31  certificate_url: string | null;
32}
33
34async function learnworldsRequest<T>(
35  endpoint: string,
36  options: RequestInit = {}
37): Promise<T> {
38  const res = await fetch(`${BASE}${endpoint}`, {
39    ...options,
40    headers: {
41      'Lw-Client': API_KEY,
42      'Content-Type': 'application/json',
43      Accept: 'application/json',
44      ...options.headers,
45    },
46  });
47  if (!res.ok) {
48    const err = await res.text();
49    throw new Error(`LearnWorlds API error (${res.status}): ${err}`);
50  }
51  return res.json();
52}
53
54export const lw = {
55  getCourses: (params: Record<string, string> = {}) => {
56    const qs = new URLSearchParams(params).toString();
57    return learnworldsRequest<{ data: LWCourse[]; meta: { total: number } }>(
58      `/courses${qs ? '?' + qs : ''}`
59    );
60  },
61  getCourse: (id: string) =>
62    learnworldsRequest<LWCourse>(`/courses/${id}`),
63  getUser: (email: string) =>
64    learnworldsRequest<{ data: LWUser[] }>(`/users?email=${encodeURIComponent(email)}`),
65  createUser: (username: string, email: string, password: string) =>
66    learnworldsRequest<LWUser>('/users', {
67      method: 'POST',
68      body: JSON.stringify({ username, email, password }),
69    }),
70  enrollUser: (userId: string, courseId: string) =>
71    learnworldsRequest(`/users/${userId}/enrollments`, {
72      method: 'POST',
73      body: JSON.stringify({ course_id: courseId }),
74    }),
75  getUserEnrollments: (userId: string) =>
76    learnworldsRequest<{ data: LWEnrollment[] }>(`/users/${userId}/enrollments`),
77};

Create Next.js API routes that expose LearnWorlds data to your React frontend. The course routes handle listing published courses (with optional filtering by category or search term), fetching individual course details with curriculum overview, and checking whether a specific user is enrolled. The enrollment routes handle creating enrollments and retrieving progress data. The course listing route should return only the fields your frontend needs: id, title, description, image, price, duration, category, and enrolled_count. LearnWorlds's full course object contains much more data (full curriculum structure, quiz configurations, etc.) that is not needed for a catalog page. Filter the response to reduce bandwidth. For checking enrollment status: your frontend needs to know whether the logged-in user is already enrolled in each course. This determines whether to show a 'Enroll' button, a 'Continue Learning' button with a progress indicator, or a 'Completed' badge. Query the user's enrollments list and create a Set of enrolled course IDs for O(1) lookup when rendering the course grid. For the progress data: LearnWorlds tracks progress as a percentage (0-100) and records the most recently accessed unit/lesson. The progress endpoint returns this data along with quiz scores and completion timestamps for completed courses. Display progress as a progress bar on the course card for enrolled students. The user lookup flow: when a student logs in to your custom portal, look them up in LearnWorlds by email to get their LearnWorlds user ID. Store the LearnWorlds user ID in your session after login so subsequent API calls can use it directly without repeated email lookups.

1// app/api/courses/route.ts
2import { NextResponse } from 'next/server';
3import { lw } from '@/lib/learnworlds';
4
5export async function GET(request: Request) {
6  try {
7    const { searchParams } = new URL(request.url);
8    const params: Record<string, string> = {};
9
10    const category = searchParams.get('category');
11    const search = searchParams.get('search');
12    const page = searchParams.get('page') ?? '1';
13    const perPage = searchParams.get('per_page') ?? '12';
14
15    if (category) params.category = category;
16    if (search) params.search = search;
17    params.page = page;
18    params.per_page = perPage;
19
20    const result = await lw.getCourses(params);
21
22    // Return lean course objects for catalog display
23    const courses = result.data
24      .filter((c) => c.published)
25      .map((c) => ({
26        id: c.id,
27        title: c.title,
28        description: c.description.substring(0, 200),
29        image: c.image,
30        price: c.price,
31        duration: c.duration,
32        category: c.category,
33        instructor: c.instructor?.name ?? 'Unknown',
34        enrolledCount: c.enrolled_count,
35      }));
36
37    return NextResponse.json({
38      courses,
39      total: result.meta?.total ?? courses.length,
40    });
41  } catch (error: unknown) {
42    const e = error as { message: string };
43    return NextResponse.json({ error: e.message }, { status: 500 });
44  }
45}

With the API routes returning LearnWorlds data, prompt Bolt to build the full learning portal interface. The portal has two distinct experiences: the course catalog for browsing and enrolling, and the student dashboard for tracking progress on enrolled courses. The course catalog page should show courses as cards with the course image, title, instructor name, duration, price, and a category badge. For enrolled students, replace the price with a progress indicator and 'Continue Learning' button. A search bar and category filter panel help students find relevant courses. The student dashboard is the heart of the learning portal: a personalized view showing all enrolled courses with progress percentages, recently accessed courses at the top, completed courses with certificate download links, and a learning streak or statistics widget. Fetch all of this from your /api/users/[email]/enrollments endpoint and render it in a clean dashboard layout. For the course detail page: show the full course description, curriculum outline (sections and lessons), instructor bio, and either an enrollment button (unenrolled) or a 'Start Learning' button that redirects to the LearnWorlds course player with SSO. The curriculum outline can come from the course's sections data — show lesson titles and types (video, text, quiz) without the actual content, which lives in the LearnWorlds player. SSO integration: LearnWorlds supports JWT-based single sign-on for seamless handoff from your custom portal to the LearnWorlds course player. Build a GET /api/courses/[id]/sso-url route that generates a signed JWT containing the user's email and name, then returns the LearnWorlds SSO URL. When a student clicks 'Start Learning', they are redirected through SSO and arrive at the course player already authenticated.

Two key integration points make the custom portal functional: automated enrollment (programmatically adding users to courses) and Single Sign-On (automatically logging users into the LearnWorlds course player without re-entering credentials). For enrollment via API: POST to /api/v2/users/{userId}/enrollments with the course_id. The user must exist in LearnWorlds first — if they do not, create them with POST /api/v2/users. A typical flow for a custom payment system: customer pays via Stripe → your server creates a LearnWorlds user account with their email (if not existing) → enrolls them in the purchased course → sends them a welcome email with a link to your portal. All three steps use the LearnWorlds API and can be tested in the Bolt preview. For SSO: LearnWorlds supports JWT-based SSO via a signed token. Generate a JWT containing the user's LearnWorlds user ID or email, sign it with your LEARNWORLDS_SSO_SECRET, and append it to the SSO URL: https://your-school.learnworlds.com/sso/verify?jwt={token}&redirect_url=/course/{courseId}. The student is automatically logged in and taken to the course. SSO token generation: the JWT payload should include at minimum the user's email (sub field), issued at time (iat), and expiry (exp — set to 5 minutes from now for security). Use the jsonwebtoken package to sign the token with your SSO secret. The SSO secret is configured in LearnWorlds Admin → Settings → Integrations → SSO. Add it to your .env as LEARNWORLDS_SSO_SECRET. For the enrollment route, add protection: only allow enrollment API calls from authenticated users in your portal (check a session token or cookie). Otherwise, anyone could call /api/enrollments and give themselves free access to paid courses.

1// app/api/courses/[id]/sso-url/route.ts
2import { NextResponse } from 'next/server';
3import jwt from 'jsonwebtoken';
4import { lw } from '@/lib/learnworlds';
5
6export async function GET(
7  request: Request,
8  { params }: { params: { id: string } }
9) {
10  try {
11    const { searchParams } = new URL(request.url);
12    const email = searchParams.get('email');
13    if (!email) {
14      return NextResponse.json({ error: 'email is required' }, { status: 400 });
15    }
16
17    // Look up the user's LearnWorlds ID
18    const usersResult = await lw.getUser(email);
19    const user = usersResult.data[0];
20    if (!user) {
21      return NextResponse.json({ error: 'User not found in LearnWorlds' }, { status: 404 });
22    }
23
24    // Generate SSO JWT
25    const token = jwt.sign(
26      { sub: user.id, email: user.email },
27      process.env.LEARNWORLDS_SSO_SECRET!,
28      { expiresIn: '5m', algorithm: 'HS256' }
29    );
30
31    const schoolUrl = process.env.LEARNWORLDS_SCHOOL_URL;
32    const courseId = params.id;
33    const ssoUrl = `${schoolUrl}/sso/verify?jwt=${token}&redirect_url=/course/${courseId}`;
34
35    return NextResponse.json({ ssoUrl });
36  } catch (error: unknown) {
37    const e = error as { message: string };
38    return NextResponse.json({ error: e.message }, { status: 500 });
39  }
40}

Deploy your Bolt app to Netlify for a stable URL, then configure LearnWorlds webhooks to receive real-time notifications when students complete courses, earn certificates, or update their progress. During Bolt WebContainer development, outbound calls to LearnWorlds work fine, but incoming webhook events from LearnWorlds cannot reach the browser-based runtime since it has no public URL. This is a fundamental constraint of the WebContainer architecture — deploy first, test webhooks on Netlify. Deploy via Bolt Settings → Applications → Netlify → Publish. In Netlify Dashboard → Site Settings → Environment Variables, add LEARNWORLDS_SCHOOL_URL, LEARNWORLDS_API_KEY, LEARNWORLDS_SSO_SECRET, and LEARNWORLDS_WEBHOOK_SECRET. Trigger a redeploy. To configure LearnWorlds webhooks: in your LearnWorlds admin panel, navigate to Settings → Integrations → Webhooks. Add a new webhook endpoint pointing to https://your-app.netlify.app/api/webhooks/learnworlds. Select the events you want to receive: user.enrolled, course.completed, certificate.issued, quiz.completed. LearnWorlds signs webhook payloads with an HMAC signature you can verify. Build the webhook handler at app/api/webhooks/learnworlds/route.ts. The course.completed event is the most valuable — it fires when a student completes all course requirements. Use it to trigger downstream actions: send a congratulations email, update your CRM, grant access to advanced content, or mark training as complete in your HR system. For common automation patterns: course.completed → send certificate reminder email; user.enrolled → send course kickoff email with tips; quiz.completed → track score in your analytics; certificate.issued → update employee training records in your HR system.

1# netlify.toml
2[build]
3  command = "npm run build"
4  publish = ".next"
5
6[build.environment]
7  NODE_VERSION = "20"
8
9[[plugins]]
10  package = "@netlify/plugin-nextjs"