Looker

Before writing any code, confirm that your Looker instance has embedding enabled and gather the two credentials you will need. Log in to your Looker instance as an admin and navigate to Admin → Platform → Embed. Turn on 'Enable Embedding' and copy the embed secret that appears — this is a separate value from your API credentials and is used only for signing SSO embed URLs. Do not share this secret anywhere except your Cloud Function environment. Next, navigate to Admin → Users → Your User → Edit API Keys to create an API 4.0 key pair. Copy both the client_id (semi-public identifier) and the client_secret (treat like a password). You now have three values: the embed secret for signing dashboard URLs, and the client_id/client_secret pair for Looker API 4.0 programmatic access. Keep them in a secure note — you will place them only in your Firebase Cloud Function environment variables, never in FlutterFlow. Also note the base URL of your Looker instance, for example https://yourcompany.looker.com, and the numeric ID of the dashboard you want to embed (shown in the Looker URL when you open it: /dashboards/42).

The signed SSO embed URL must be generated server-side because it requires your embed secret. Open your Firebase project in the Firebase Console and navigate to Functions. In FlutterFlow you can author Cloud Functions directly from Custom Code → Cloud Functions, or you can write the function in the Firebase Console emulator. The function receives the FlutterFlow user's ID and any filter values, constructs the Looker SSO embed URL payload (including the user email, group IDs, dashboard path, permissions, and session length), signs it using HMAC-SHA1 with your embed secret, and returns the complete signed URL string. The signing algorithm is precise — Looker's embed secret documentation at developers.looker.com shows the exact field order required. Store your secrets in Firebase Functions config: run firebase functions:config:set looker.embed_secret=VALUE and looker.api_client_id=VALUE. The function should also accept an optional filters parameter so FlutterFlow can pass the authenticated user's attributes (like their organization ID) to scope the Looker dashboard per user. SSO embed URLs are single-use and time-limited — do not cache the returned URL; regenerate it every time the Flutter screen opens.

1// Firebase Cloud Function (Node.js 20) — index.js
2const functions = require('firebase-functions');
3const crypto = require('crypto');
4
5exports.getLookerEmbedUrl = functions.https.onCall(async (data, context) => {
6  // Auth check — only signed-in users
7  if (!context.auth) {
8    throw new functions.https.HttpsError('unauthenticated', 'Must be authenticated');
9  }
10
11  const embedSecret = functions.config().looker.embed_secret;
12  const lookerHost = functions.config().looker.host; // e.g. yourcompany.looker.com
13  const dashboardId = data.dashboardId || '42';
14  const userFilters = data.filters || {};
15
16  // Build the SSO embed URL payload
17  const nonce = Math.random().toString(36).substring(2, 15);
18  const time = Math.floor(Date.now() / 1000);
19  const sessionLength = 3600; // 1 hour
20
21  const embedUser = {
22    external_user_id: context.auth.uid,
23    first_name: data.firstName || 'User',
24    last_name: data.lastName || '',
25    permissions: ['access_data', 'see_lookml_dashboards', 'see_user_dashboards'],
26    models: ['all'],
27    group_ids: [],
28    external_group_id: data.orgId || '',
29    user_attributes: userFilters,
30    access_filters: {}
31  };
32
33  const embedPath = `/embed/dashboards/${dashboardId}`;
34  const params = new URLSearchParams({ nonce, time, session_length: sessionLength });
35
36  // Sign with HMAC-SHA1 using the embed secret
37  const stringToSign = [
38    lookerHost, embedPath, nonce, time, sessionLength,
39    JSON.stringify(embedUser.permissions),
40    JSON.stringify(embedUser.models),
41    JSON.stringify(embedUser.group_ids),
42    embedUser.external_group_id,
43    JSON.stringify(embedUser.user_attributes),
44    JSON.stringify(embedUser.access_filters),
45    embedUser.external_user_id,
46    embedUser.first_name,
47    embedUser.last_name,
48    ''
49  ].join('\n');
50
51  const signature = crypto
52    .createHmac('sha1', embedSecret)
53    .update(stringToSign)
54    .digest('base64');
55
56  const embedUrl = `https://${lookerHost}/login/embed/${encodeURIComponent(embedPath)}?` +
57    `nonce=${encodeURIComponent(nonce)}&time=${time}&session_length=${sessionLength}` +
58    `&external_user_id=${encodeURIComponent(context.auth.uid)}` +
59    `&permissions=${encodeURIComponent(JSON.stringify(embedUser.permissions))}` +
60    `&models=${encodeURIComponent(JSON.stringify(embedUser.models))}` +
61    `&signature=${encodeURIComponent(signature)}`;
62
63  return { embedUrl, expiresAt: time + sessionLength };
64});

