Google Search Console

Open console.cloud.google.com and select your Firebase project (they share the same Google Cloud project). In the left navigation, click 'APIs & Services' → 'Library'. Search for 'Google Search Console API' and click Enable. This activates the searchanalytics.query method for your project. Next, click 'APIs & Services' → 'Credentials' → '+ Create Credentials' → 'Service Account'. Give it a name like `gsc-dashboard-reader`. Click 'Create and Continue'. On the role screen, skip adding a project-level role (GSC permissions are granted at the property level, not the Google Cloud project level) and click Done. Now you need to download the key. Click your new service account in the credentials list → 'Keys' tab → 'Add Key' → 'Create New Key' → JSON. Download the JSON file. This file contains a `client_email` field (like `gsc-dashboard-reader@your-project.iam.gserviceaccount.com`) and a `private_key` field. You will need the `client_email` for the next step and will store the entire JSON in Firebase as an environment variable — it must never be pasted into FlutterFlow or committed to a git repository.

The service account has a Google identity (the `client_email` value, which looks like an email address ending in `.iam.gserviceaccount.com`). To read data from your GSC property, this identity must be added as a user on that specific property. Open search.google.com/search-console in your browser. Click 'Settings' in the left sidebar → 'Users and permissions' → '+ Add user'. In the email field, paste the `client_email` from your service account JSON file. Set the permission level to 'Restricted' — this gives read-only access to search analytics data, which is all your Cloud Function needs. Click 'Add'. The service account will now appear in the users list for this property. If you skip this step, the Cloud Function will receive a 403 error from the API: 'User does not have sufficient permission for site'. This is the second most common setup mistake (after putting the key in client code). The service account must be explicitly invited to each GSC property — it does not inherit access from your Google Cloud project's IAM settings.

In FlutterFlow, click 'Custom Code' in the left nav → '+ Add' → 'Cloud Function'. Name it `getSearchConsoleData`. FlutterFlow will scaffold a Node.js function template. Replace the template with the code below, which: (1) authenticates using the service account JSON stored as an environment variable; (2) calls the Search Analytics API with a date range, dimensions, and row limit; (3) returns the data rows to FlutterFlow as JSON. Before deploying, set the environment variable: in Firebase Console → your project → Functions → Configuration (or use the Firebase CLI: `firebase functions:config:set gsc.service_account='...'`). Store the entire service account JSON as a string. In the function code, parse it with `JSON.parse(process.env.GSC_SERVICE_ACCOUNT)`. Deploy the function from FlutterFlow's Custom Code panel by clicking 'Deploy'. Note the deployed function URL — it will look like `https://us-central1-your-project.cloudfunctions.net/getSearchConsoleData`. The function accepts POST requests with a JSON body containing `siteUrl`, `startDate`, `endDate`, and `dimensions` as parameters from FlutterFlow, allowing you to make the query flexible rather than hardcoding the property URL.

1// Firebase Cloud Function: getSearchConsoleData
2// Runtime: Node.js 20
3// File: functions/index.js
4
5const functions = require('firebase-functions');
6const { google } = require('googleapis');
7
8exports.getSearchConsoleData = functions.https.onCall(async (data, context) => {
9  // Optional: require authenticated FlutterFlow user
10  if (!context.auth) {
11    throw new functions.https.HttpsError('unauthenticated', 'Must be signed in.');
12  }
13
14  const { siteUrl, startDate, endDate, dimensions, rowLimit } = data;
15
16  // Parse service account from environment variable
17  const serviceAccountJson = JSON.parse(process.env.GSC_SERVICE_ACCOUNT);
18
19  // Authenticate with Google using the service account
20  const auth = new google.auth.GoogleAuth({
21    credentials: serviceAccountJson,
22    scopes: ['https://www.googleapis.com/auth/webmasters.readonly'],
23  });
24
25  const searchconsole = google.searchconsole({ version: 'v1', auth });
26
27  try {
28    const response = await searchconsole.searchanalytics.query({
29      siteUrl: siteUrl,
30      requestBody: {
31        startDate: startDate,         // e.g. '2026-06-01'
32        endDate: endDate,             // e.g. '2026-06-30'
33        dimensions: dimensions || ['query'], // ['query'], ['page'], ['country'], etc.
34        rowLimit: rowLimit || 25,
35        startRow: 0,
36      },
37    });
38
39    return {
40      success: true,
41      rows: response.data.rows || [],
42      rowCount: (response.data.rows || []).length,
43    };
44  } catch (error) {
45    // Handle quota errors
46    if (error.code === 429) {
47      throw new functions.https.HttpsError(
48        'resource-exhausted',
49        'Search Console API quota exceeded. Retry after a short delay.'
50      );
51    }
52    throw new functions.https.HttpsError('internal', error.message);
53  }
54});

