Coursera

Before writing any FlutterFlow configuration, you need API credentials from Coursera. The affiliate program is the most accessible entry point. Apply at Coursera's affiliate partner page (search 'Coursera affiliate program' on coursera.org). The application asks about your platform, audience size, and how you plan to promote Coursera courses. If approved, you receive an affiliate ID and affiliate API key that grant read-only access to the course catalog. For the enterprise Partner API (which adds learner progress data and enrollment management), contact Coursera's enterprise sales team through their website. This path requires a Coursera for Business subscription for your organization. You will receive OAuth 2.0 client credentials (client ID and client secret) that allow a client-credentials OAuth flow. While waiting for approval, review Coursera's API documentation (search 'Coursera API documentation' or 'Coursera partner API') to understand the catalog endpoint structure, available filter parameters, and response schemas. Verify the current base URL and endpoint paths in the documentation — do not rely solely on this tutorial for exact URLs, as they can change. Make a note of what data is available at each tier: affiliate access does NOT include individual learner progress data, even for learners who enroll through your affiliate link.

Create a Firebase Cloud Function called `courseraProxy` that accepts catalog query parameters from your FlutterFlow app, injects the Coursera affiliate key or enterprise OAuth bearer token server-side, calls the Coursera API, and returns the response. This keeps your credentials completely off the client device. For the affiliate tier, store the API key in Firebase Functions config: `firebase functions:config:set coursera.key='YOUR_AFFILIATE_KEY'`. For the enterprise tier, store the client ID and client secret and perform the OAuth client-credentials exchange inside the Cloud Function, caching the resulting access token in a Firebase Admin SDK Firestore document (with an `expiresAt` timestamp) to avoid re-exchanging on every request. The Cloud Function checks if the cached token is still valid; if not, it re-exchanges and caches the new token. Add CORS headers to your Cloud Function from the start so it works in FlutterFlow's web preview as well as native builds. Use the `cors` npm package. The function should accept query parameters from FlutterFlow that map to Coursera's catalog filter parameters: `q` (search query), `limit`, `start` (pagination cursor), and any category or skill filters the Coursera API supports.

1// Firebase Cloud Function: functions/index.js (affiliate tier)
2const functions = require('firebase-functions');
3const axios = require('axios');
4const cors = require('cors')({ origin: true });
5
6exports.courseraProxy = functions.https.onRequest((req, res) => {
7  cors(req, res, async () => {
8    const affiliateKey = functions.config().coursera.key;
9    // Verify your Coursera affiliate API endpoint and auth header format
10    // in Coursera's official documentation — these vary by program tier
11    const { q, limit = 20, start = 0 } = req.query;
12
13    try {
14      const response = await axios.get(
15        'https://api.coursera.org/api/courses.v1',
16        {
17          headers: {
18            Authorization: `Bearer ${affiliateKey}`,
19          },
20          params: { q, limit, start },
21        }
22      );
23      return res.json(response.data);
24    } catch (err) {
25      const status = err.response ? err.response.status : 500;
26      return res.status(status).json({ error: err.message });
27    }
28  });
29});
30

In FlutterFlow, click API Calls in the left navigation panel. Click + Add → Create API Group. Name it 'Coursera Catalog'. Set the Base URL to your Firebase Cloud Function's HTTPS URL: `https://us-central1-YOUR_PROJECT.cloudfunctions.net/courseraProxy`. The API Group will have no shared auth headers (the Cloud Function handles auth). Instead, add group-level variables that map to the query parameters your Cloud Function accepts: `searchQuery` (String), `limit` (Integer, default 20), and `start` (Integer, default 0). These will be passed from your FlutterFlow widgets. Create the following API Calls inside the group: - 'SearchCourses': Method GET, no additional endpoint path (the base URL is the Cloud Function), variables `searchQuery`, `limit`, `start`. - 'GetSpecializations': Method GET, add a query param `type=specialization` to filter for Coursera specialization bundles. In the Response & Test tab for SearchCourses, click Test with a search query (make sure your Cloud Function is deployed first). Generate JSON Paths from the response: `$.elements[*].id`, `$.elements[*].name`, `$.elements[*].slug`, `$.elements[*].photoUrl`, `$.elements[*].courseType`. These paths will bind to your discovery GridView.