Now wire the Cloud Function into FlutterFlow so the app can request a fresh embed URL. In FlutterFlow, open the left nav and click API Calls → + Add → Create API Group. Name it 'Looker' and set the base URL to your Firebase Cloud Function's deployed HTTPS URL (visible in the Firebase Console under Functions → Dashboard, something like https://us-central1-your-project.cloudfunctions.net). Add a single API Call inside this group named 'Get Embed URL'. Set the method to POST. Switch to the Body tab and add a JSON body with variables for dashboardId, orgId, and any filter values you want to pass. In the Headers tab, set Content-Type to application/json. Because this is a Firebase callable function, the actual invocation is slightly different — Firebase Callable Functions expect a specific JSON envelope: the body should be wrapped as {"data": {"dashboardId": "{{dashboardId}}", "orgId": "{{orgId}}"}}. Switch to the Variables tab and add dashboardId (String, required) and orgId (String, optional). After saving, click Response & Test, paste a sample response like {"result": {"embedUrl": "https://yourcompany.looker.com/login/embed/...", "expiresAt": 1720000000}}, and click Generate JSON Paths. The JSON path $.result.embedUrl will let you bind the returned URL to your Custom Widget parameter.

1{
2  "method": "POST",
3  "endpoint": "/getLookerEmbedUrl",
4  "headers": {
5    "Content-Type": "application/json"
6  },
7  "body": {
8    "data": {
9      "dashboardId": "{{dashboardId}}",
10      "orgId": "{{orgId}}"
11    }
12  },
13  "response_json_paths": {
14    "embedUrl": "$.result.embedUrl",
15    "expiresAt": "$.result.expiresAt"
16  }
17}

To display the Looker dashboard inside your FlutterFlow app, you need a Custom Widget that wraps the flutter_inappwebview package — FlutterFlow's built-in WebView widget does not support the auth cookie handling and header injection that Looker's SSO embed requires for reliable operation across platforms. In the left nav, click Custom Code → + Add → Widget. Name it 'LookerDashboard'. In the Pubspec Dependencies field, add flutter_inappwebview with the version specifier ^6.0.0 (or check pub.dev for the latest stable version compatible with your Flutter SDK). Define two parameters: embedUrl (String, required) and height (double, defaults to 600.0). Paste the Dart code below. Once saved, add the widget to a page: drag it from the Component palette onto your canvas. In the widget's Properties panel, set the embedUrl parameter to the output of the 'Get Embed URL' API Call you created (bind it via the backend query result). Set height to match your screen layout. Because a Custom Widget cannot render in the FlutterFlow browser preview, you will see a placeholder box in the canvas — that is expected. Test the actual rendering using Local Run or by downloading the project and running it on a device. The WebView will authenticate the user against Looker automatically using the signed URL and display the dashboard.

1import 'package:flutter/material.dart';
2import 'package:flutter_inappwebview/flutter_inappwebview.dart';
3
4class LookerDashboard extends StatefulWidget {
5  const LookerDashboard({
6    super.key,
7    required this.embedUrl,
8    this.height = 600.0,
9  });
10
11  final String embedUrl;
12  final double height;
13
14  @override
15  State<LookerDashboard> createState() => _LookerDashboardState();
16}
17
18class _LookerDashboardState extends State<LookerDashboard> {
19  InAppWebViewController? _webViewController;
20
21  @override
22  Widget build(BuildContext context) {
23    if (widget.embedUrl.isEmpty) {
24      return SizedBox(
25        height: widget.height,
26        child: const Center(child: CircularProgressIndicator()),
27      );
28    }
29    return SizedBox(
30      height: widget.height,
31      child: InAppWebView(
32        initialUrlRequest: URLRequest(
33          url: WebUri(widget.embedUrl),
34        ),
35        initialSettings: InAppWebViewSettings(
36          javaScriptEnabled: true,
37          domStorageEnabled: true,
38          allowsInlineMediaPlayback: true,
39          mediaPlaybackRequiresUserGesture: false,
40        ),
41        onWebViewCreated: (controller) {
42          _webViewController = controller;
43        },
44        onLoadError: (controller, url, code, message) {
45          debugPrint('Looker WebView error $code: $message');
46        },
47      ),
48    );
49  }
50}

