Moodle

Before FlutterFlow can talk to Moodle, the Web Services system must be switched on inside your Moodle administration panel. Log in to your Moodle site as an administrator and go to Site administration → Server → Web services → Overview. Follow the checklist: enable Web services (step 1), enable the REST protocol (step 2), and create or designate an External service that lists every `wsfunction` your app will call — for example `core_course_get_courses`, `core_user_get_users`, `gradereport_user_get_grade_items`, and `mod_quiz_get_quizzes_by_courses`. Skipping the External service step means every API call returns `accessexception` even with a valid token. Once the External service is configured, go to Site administration → Server → Web services → Manage tokens and create a new token. Associate it with a Moodle user that has the appropriate role (a dedicated service account is best practice — not a real teacher's account). Copy the token string and store it immediately in your Firebase Cloud Function's environment configuration or Supabase secrets vault — NOT in a text file, not in FlutterFlow's App Values, and never in Dart code. This token grants access to everything in the External service; treat it like a database password.

Since the Moodle wstoken cannot be placed in FlutterFlow (it would compile into the app binary), you need a server-side proxy. The simplest path is a Firebase Cloud Function that accepts a `wsfunction` name and any additional parameters from your Flutter app, then injects the `wstoken` and the Moodle base URL before forwarding the request to Moodle and returning the JSON response. Open the Firebase Console, navigate to Functions, and create a new function called `moodleProxy`. Set the `MOODLE_BASE_URL` and `MOODLE_TOKEN` as environment configuration values using the Firebase CLI (`firebase functions:config:set moodle.url='https://your-site/webservice/rest/server.php' moodle.token='your-token'`). The function receives GET or POST requests from your Flutter app, appends the token and `moodlewsrestformat=json` server-side, proxies the call to Moodle, and returns the response. Make sure to authenticate the Cloud Function call using Firebase Auth ID tokens — verify the caller's token in the function before forwarding to Moodle, otherwise your Moodle token is still exposed to unauthenticated requests.

1// Firebase Cloud Function: functions/index.js
2const functions = require('firebase-functions');
3const axios = require('axios');
4
5exports.moodleProxy = functions.https.onCall(async (data, context) => {
6  // Require Firebase Auth
7  if (!context.auth) {
8    throw new functions.https.HttpsError('unauthenticated', 'Login required.');
9  }
10
11  const { wsfunction, params = {} } = data;
12  const moodleUrl = functions.config().moodle.url;
13  const wstoken = functions.config().moodle.token;
14
15  const queryParams = new URLSearchParams({
16    wstoken,
17    wsfunction,
18    moodlewsrestformat: 'json',
19    ...params,
20  });
21
22  try {
23    const response = await axios.get(`${moodleUrl}?${queryParams.toString()}`);
24    // Moodle returns HTTP 200 even on errors — check the body
25    if (response.data && response.data.exception) {
26      throw new functions.https.HttpsError('internal', response.data.message);
27    }
28    return response.data;
29  } catch (err) {
30    throw new functions.https.HttpsError('internal', err.message);
31  }
32});
33

Now configure FlutterFlow to call your Cloud Function proxy. Click API Calls in the left navigation panel, then click the + Add button and choose Create API Group. Name it 'Moodle WS' — or 'Moodle Proxy' if you prefer. Set the Base URL to your Firebase Cloud Function's callable URL, which looks like `https://us-central1-YOUR_PROJECT.cloudfunctions.net/moodleProxy`. If you are using Firebase callable functions (onCall), you will call them differently — see the tip below. Alternatively, if you convert the Cloud Function to an HTTP endpoint (`onRequest`), the base URL becomes the function's HTTPS URL and you send the `wsfunction` as a query parameter. In the API Group, add a shared header for the Firebase Auth ID token: `Authorization: Bearer {{ idToken }}` — you will supply this from the logged-in user's app state. Next, add a shared query parameter: `moodlewsrestformat=json`. This ensures every call in the group gets JSON back without repeating the parameter in each individual API Call configuration. Click Save on the API Group before adding individual calls. The group acts as a container; individual API Calls within it inherit the base URL and shared headers/params, so you only change the `wsfunction` parameter per call.

1// API Group config (conceptual)
2{
3  "name": "Moodle WS",
4  "base_url": "https://us-central1-YOUR_PROJECT.cloudfunctions.net/moodleProxy",
5  "headers": {
6    "Authorization": "Bearer {{ idToken }}"
7  },
8  "query_params": {
9    "moodlewsrestformat": "json"
10  }
11}
12

Inside the 'Moodle WS' API Group, click + Add → Create API Call for each Moodle function you need. The pattern is always the same: Method = GET, endpoint = empty (the base URL is the full path), and add a query parameter `wsfunction` with the function name as either a hard-coded value or a variable if you want to make the call reusable. For the courses call: name it 'GetCourses', set Method to GET, add a query parameter `wsfunction` = `core_course_get_courses`. Click the Variables tab and add any additional Moodle parameters you need — for example `userid` as a variable so you can fetch courses for a specific user. In the Response & Test tab, paste a sample Moodle JSON response and click Generate JSON Paths. FlutterFlow will auto-detect paths like `$[0].id`, `$[0].fullname`, `$[0].summary`, and `$[0].courseimage`. Bind these to your ListView or GridView widgets via a Backend Query or Action. Repeat for every function your app needs: `GetUsers` using `core_user_get_users`, `GetGrades` using `gradereport_user_get_grade_items`. Give each call a descriptive name. The key insight is that FlutterFlow's API Group is a perfect match for Moodle's single-URL API — the group holds the URL, each call only specifies the `wsfunction` and its extra params.

1// Example API Call config for GetCourses
2{
3  "name": "GetCourses",
4  "method": "GET",
5  "endpoint": "",
6  "query_params": {
7    "wsfunction": "core_course_get_courses"
8  },
9  "variables": [
10    { "name": "userid", "type": "integer", "required": false }
11  ]
12}
13
14// JSON Paths to bind after generating from response:
15// Course ID:    $[*].id
16// Course name:  $[*].fullname
17// Summary:      $[*].summary
18// Image URL:    $[*].courseimage
19

With the API Calls configured, open your FlutterFlow canvas and add a ListView (or GridView) widget for the course catalog. Select the widget, open the right-side panel, go to the Backend Query section, and choose 'API Call' → select 'GetCourses' from the 'Moodle WS' group. Pass the logged-in user's ID as the `userid` variable using the 'Authenticated User → UID' app state value (or a Firestore document field that stores the Moodle user ID). For each ListTile inside the ListView, bind Text widgets to the JSON Paths you generated: `$[*].fullname` for the course title and `$[*].summary` for the description. Add a NetworkImage widget bound to `$[*].courseimage` for the course thumbnail. Critically: Moodle returns HTTP 200 even when an error occurs — the body contains `{"exception":"...","errorcode":"accessexception","message":"..."}` instead of course data. FlutterFlow won't flag this as a failure. In your Action Flow (the + button under Actions for the page load or button tap), add a Condition action after the API call: check whether the JSON path `$.errorcode` is not empty. If it has a value, show an error banner widget using conditional visibility rather than rendering the empty ListView. This defensive check prevents a blank white screen from confusing your users when a Moodle token issue silently returns an error.

FlutterFlow's Run mode preview in the browser makes direct HTTP calls from the browser's JavaScript context. If your Firebase Cloud Function does not return correct CORS headers (`Access-Control-Allow-Origin: *` or your specific domain), the browser will block the response and you will see 'XMLHttpRequest error' in the Flutter web console — even though the exact same call works on a native iOS or Android build. To fix this, add CORS headers to your Cloud Function response. If using `onRequest`, set `res.set('Access-Control-Allow-Origin', '*')` before sending the response, and handle the OPTIONS preflight. Firebase provides a `cors` npm package that simplifies this. Once CORS is handled, test the full flow: sign in with Firebase Auth in FlutterFlow's Run mode, confirm the ID token is passed correctly to the Cloud Function, and verify courses appear in the ListView. For the definitive test, build and install a debug APK on an Android device — native builds bypass CORS entirely and give the cleanest signal about whether the Moodle API calls are working. If you encounter 'accessexception' responses, return to Moodle's admin panel and verify the wsfunction is listed in the External service associated with your token.

1// Add CORS to Firebase Cloud Function (index.js)
2const cors = require('cors')({ origin: true });
3
4exports.moodleProxy = functions.https.onRequest((req, res) => {
5  cors(req, res, async () => {
6    // ... rest of proxy logic
7  });
8});
9