How to Integrate Retool with Firebase

To authenticate Retool with Firebase as an admin client, you need a Google service account with Firebase Admin SDK access. Navigate to the Google Cloud Console (console.cloud.google.com) and select your Firebase project from the project picker at the top. Go to IAM & Admin → Service Accounts. Click Create Service Account. Give it a descriptive name like retool-admin or retool-firebase-integration and optionally add a description. Click Create and Continue. On the permissions step, assign the role Firebase Admin SDK Administrator Service Agent — this role grants full Firebase Admin SDK access. Alternatively, you can use the Firebase Admin SDK Access role for a slightly more restricted but still full-admin access. Click Done. The service account now appears in the list. Click the three-dot menu on the new service account and select Manage Keys. Click Add Key → Create new key. Select JSON format and click Create. Google downloads a JSON file to your computer — this file contains the service account credentials including the private key. Store this file securely; you will paste its entire contents into Retool. Never commit this JSON file to version control or share it publicly — it grants full administrative access to your Firebase project.

In Retool, navigate to the Resources tab and click Add Resource. Search for or scroll to Firebase in the resource type list and click it. Give the resource a name like Firebase Production. In the Authentication section, Retool asks for the Firebase service account JSON. Open the downloaded JSON key file in a text editor. Copy the entire JSON content — the full object including the opening and closing curly braces. Paste it into the Service Account Key field in Retool's resource configuration. Retool parses the JSON and displays the project ID and service account email it extracted, confirming the format is correct. If your Firebase project uses a specific database URL for Realtime Database access, enter it in the Database URL field — this is typically https://your-project-id-default-rtdb.firebaseio.com (find it in Firebase Console → Realtime Database). This field is only required if you plan to query the Realtime Database; Firestore and Auth queries work without it. Click Save and Retool tests the connection. A successful connection shows a green Connected status and the Firebase project ID.

Create a new query in the Code panel, select your Firebase resource, and set the Service to Firebase Auth from the service dropdown. Select the Action List users. Set the Max results to 1000 (the maximum Auth allows per page) and leave the Page token blank for the first page. Run the query. The response contains a users array of user records, each with uid, email, displayName, emailVerified, disabled, providerData, creationTime, and lastSignInTime fields. Apply a transformer to flatten and format the user records for a Table component. Create a second query targeting Firebase Auth with Action Get user — reference {{ table1.selectedRow.uid }} as the UID to fetch detailed information about a selected user. Create a third query with Action Update user to modify user properties. Set the UID to {{ table1.selectedRow.uid }} and set Disabled to {{ disableToggle.value }} to let operators toggle account status. Wire this query to a Toggle component or a button's onClick event handler. For the delete action, create a fourth query with Action Delete user and require a confirmation modal before executing — accidental user deletions in Firebase Auth are not reversible without a backup.

1// Firebase Auth transformer — flatten user records for Table binding
2const users = data.users || [];
3return users.map(user => ({
4  uid: user.uid,
5  email: user.email || '(no email)',
6  display_name: user.displayName || '',
7  email_verified: user.emailVerified ? 'Yes' : 'No',
8  status: user.disabled ? 'Disabled' : 'Active',
9  provider: (user.providerData || []).map(p => p.providerId).join(', ') || 'unknown',
10  created: user.metadata?.creationTime
11    ? new Date(user.metadata.creationTime).toLocaleDateString()
12    : '',
13  last_sign_in: user.metadata?.lastSignInTime
14    ? new Date(user.metadata.lastSignInTime).toLocaleDateString()
15    : 'Never'
16}));

Create a new query, select your Firebase resource, and set the Service to Firestore. Select the Action Get collection. In the Collection path field, enter the name of your Firestore collection (e.g., users, posts, or orders). Firestore also supports subcollections — enter the full path like users/userId/orders. Optionally, add Filter conditions in the query editor to filter documents: set a field name (e.g., status), operator (e.g., ==), and value (e.g., pending). You can add multiple filter conditions. Run the query. Firestore returns an array of documents, each with an id field and the document's field values merged at the top level — unlike raw Firestore SDK responses, Retool's connector flattens document data for you. Apply a transformer to format date fields (Firestore Timestamps are returned as objects with seconds and nanoseconds) and any nested objects. For write operations, create a separate query with Action Update document, set the Document path to the full document path (e.g., users/{{ table1.selectedRow.id }}), and provide the updated fields as a JSON object. For creating new documents, use Action Create document and either specify a document ID or leave it blank for Firestore to auto-generate one.

1// Firestore transformer — format timestamps and flatten nested fields
2const docs = data || [];
3return docs.map(doc => ({
4  id: doc.id,
5  // Access document fields directly (Retool flattens them)
6  email: doc.email || '',
7  status: doc.status || '',
8  name: doc.name || doc.displayName || '',
9  // Convert Firestore Timestamps (returned as objects with _seconds)
10  created_at: doc.createdAt?._seconds
11    ? new Date(doc.createdAt._seconds * 1000).toLocaleDateString()
12    : doc.createdAt || '',
13  updated_at: doc.updatedAt?._seconds
14    ? new Date(doc.updatedAt._seconds * 1000).toLocaleDateString()
15    : doc.updatedAt || ''
16}));

Combine Firebase Auth and Firestore queries into a unified user management panel. The panel has three sections: a search bar at the top, a user list table in the center, and a user detail panel on the right. The search bar filters users by email using a JavaScript query that calls the Get user by email action from Firebase Auth. The main table shows Auth user data from the listUsers query. When a user row is selected, a second Firestore query runs using {{ table1.selectedRow.uid }} as the document path to fetch the user's Firestore profile document — this shows application-level data like subscription status, usage statistics, or onboarding completion. The detail panel on the right shows a Form with the user's profile data and a Save Changes button that triggers an Update document Firestore query. Add action buttons in the Table toolbar for Disable Account (Firebase Auth Update user with disabled: true) and Delete Account (with a Confirm modal). Configure event handlers on the disable and delete queries to refresh the user list and show success notifications. This pattern — Auth for identity management combined with Firestore for profile data — covers the most common Firebase admin use case. For teams building complex Firebase admin tooling across multiple collections with custom business logic, RapidDev's team can help architect the full Retool solution.