How to Integrate Lovable with Moodle

Before storing credentials in Lovable, you need to enable Moodle's Web Services feature and create a token for API access. This is done entirely in your Moodle admin panel. Log in to your Moodle site as an administrator. Go to Site Administration (the cog icon or Administration menu). Navigate to Advanced Features. Find the 'Enable web services' toggle and turn it on. Click 'Save changes'. Next, enable the REST protocol. Go to Site Administration → Plugins → Web services → Manage protocols. Find 'REST protocol' in the list and click the eye icon to enable it. This activates the /webservice/rest/server.php endpoint. Now create a web service. Go to Site Administration → Plugins → Web services → External services. Click 'Add'. Name it (e.g., 'Lovable Integration'). Enable it. Under 'Functions', click the service you just created, then 'Add functions'. Add the functions your app needs — common ones include: core_course_get_courses, core_enrol_get_users_courses, core_enrol_get_enrolled_users, gradereport_user_get_grade_items, mod_assign_get_assignments, mod_assign_get_submissions, core_user_get_users. Save. Finally, create a token. Go to Site Administration → Plugins → Web services → Manage tokens. Click 'Add'. Select the user whose permissions the API calls will use (typically an admin account or a dedicated service user). Select the web service you just created. Optionally set an expiry date. Click 'Save changes'. The token is now shown in the token list — copy it. Note: The token inherits the permissions of the user you selected. Use a dedicated service account user with only the permissions needed for your integration — not your personal admin account.

With your Moodle token and site URL ready, store them in Lovable's Cloud → Secrets panel. These encrypted environment variables are accessible only from Edge Functions and never from client-side code. In Lovable, click the '+' icon at the top of the editor to open the Cloud panel. Click the Secrets tab. Click 'Add new secret' and add the following two secrets: - Name: MOODLE_TOKEN — Value: the web service token you generated in Step 1 (a long alphanumeric string) - Name: MOODLE_URL — Value: the base URL of your Moodle installation, without trailing slash (e.g., https://learn.myschool.edu) The MOODLE_URL should be the root URL of your Moodle site — not the API endpoint path. The Edge Function will construct the full API URL by appending /webservice/rest/server.php. Verify the MOODLE_URL is accessible from the public internet. If your Moodle site is behind a firewall or VPN, the Edge Function (which runs on Deno Deploy's infrastructure) will not be able to reach it. For internal Moodle instances, you may need to whitelist Supabase/Deno Deploy IP ranges in your firewall, or expose a specific API proxy endpoint publicly. Lovable's security system actively prevents approximately 1,200 API keys from being hardcoded in application code per day. Using Cloud → Secrets ensures your Moodle token is encrypted and isolated — it is only readable by Edge Functions via Deno.env.get(), not from any frontend code or GitHub repository.

Now create the Edge Function that proxies Moodle Web Services requests. Moodle's API uses GET requests with query parameters rather than a JSON body — each call includes wstoken (the API token), wsfunction (the Moodle function to call), and moodlewsrestformat=json (to get JSON responses instead of XML). Paste this prompt into Lovable's chat to generate the Edge Function: 'Create a Supabase Edge Function at supabase/functions/moodle-api/index.ts. It should accept a POST request with JSON body { wsfunction: string, params: object }. The function should read MOODLE_TOKEN and MOODLE_URL from Deno.env. Construct a GET request to {MOODLE_URL}/webservice/rest/server.php with query parameters: wstoken={token}, wsfunction={wsfunction}, moodlewsrestformat=json, and all entries from params as additional query parameters. Return the Moodle API response as JSON with CORS headers. Handle Moodle exception responses (which have errorcode field instead of normal data) by returning them as 4xx HTTP responses with the Moodle error message.' Moodle API error responses look like: { exception: 'dml_missing_record_exception', errorcode: 'invalidrecord', message: 'Can not find data record...' }. These still return HTTP 200 from Moodle's server — your Edge Function should check for the exception field and return an appropriate error HTTP status (400 or 404) with the error details. Common Moodle functions and their required parameters: - core_course_get_courses — no required params (returns all courses) - core_enrol_get_users_courses — userid (integer) - core_enrol_get_enrolled_users — courseid (integer) - gradereport_user_get_grade_items — courseid (integer), userid (integer) - mod_assign_get_assignments — courseids[0], courseids[1], etc. - core_user_get_users — criteria[0][key]='email', criteria[0][value]='student@school.edu'

