Teachable

Log in to your Teachable admin panel and go to Settings → API Keys. Click New API Key, give it a descriptive name like 'FlutterFlow App', and click Create Key. Copy the key immediately — Teachable only shows it once. Do not paste it anywhere in FlutterFlow. Instead, open the Firebase Console, go to Functions → Configuration (or use the Firebase CLI), and set the key as a secret: `firebase functions:config:set teachable.key='sk_YOUR_KEY_HERE'`. This stores the key in Firebase's encrypted config, inaccessible to your app's client code. Deploy a simple Cloud Function called `teachableProxy` that accepts a resource path and query parameters from FlutterFlow, injects the Authorization header with your API key server-side, proxies the request to `https://developers.teachable.com/v1/{path}`, and returns the JSON response. Require Firebase Auth on the Cloud Function so that only logged-in users can trigger the proxy — this adds a second layer of protection beyond the Teachable key itself. The API key exposes every student's email, name, and purchase history plus all your revenue figures; treat it like a password to your bank account.

1// Firebase Cloud Function: functions/index.js
2const functions = require('firebase-functions');
3const axios = require('axios');
4const cors = require('cors')({ origin: true });
5
6exports.teachableProxy = functions.https.onRequest((req, res) => {
7  cors(req, res, async () => {
8    const apiKey = functions.config().teachable.key;
9    const { path, ...queryParams } = req.query;
10
11    if (!path) {
12      return res.status(400).json({ error: 'Missing path parameter' });
13    }
14
15    try {
16      const response = await axios.get(
17        `https://developers.teachable.com/v1/${path}`,
18        {
19          headers: { apiKey: apiKey },
20          params: queryParams,
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 the group 'Teachable'. Set the Base URL to your Firebase Cloud Function's HTTPS endpoint, such as `https://us-central1-YOUR_PROJECT.cloudfunctions.net/teachableProxy`. This means your FlutterFlow API Calls will be sending requests to your Cloud Function, which then securely calls Teachable with the real API key. No auth header is needed at the API Group level if your Cloud Function is a public HTTP endpoint that you secure via its own logic. However, if you want an extra layer of verification, add a shared `x-flutter-auth` custom header with a shared secret — but this is optional. Click the Variables tab on the API Group and add a group-level variable `path` of type String to hold the Teachable resource path (e.g., `courses`, `users`, `enrollments`). This variable will be passed as a query parameter to your Cloud Function. Save the API Group. You now have a single, reusable gateway to all Teachable resources.

Inside the 'Teachable' API Group, add individual API Calls for each resource you need. Click + Add → Create API Call. For the course catalog: name the call 'GetCourses', set Method to GET. Add query parameters `path` = `courses`, `page` = `1`, and `per` = `20`. The `page` and `per` parameters are critical — Teachable's API paginates results and will silently return only the first page if you omit them, making it look like you have fewer courses than you do. In the Response & Test tab, click Run Test (once your Cloud Function is deployed and the path is set). Paste a sample Teachable courses JSON response and click Generate JSON Paths. You'll get paths like `$.courses[*].id`, `$.courses[*].name`, `$.courses[*].image_url`, `$.courses[*].description`, `$.courses[*].price`. These are the paths you'll bind to your GridView tile widgets. Repeat for enrollments: create 'GetEnrollments' with `path` = `enrollments` and add a `user_id` variable. Create 'GetOrders' with `path` = `orders` and `date_start`/`date_end` variables for the creator's revenue dashboard. Each call inherits the base URL from the group, so you only need to specify the unique parameters per resource.

1// GetCourses API Call config
2{
3  "name": "GetCourses",
4  "method": "GET",
5  "endpoint": "",
6  "query_params": {
7    "path": "courses",
8    "page": "{{ page }}",
9    "per": "20"
10  },
11  "variables": [
12    { "name": "page", "type": "integer", "default": "1" }
13  ]
14}
15
16// JSON Paths after generating from response:
17// Course ID:          $.courses[*].id
18// Course name:        $.courses[*].name
19// Course image URL:   $.courses[*].image_url
20// Course description: $.courses[*].heading
21// Course price:       $.courses[*].price
22// Total count:        $.meta.total
23

On your canvas, add a GridView widget for the course catalog. In the right panel, set its Backend Query to 'API Call → GetCourses' from the Teachable group. For the initial page, pass `1` as the `page` variable. Inside the GridView, add a Card widget with a NetworkImage (bound to `$.courses[*].image_url`), a Text for the course name (bound to `$.courses[*].name`), a Text for the description (bound to `$.courses[*].heading`), and a Text for the price (bound to `$.courses[*].price`). For pagination, add a 'Load More' button below the GridView. Set its Action to call GetCourses again with `page + 1`, then append the returned courses to an app state variable (a list of JSON objects) that the GridView reads from instead of directly from the backend query. This 'infinite scroll' pattern keeps the UI responsive and avoids loading all pages upfront. For the 'Enroll Now' action on each card, add a Launch URL action that deep-links to `https://YOUR_SCHOOL.teachable.com/p/COURSE_SLUG` — replace the slug with the course's `permalink` field from the API response. Enrollment and payment happen on Teachable's secure checkout, not inside your FlutterFlow app. This is intentional: never recreate a payment flow in a mobile app when the platform already provides one.

For the student enrollment portal, you need to match the logged-in FlutterFlow user to their Teachable record. The cleanest approach: when a student logs in with Firebase Auth, your Cloud Function's proxy can look up the Teachable user by their email address using `GET /v1/users?email=STUDENT_EMAIL`. Store the returned Teachable `user_id` in Firestore under the Firebase UID for fast retrieval on subsequent sessions. With the Teachable user ID stored in Firestore, your FlutterFlow app can call GetEnrollments with that user ID to fetch their enrolled courses. Gate premium content behind an enrollment check: before showing a 'Continue Learning' button, verify that the course ID appears in the user's enrollments list. Use a conditional visibility rule — show the 'Continue Learning' button only when the course ID matches an enrollment, otherwise show the 'Enroll Now' (deep-link to checkout) button. For the creator's revenue dashboard (visible only to an admin user), add a role check: store an `isAdmin` boolean in Firestore for the creator's Firebase UID and check it on the dashboard page using a conditional widget. The GetOrders call populates the revenue chart; use FlutterFlow's Chart widget with the orders data bound to the chart series.