1// SearchCourses API Call config
2{
3  "name": "SearchCourses",
4  "method": "GET",
5  "endpoint": "",
6  "query_params": {
7    "q": "{{ searchQuery }}",
8    "limit": "{{ limit }}",
9    "start": "{{ start }}"
10  },
11  "variables": [
12    { "name": "searchQuery", "type": "String" },
13    { "name": "limit", "type": "Integer", "default": "20" },
14    { "name": "start", "type": "Integer", "default": "0" }
15  ]
16}
17
18// JSON Paths after generating from Coursera catalog response:
19// Course ID:    $.elements[*].id
20// Course name:  $.elements[*].name
21// Slug:         $.elements[*].slug
22// Photo URL:    $.elements[*].photoUrl
23// Course type:  $.elements[*].courseType
24// Next page:    $.paging.next
25

Add a SearchBar widget at the top of your page, bound to a page state variable `searchQuery`. Below it, add a GridView (or ListView) with its Backend Query set to 'API Call → SearchCourses' from the Coursera Catalog group. Pass the `searchQuery` page state variable as the `searchQuery` API variable. Inside the GridView, add a Card with: a NetworkImage bound to `$.elements[*].photoUrl`, a Text for the course name bound to `$.elements[*].name`, and a Text chip for the course type bound to `$.elements[*].courseType`. For the 'Enroll on Coursera' button, add a Launch URL action. Build the URL using the course slug: `https://www.coursera.org/learn/{{ slug }}` for individual courses, or `https://www.coursera.org/specializations/{{ slug }}` for specializations. If you are a Coursera affiliate, append your affiliate tracking parameters to this URL — check Coursera's affiliate program documentation for the exact tracking parameter format to ensure you receive credit for referred enrollments. Add a 'Load More' button below the GridView that calls SearchCourses with an incremented `start` value and appends the new results to an app state list. This implements pagination correctly without reloading the entire list. Add a search debounce in the SearchBar's Action Flow — trigger the API call 500ms after the user stops typing rather than on every keystroke, to avoid excessive Cloud Function calls.

If you have the Coursera for Business Partner API access, you can display learner progress data in your app — which courses a specific learner has enrolled in, what percentage they have completed, and whether they have earned a certificate. This is the enterprise tier only; affiliate access cannot read individual learner data. In your Cloud Function, implement the OAuth client-credentials exchange. On startup (or when the cached token is expired), POST to Coursera's token endpoint with your client ID and client secret. Store the resulting access token and its `expires_in` value in Firestore. For each subsequent catalog or learner call, retrieve the cached token from Firestore and include it as `Authorization: Bearer {token}` in the Coursera API request. In FlutterFlow, add a 'GetLearnerEnrollments' API Call (proxied through the same Cloud Function) that accepts a `learnerId` variable. The Cloud Function adds the enterprise access token and calls Coursera's Partner API for that learner's enrollments. In the app, gate this view behind your own Firebase Auth login — identify the learner by their Firebase UID, map it to their Coursera learner ID in Firestore, and use that ID for the enrollment query. Remember: learner progress data is available only via the enterprise Partner API and requires a Coursera for Business agreement. Do not present this feature if you only have affiliate access.

1// Enterprise OAuth token exchange in Cloud Function (index.js)
2async function getCourseraEnterpriseToken() {
3  const admin = require('firebase-admin');
4  const db = admin.firestore();
5  const tokenDoc = await db.collection('cache').doc('courseraToken').get();
6
7  if (tokenDoc.exists) {
8    const { token, expiresAt } = tokenDoc.data();
9    if (Date.now() < expiresAt - 300000) { // 5-min buffer
10      return token;
11    }
12  }
13
14  // Re-exchange credentials
15  const clientId = functions.config().coursera.client_id;
16  const clientSecret = functions.config().coursera.client_secret;
17  // Verify the exact token endpoint URL in Coursera's Partner API documentation
18  const response = await axios.post(
19    'https://api.coursera.org/oauth2/client_credentials/token',
20    new URLSearchParams({ grant_type: 'client_credentials' }),
21    {
22      auth: { username: clientId, password: clientSecret },
23      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
24    }
25  );
26
27  const { access_token, expires_in } = response.data;
28  await db.collection('cache').doc('courseraToken').set({
29    token: access_token,
30    expiresAt: Date.now() + expires_in * 1000,
31  });
32  return access_token;
33}
34