Click 'API Calls' in the FlutterFlow left nav → '+ Add' → 'Create API Group'. Name it 'SearchConsole'. Set the base URL to your deployed Cloud Function URL (e.g., `https://us-central1-your-project.cloudfunctions.net`). Add a call named 'Get Top Queries'. Set the method to POST and the endpoint to `/getSearchConsoleData`. Under Headers, add `Content-Type` = `application/json`. Under Body (JSON), add the following structure with FlutterFlow variables for each parameter. Add these variables in the Variables tab: `siteUrl` (String), `startDate` (String), `endDate` (String). In the Body tab, reference them with `{{siteUrl}}`, `{{startDate}}`, `{{endDate}}`. Under Response & Test, paste a sample response and click 'Get Response Fields' to generate JSON Paths. The path to the rows array is `$.rows`, and within each row: `$.rows[*].keys[0]` for the query/page key, `$.rows[*].clicks`, `$.rows[*].impressions`, `$.rows[*].ctr`, `$.rows[*].position`. If you are using Firebase Authentication in FlutterFlow (which is common), you also need to pass the user's Firebase ID token as an Authorization header: `Authorization: Bearer {{idToken}}`. The Cloud Function's `context.auth` check verifies this token. Add `idToken` as a variable and pass `currentUserData.idToken` from your FlutterFlow authentication state. Test the API Call using your actual property URL and a valid date range to confirm rows return.

1{
2  "siteUrl": "{{siteUrl}}",
3  "startDate": "{{startDate}}",
4  "endDate": "{{endDate}}",
5  "dimensions": ["query"],
6  "rowLimit": 25
7}

Now connect the API Call results to your FlutterFlow UI. Add a Backend Query to a page: select the page, open the Backend Query panel (right side), click '+ Add Query' → 'API Call' → SearchConsole → Get Top Queries. Set the variables: `siteUrl` to your property URL (store it in App Constants or a page variable if you support multiple properties), `startDate` and `endDate` to date strings. Enable 'Single Time Query' for a dashboard that loads once, or 'Query as User Scrolls' for infinite scroll. In the page body, add a ListView widget. Inside it, add a ListTile or Column. Select the ListView and set its 'Generate Dynamic Children' source to the Backend Query → rows array using JSON Path `$.rows`. For each row: add a Text widget for the query keyword (bind to `$.keys[0]`), add another Text for clicks (bind to `$.clicks`), and another for position (bind to `$.position`, formatted to one decimal place). For a chart widget: add FlutterFlow's built-in Bar Chart or Line Chart. Set its data source to the same Backend Query and map impressions or clicks to the Y-axis, using the query key as the X-axis label. Note that GSC data lags by 2-3 days — add a small disclaimer label on the dashboard ('Data is typically available 2-3 days after the date shown') so users do not expect real-time numbers. RapidDev's team builds FlutterFlow SEO dashboards like this every week — if you need custom query filtering or multi-property support, a free scoping call is at rapidevelopers.com/contact.