Jenkins

Jenkins API authentication uses your Jenkins username paired with a user-specific API token — not your Jenkins login password. The API token is separate from your password and can be revoked independently without affecting your ability to log into Jenkins. To generate one, log into your Jenkins web UI and navigate to People > your username > Configure (left sidebar). Scroll down to the 'API Token' section. Click 'Generate'. Jenkins shows you the token value once — copy it immediately and save it in a password manager. The token will not be displayed again after you leave the page. If you lose it, you can generate a new one from the same location. The API token is used in HTTP Basic Auth. Jenkins Basic Auth encodes the username and API token as 'username:apiToken' in base64, then passes it in the Authorization header as 'Basic {base64string}'. Some Jenkins configurations also accept the API token as a Bearer token — check your Jenkins version's documentation, but Basic Auth is universally supported. Important: the API token must have at least 'Read' permissions on jobs you want to poll, and 'Build' permissions on jobs you want to trigger. These permissions are controlled by your Jenkins security realm (Matrix Authorization, Role-Based, etc.) — ask your Jenkins admin if you get 403 responses with the correct token. Do NOT use this API token in FlutterFlow's API Call headers or any Dart code — it must stay in the backend proxy's environment variables.

Jenkins implements Cross-Site Request Forgery (CSRF) protection for all write operations (triggering builds, stopping builds, modifying configurations). This protection requires that any HTTP POST request includes a 'Jenkins-Crumb' header with a value freshly fetched from /crumbIssuer/api/json. If you send a POST to trigger a build without this crumb — or with a stale crumb — Jenkins returns a 403 HTTP response with the message 'No valid crumb was included in the request'. The crumb is fetched with a GET request to https://{your-jenkins-host}/crumbIssuer/api/json using the same Basic Auth credentials. The response is a JSON object with two fields: 'crumbRequestField' (the name of the header to use — usually 'Jenkins-Crumb') and 'crumb' (the value for that header). You then include this header in your subsequent POST request. Crumbs are session-tied: the crumb is linked to the HTTP session established by the GET /crumbIssuer request. If your proxy fetches a fresh crumb and immediately uses it in the same proxy function, the session is consistent and the crumb is valid. Problems arise when the crumb is cached across requests (the session expires) or when the proxy changes the session between the two calls. In FlutterFlow, you cannot chain two API Calls automatically in a Backend Query — you need to use an Action Flow: call the GetCrumb API Call first, store the returned crumb value in a page state variable, then call the TriggerBuild API Call passing the crumb as a variable. The next step shows this Action Flow setup.

Because Jenkins typically lives on a private network (or a VPN-protected server), your FlutterFlow app cannot reach it directly. Even if Jenkins were on a public IP, putting the API token in a FlutterFlow API Call header would ship it in the compiled app binary. The Firebase Cloud Function proxy solves both problems: it sits in the public cloud, holds the Jenkins token in an environment variable, and forwards requests to your Jenkins server. In the Firebase Console, navigate to Functions. If you have not initialized Cloud Functions for your project, do so via the Firebase Console's guided setup. Create a new function (or use the inline editor for simple functions). The function below handles both read (get build status) and write (trigger build) operations in a single endpoint, determined by the 'action' query parameter. Set your Jenkins credentials as Firebase environment variables: JENKINS_URL (the full base URL including protocol, e.g., https://jenkins.yourcompany.com), JENKINS_USER (your username), and JENKINS_TOKEN (the API token). Set these in Firebase Console > Functions > your function > Runtime environment variables, or using Firebase CLI. The function reads them with process.env. For the two-step crumb + trigger flow, the function first calls /crumbIssuer/api/json, extracts the crumb, then immediately calls /job/{name}/build or /buildWithParameters — all within the same server-side request. This ensures the crumb is always fresh and from the correct session.

1// Firebase Cloud Function — Jenkins proxy
2// Environment variables: JENKINS_URL, JENKINS_USER, JENKINS_TOKEN
3
4const functions = require('firebase-functions');
5
6const makeAuth = () => {
7  const creds = Buffer.from(
8    `${process.env.JENKINS_USER}:${process.env.JENKINS_TOKEN}`
9  ).toString('base64');
10  return `Basic ${creds}`;
11};
12
13exports.jenkinsProxy = functions.https.onRequest(async (req, res) => {
14  res.set('Access-Control-Allow-Origin', '*');
15  res.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
16  res.set('Access-Control-Allow-Headers', 'Content-Type');
17  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
18
19  const base = process.env.JENKINS_URL;
20  const auth = makeAuth();
21  const { action, job, params } = req.query;
22
23  try {
24    if (action === 'status') {
25      // Get last build status
26      const r = await fetch(`${base}/job/${job}/lastBuild/api/json`, {
27        headers: { Authorization: auth }
28      });
29      const data = await r.json();
30      res.json({ result: data.result, building: data.building,
31                 number: data.number, duration: data.duration });
32
33    } else if (action === 'trigger') {
34      // Step 1: fetch CSRF crumb
35      const crumbResp = await fetch(`${base}/crumbIssuer/api/json`, {
36        headers: { Authorization: auth }
37      });
38      const { crumbRequestField, crumb } = await crumbResp.json();
39
40      // Step 2: trigger build
41      const endpoint = params
42        ? `/job/${job}/buildWithParameters?${params}`
43        : `/job/${job}/build`;
44      const buildResp = await fetch(`${base}${endpoint}`, {
45        method: 'POST',
46        headers: { Authorization: auth, [crumbRequestField]: crumb }
47      });
48      const location = buildResp.headers.get('Location');
49      res.json({ triggered: buildResp.status === 201, queueUrl: location });
50
51    } else {
52      res.status(400).json({ error: 'Unknown action' });
53    }
54  } catch (err) {
55    res.status(500).json({ error: err.message });
56  }
57});