1// supabase/functions/moodle-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 moodleToken = Deno.env.get('MOODLE_TOKEN');
14    const moodleUrl = Deno.env.get('MOODLE_URL');
15
16    if (!moodleToken || !moodleUrl) {
17      return new Response(
18        JSON.stringify({ error: 'Moodle credentials not configured' }),
19        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
20      );
21    }
22
23    const { wsfunction, params = {} } = await req.json();
24
25    if (!wsfunction) {
26      return new Response(
27        JSON.stringify({ error: 'wsfunction is required' }),
28        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
29      );
30    }
31
32    const queryParams = new URLSearchParams({
33      wstoken: moodleToken,
34      wsfunction,
35      moodlewsrestformat: 'json',
36    });
37
38    // Add all additional params
39    for (const [key, value] of Object.entries(params)) {
40      queryParams.set(key, String(value));
41    }
42
43    const apiUrl = `${moodleUrl}/webservice/rest/server.php?${queryParams.toString()}`;
44
45    const response = await fetch(apiUrl, {
46      headers: { 'User-Agent': 'LovableApp/1.0' },
47    });
48
49    const data = await response.json();
50
51    // Moodle returns errors as HTTP 200 with exception field
52    if (data && data.exception) {
53      return new Response(
54        JSON.stringify({ error: data.message, errorcode: data.errorcode }),
55        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
56      );
57    }
58
59    return new Response(JSON.stringify(data), {
60      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
61    });
62  } catch (error) {
63    return new Response(
64      JSON.stringify({ error: error.message }),
65      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
66    );
67  }
68});

With the Edge Function deployed, build the React components that display Moodle data in your Lovable app. The architecture is the same for all Moodle data: call the Edge Function with the desired wsfunction, handle loading and error states, and render the response data. Paste this prompt into Lovable's chat: 'Create a MoodleDashboard React component with two sections: (1) My Courses: call the moodle-api Edge Function with wsfunction core_enrol_get_users_courses and params { userid: currentMoodleUserId } to fetch enrolled courses. Display each course as a card with fullname, shortname, category, and a progress percentage if available from wsfunction core_completion_get_course_completion_status. (2) Recent Grades: call the moodle-api Edge Function with wsfunction gradereport_user_get_grade_items and params { courseid: selectedCourseId, userid: currentMoodleUserId } for the currently selected course. Show grades in a table with item name, grade value, max grade, and percentage. Highlight failing grades (below 50%) in red.' You will need to map your Lovable app's logged-in user to a Moodle user ID. The cleanest way is to store the Moodle user ID in your Supabase user profile table. When a user first connects, call wsfunction core_user_get_users with criteria[0][key]=email and criteria[0][value]={userEmail} to look up their Moodle ID and store it in your profiles table. For the grade display, Moodle returns grades as a graderaw field (raw numeric value), grademin, grademax, and gradeformatted (display string). Use gradeformatted for display as it includes Moodle's configured grade formatting (letter grades, percentages, etc.). For complex Moodle integrations across multiple sites or with custom Moodle plugins, RapidDev's team can help configure the web service functions and data mapping for your specific institutional setup.

Extend the dashboard with assignment tracking — showing upcoming assignments with due dates, submission status, and completion data across courses. This requires calling several Moodle functions in sequence. Paste this prompt into Lovable's chat: 'Add an Upcoming Assignments section to the MoodleDashboard. For each enrolled course, call the moodle-api Edge Function with wsfunction mod_assign_get_assignments and params { courseids[0]: courseId } to get assignments. Filter assignments with duedate greater than the current timestamp. Show them in a timeline view sorted by duedate: assignment name, course shortname, due date, and a status badge showing SUBMITTED, DUE SOON (within 3 days), or UPCOMING. Get submission status by calling wsfunction mod_assign_get_submission_status with params { assignid: assignmentId } for each assignment.' Moodle assignment due dates are Unix timestamps (seconds, not milliseconds). Convert them with new Date(duedate * 1000) before displaying or comparing with the current date. For completion tracking at the course level (useful for showing overall progress), use wsfunction core_completion_get_activities_completion_status with params { courseid: courseId, userid: userId }. This returns a list of all activities in the course and their completion status for the given user. Be mindful of Moodle API call volume. Loading assignments for 10 courses requires 10+ separate API calls. Consider batching course IDs in mod_assign_get_assignments (it accepts multiple courseids) rather than calling it once per course. The function accepts courseids[0], courseids[1], etc. — you can pass up to 10-20 courses in a single call.