Google Docs

Open the Google Cloud Console at console.cloud.google.com and select your Firebase project from the project dropdown at the top. In the search bar, type 'Google Docs API' and click on it, then click 'Enable'. This activates the Docs API for your project — it's one click and takes about 30 seconds. Next, create a Service Account: in the left sidebar, navigate to IAM & Admin → Service Accounts → + Create Service Account. Give it a descriptive name like 'flutterflow-docs-reader'. Skip the optional role assignment steps for now (you don't need project-level IAM roles just to read shared Docs). Click Done. On the Service Accounts list, click your new service account, go to the Keys tab, click Add Key → Create new key → JSON → Create. A JSON file downloads to your computer — this is your Service Account key file. It contains the private key needed to sign JWTs. Store this file securely and never commit it to a Git repository or put it in your FlutterFlow project. You'll add it to your Cloud Function as an environment variable or Firebase Functions config. Note the service account's email address — it looks like `flutterflow-docs-reader@your-project.iam.gserviceaccount.com`. You'll need this in the next step to share the Google Doc.

This step is where most developers get stuck — and it causes a 403 'The caller does not have permission' error that looks like an auth failure but is actually a sharing problem. Open the Google Doc you want the app to read. Click the 'Share' button in the top-right corner. In the 'Add people and groups' field, paste your Service Account's email address (e.g., `flutterflow-docs-reader@your-project.iam.gserviceaccount.com`). Set the permission to 'Viewer' for read-only access, or 'Editor' if the app will also write back to the document. Click 'Send' (Google won't actually send an email to a service account, but this is the correct flow). The Google Doc's ID is in its URL: `docs.google.com/document/d/DOCUMENT-ID/edit`. Copy this ID — it's a long string of letters and numbers. You'll pass this to the Cloud Function to specify which document to read. For a terms-of-service or privacy-policy document that should be readable by any user of the app (not per-user auth), this service account sharing approach is the right one. The function reads the document on behalf of the service account, not on behalf of the end user — this is intentional. For user-specific documents (where a logged-in user wants to read their own Google Docs), you'd need OAuth 2.0 user flow, which is significantly more complex and should be a separate architecture conversation.

Your Cloud Function does three things: (1) authenticates with Google using the Service Account JSON key, (2) calls the Docs API to fetch the document, and (3) parses the `body.content[]` structural tree into plain text strings that FlutterFlow widgets can render. Store the Service Account JSON key in Firebase Functions config to keep it out of source code: in the Firebase CLI, run `firebase functions:config:set gdocs.service_account_json='ESCAPED_JSON_HERE'`. Alternatively, for a simpler local setup during development, place the JSON file in your functions/ directory and reference it by path — but always add it to .gitignore. The googleapis Node.js package (available in Cloud Functions by adding `"googleapis": "^120.0.0"` to your functions/package.json) handles the JWT signing and token exchange automatically via `google.auth.GoogleAuth`. You initialize it with the service account credentials and the required scope (`https://www.googleapis.com/auth/documents.readonly`), then call `docs.documents.get` with the document ID. The returned document's `body.content` is an array of structural elements — paragraph, table, inlineObject — each containing textRun elements with the actual text. The parsing function walks this tree and concatenates text strings.

1// Firebase Cloud Function — Google Docs reader
2// functions/index.js
3const functions = require('firebase-functions');
4const { google } = require('googleapis');
5
6// Parse Docs structural JSON to plain text
7function extractText(content) {
8  let text = '';
9  (content || []).forEach(element => {
10    if (element.paragraph) {
11      element.paragraph.elements.forEach(el => {
12        if (el.textRun) text += el.textRun.content;
13      });
14    }
15  });
16  return text;
17}
18
19exports.getGoogleDoc = functions.https.onRequest(async (req, res) => {
20  res.set('Access-Control-Allow-Origin', '*');
21  res.set('Access-Control-Allow-Methods', 'GET, OPTIONS');
22  res.set('Access-Control-Allow-Headers', 'Content-Type');
23  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
24
25  const docId = req.query.docId;
26  if (!docId) { res.status(400).json({ error: 'docId query param required' }); return; }
27
28  try {
29    // Auth with Service Account (key stored in functions config)
30    const credentials = JSON.parse(
31      functions.config().gdocs.service_account_json
32    );
33    const auth = new google.auth.GoogleAuth({
34      credentials,
35      scopes: ['https://www.googleapis.com/auth/documents.readonly']
36    });
37
38    const docs = google.docs({ version: 'v1', auth });
39    const response = await docs.documents.get({ documentId: docId });
40    const doc = response.data;
41
42    const plainText = extractText(doc.body.content);
43    const title = doc.title || '';
44    const revisionId = doc.revisionId || '';
45
46    res.status(200).json({ title, text: plainText, revisionId });
47  } catch (err) {
48    res.status(500).json({ error: err.message });
49  }
50});

In FlutterFlow, click 'API Calls' in the left navigation panel. Click '+ Add' → 'Create API Group'. Name the group 'GoogleDocs'. Set the Base URL to your Cloud Function's HTTPS trigger URL (e.g., `https://us-central1-your-project.cloudfunctions.net/getGoogleDoc`). No group-level headers are needed — the function handles Google auth internally. Click '+ Add API Call'. Name it 'Get Document'. Set the Method to GET. In the Variables tab, click '+ Add Variable' and name it `docId` with a default value set to your primary document's ID. In the API Call URL field, append `?docId={{ docId }}` to pass the document ID as a query parameter — this lets you reuse the same API Call for multiple documents by changing the variable value at runtime. Click 'Response & Test'. Paste a sample response like `{"title": "Terms of Service", "text": "Section 1: Introduction...\nSection 2: ...", "revisionId": "XXXXX"}`. Click 'Generate JSON Paths' — FlutterFlow creates `$.title`, `$.text`, and `$.revisionId` as bindable paths. Click 'Test API Call' with your document ID to verify the live response. For a document selector (where the user picks which doc to open), store document IDs and names in Firestore or an App Value list. Pass the selected document ID as a page parameter to the document viewer screen, which then uses it as the `docId` variable in the API Call.

On your document viewer screen in FlutterFlow, add a Column widget as the page body. At the top, add a Text widget for the document title — in its value binding, select the 'Get Document' API Call's `$.title` path. Below the title, add a Text widget for the main content — bind it to `$.text`. For better readability, configure the content Text widget with `softWrap: true`, a reasonable font size (14-16sp), and generous line spacing (1.5). Wrap the Text in a SingleChildScrollView (use the 'Listview' or a scrollable Column in FlutterFlow) so long documents are scrollable without needing a fixed height. For a backend query setup: in the Page's Backend Query panel, set the query type to 'API Call' and select 'Get Document'. FlutterFlow will load the document when the screen opens. If you passed the docId as a page parameter, set the API Call variable `docId` to reference the page parameter. For write-back — letting users send edits back to the Google Doc — add a second Cloud Function export (or handle PUT requests in the same function). The write function accepts a `requests` array in the POST body and calls `docs.documents.batchUpdate`. In FlutterFlow, add a TextField for the user's edit, a Save button, and an API Call action on the button's On Tap event that sends the text change. Keep write operations in a dedicated button flow rather than autosaving — the 60 writes/minute limit can be hit if you save on every keystroke. For apps where you'd rather not build write-back, a simpler pattern is to let the Service Account read a Doc that admins edit directly in Google Docs — the app always shows the latest saved version, with the editing flow staying entirely in Google's interface.