With the proxy running, open FlutterFlow and click API Calls in the left nav. Click + Add > Create API Group. Name it 'Jenkins CI'. Set the Base URL to your Firebase Cloud Function URL (e.g., https://us-central1-{project}.cloudfunctions.net/jenkinsProxy). Add the header 'Content-Type: application/json'. No Authorization header goes here — the proxy handles Jenkins auth entirely. Create two API Calls inside the group: First call — 'GetBuildStatus': Method = GET. Add a Variable named 'job' (String). Set the endpoint path to '' (empty — your proxy is the endpoint), and add a Query Parameter 'action' with value 'status' and a Query Parameter 'job' with value '{{job}}'. Switch to the Response & Test tab, enter a real Jenkins job name in the 'job' input, and click Test. If the proxy is running correctly, you see a JSON response like: { "result": "SUCCESS", "building": false, "number": 42, "duration": 94321 }. Click Generate JSON Paths to extract $.result, $.building, $.number, and $.duration. Second call — 'TriggerBuild': Method = GET (the proxy converts it to POST internally). Add Variables: 'job' (String) and 'params' (String, optional for parameterized builds). Set Query Parameters: 'action' = 'trigger', 'job' = '{{job}}', 'params' = '{{params}}'. Test with a safe test job. The response should be { "triggered": true, "queueUrl": "..." }. With both calls configured and tested in the Test tab, move on to binding the status call to a widget. Add a Backend Query (not a Live Query, since you control polling timing) on a page that calls GetBuildStatus with the selected job name. Bind $.result to a Text widget and $.building to a Boolean App State variable that drives a loading indicator.

1// FlutterFlow API Call configuration reference
2{
3  "group_name": "Jenkins CI",
4  "base_url": "https://us-central1-{project}.cloudfunctions.net/jenkinsProxy",
5  "headers": { "Content-Type": "application/json" },
6  "calls": [
7    {
8      "name": "GetBuildStatus",
9      "method": "GET",
10      "query_params": { "action": "status", "job": "{{job}}" },
11      "json_paths": {
12        "result": "$.result",
13        "building": "$.building",
14        "buildNumber": "$.number",
15        "duration": "$.duration"
16      }
17    },
18    {
19      "name": "TriggerBuild",
20      "method": "GET",
21      "query_params": { "action": "trigger", "job": "{{job}}", "params": "{{params}}" },
22      "json_paths": {
23        "triggered": "$.triggered",
24        "queueUrl": "$.queueUrl"
25      }
26    }
27  ]
28}

Triggering a Jenkins build is a destructive action — it consumes build minutes and can overwrite a running build. Wire it behind a confirmation dialog in FlutterFlow to prevent accidental taps. Add a Button widget to your page (e.g., 'Trigger Build'). Open the widget's Actions panel and click + Add Action. Choose 'Alert Dialog' as the first action — set the title to 'Trigger Build?' and message to 'This will start a new Jenkins build for the selected job.' with Confirm and Cancel buttons. After the Alert Dialog action (in the 'True' branch, meaning the user clicked Confirm), add an API Request action using TriggerBuild. Pass the page variable holding the selected job name as the 'job' variable. If building a parameterized trigger, pass the branch or environment value as the 'params' variable (formatted as URL query params, e.g., 'BRANCH=main&ENV=staging'). After the TriggerBuild action, add a Show Snack Bar action with the message 'Build triggered successfully!' (conditionally shown only when the response $.triggered field is true). Add another branch for failure ($.triggered is false or the call returned an error) showing an error snack bar. For parameterized builds: Jenkins uses /buildWithParameters rather than /build for jobs with defined parameters. Your proxy handles this by appending the 'params' query string to the correct endpoint. Using /build for a parameterized job silently ignores the parameters — this is a common gotcha that causes builds to run with default values instead of the intended ones. Always check your Jenkins job config to confirm whether it is parameterized. If you want help setting up a more sophisticated Jenkins dashboard with real-time status updates, RapidDev's team builds FlutterFlow backend integrations regularly — free scoping call at rapidevelopers.com/contact.

To create a live status dashboard, you need the build status to update without the user manually refreshing. FlutterFlow offers a few approaches for auto-refreshing API data. Add a ListView to the page for displaying multiple Jenkins jobs. For each job, add a Card containing: a Text widget for the job name, a Text widget bound to $.result (with conditional color: green for SUCCESS, red for FAILURE, orange for UNSTABLE, gray for building or null), a Text widget for the build number (bound to $.number), and a CircularProgressIndicator that shows when $.building is true. For auto-refresh, use FlutterFlow's Timer action: in the page's initState actions (click the page name, go to the Actions tab, add actions for 'On Page Load'), add a Timer action set to repeat every 30 seconds. In the timer's callback, call the GetBuildStatus API Call and update the page state variable holding the status values. This creates a polling dashboard without requiring real-time server infrastructure. For console output (showing error text from a failed build), add a third API Call to the Jenkins CI group: 'GetConsoleOutput', method GET, query params action=console and job={{job}}. Update your proxy to handle action=console by fetching https://{base}/job/{job}/lastBuild/consoleText (Jenkins returns plain text, not JSON). In FlutterFlow, display the response body in a Text widget with a monospace font inside a scrollable Container. Note: Jenkins console output can be large (thousands of lines). In your proxy, slice the last 100 lines before returning to keep the response manageable for a mobile UI.