One of the most powerful features of Looker SSO embedding is per-user data scoping: you can pass the FlutterFlow authenticated user's attributes (such as their organization ID, region, or plan tier) as user_attributes into the embed URL, and Looker applies them as automatic row-level filters. To implement this, update your API Call's request body to include the current user's data from FlutterFlow's App State. In the Action Flow that triggers when the Looker screen loads (Widget Lifecycle → On Page Load), add a Backend/API Call action pointing to your 'Get Embed URL' API Call. Expand the variable bindings and set orgId to the value of currentUserDocument.orgId (or whatever field holds the user's organization in your Firestore/Supabase data). Pass this value through the Cloud Function as the external_group_id and as user_attributes entries in the signed payload. On the Looker side, you would have configured LookML user_attribute filters that match these keys — when the user opens the dashboard, Looker automatically restricts rows to match the passed attribute values. For multi-tenant SaaS apps this means each user sees only their organization's data with zero extra LookML work per customer. Finally, store the returned expiresAt timestamp in FlutterFlow App State so you can check it before each subsequent request and proactively refresh the embed URL before the 60-minute SSO session expires.

If you want to display Looker data in native FlutterFlow charts or list widgets instead of the embedded dashboard iframe, you can use Looker API 4.0 via a second Cloud Function. This function handles the full auth handshake: it POSTs your API 4.0 client_id and client_secret to https://yourcompany.looker.com/api/4.0/login, receives a Bearer access token, then calls /api/4.0/queries/{query_id}/run/json (or /run_look/{look_id}/json for saved Looks) and returns the row data. In FlutterFlow, add a new API Call in the Looker group named 'Run Query'. Set the method to POST and the endpoint to your second Cloud Function's URL. The function returns an array of row objects; use a JSON Path like $.rows[*].revenue to extract individual columns. Bind the results to FlutterFlow chart widgets via a Backend Query on the page. This approach gives you a fully native UI while Looker remains the single source of truth for your data logic. Note that API 4.0 access tokens are also time-limited — your Cloud Function should handle token refresh internally rather than caching across requests. If you'd rather skip building the dual-function infrastructure, RapidDev's team sets up FlutterFlow + Looker integrations like this regularly — book a free scoping call at rapidevelopers.com/contact.

1// Second Cloud Function for API 4.0 query results — index.js (add to same file)
2exports.runLookerQuery = functions.https.onCall(async (data, context) => {
3  if (!context.auth) {
4    throw new functions.https.HttpsError('unauthenticated', 'Must be authenticated');
5  }
6
7  const clientId = functions.config().looker.api_client_id;
8  const clientSecret = functions.config().looker.api_client_secret;
9  const lookerHost = functions.config().looker.host;
10  const queryId = data.queryId;
11
12  // Step 1: Get an API 4.0 access token
13  const loginRes = await fetch(`https://${lookerHost}/api/4.0/login`, {
14    method: 'POST',
15    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
16    body: `client_id=${encodeURIComponent(clientId)}&client_secret=${encodeURIComponent(clientSecret)}`
17  });
18  const { access_token } = await loginRes.json();
19
20  // Step 2: Run the query and return rows
21  const queryRes = await fetch(
22    `https://${lookerHost}/api/4.0/queries/${queryId}/run/json`,
23    { headers: { Authorization: `token ${access_token}` } }
24  );
25  const rows = await queryRes.json();
26  return { rows };
27});