WeWeb Firebase Integration: Auth, Firestore, and Manual Setup

In the WeWeb editor, click the gear icon in the left sidebar to open App Settings. Navigate to the 'Custom Code' tab. You will see two injection points: 'Head' and 'Body'. Click the 'Head' section. Paste the Firebase SDK script tags here. Use Firebase v9 compat scripts (CDN) to keep it simple without a build step. After the scripts, add a second script block that initializes Firebase with your project config and exposes the app instance on window for access from workflow JavaScript actions. Click Save. Note: Custom Code in the Head section is injected into every page of your application.

1<!-- Injection point: App Settings → Custom Code → Head -->
2<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
3<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-auth-compat.js"></script>
4<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore-compat.js"></script>
5<script>
6  const firebaseConfig = {
7    apiKey: "YOUR_API_KEY",
8    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
9    projectId: "YOUR_PROJECT_ID",
10    storageBucket: "YOUR_PROJECT_ID.appspot.com",
11    messagingSenderId: "YOUR_SENDER_ID",
12    appId: "YOUR_APP_ID"
13  };
14
15  // Initialize and expose globally for workflow JS actions
16  window.firebaseApp = firebase.initializeApp(firebaseConfig);
17  window.firebaseAuth = firebase.auth();
18  window.firebaseDb = firebase.firestore();
19
20  console.log('Firebase initialized');
21</script>

Open the Plugins panel in the left sidebar. Under 'Authentication', click 'Token-based Auth' and click Add. This plugin handles storing and refreshing authentication tokens for custom auth systems. In the plugin configuration, set the 'Get user endpoint' to the Firebase Auth getAccountInfo endpoint: `https://identitytoolkit.googleapis.com/v1/accounts:lookup?key=YOUR_API_KEY`. Set the 'Token key' field to `idToken` — this tells WeWeb which field in your login response contains the JWT. Set the 'User key' to `users.0` to extract the first user from the Firebase response. Set your 'Unauthenticated redirect page' to your login page. Note: This plugin will handle token storage and automatic injection — but Firebase token refresh (every hour) requires additional JavaScript (covered in Step 5).

Add a Form Container to your login page with email and password inputs and a submit button. Select the button and open the Workflows panel. Add a new workflow triggered 'On click'. Add a 'REST API Request' action. Set Method to POST, URL to `https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=YOUR_API_KEY`, and set the Body to a JSON object binding `email` to `formContainer.formData.email` and `password` to `formContainer.formData.password`, with `returnSecureToken` set to `true`. Add a second action: 'Token-based Auth - Login' — set the Token field to the `idToken` from the previous action's response (use formula: `actions[0].idToken`). Add a third 'Navigate to page' action pointing to your dashboard page. Add an error branch to display a login error message if the REST call fails.

1// REST API Request body (JSON)
2// Set in the Body field of the REST API Request action
3// Injection point: Workflow action body (login page button workflow)
4{
5  "email": "{{formContainer.formData.email}}",
6  "password": "{{formContainer.formData.password}}",
7  "returnSecureToken": true
8}

Open the Data panel and click '+ New'. Select 'REST API'. Configure a Firestore collection. The Firestore REST endpoint pattern is: `https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/YOUR_COLLECTION`. Set Method to GET. For the Authorization header, you need the user's Firebase idToken. Add header `Authorization` with value bound to a formula referencing the auth plugin token: `plugins.token-based-auth['idToken']`. Set Result key to `documents`. Each document in Firestore REST format has a `fields` object with typed values — for example a string field looks like `{ stringValue: 'hello' }`. You will need a formula to extract plain values: use `item.fields.title.stringValue` in your bindings. Name your collection 'firestore-items' and click Save.

1// Firestore REST API collection config (reference)
2// Method: GET
3// URL: https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/items
4// Headers:
5//   Authorization: Bearer {{plugins['token-based-auth'].idToken}}
6// Result key: documents
7
8// To write a document, use a workflow REST API Request action:
9// Method: POST
10// URL: https://firestore.googleapis.com/v1/projects/YOUR_PROJECT_ID/databases/(default)/documents/items
11// Body:
12// {
13//   "fields": {
14//     "title": { "stringValue": "My Item" },
15//     "createdAt": { "timestampValue": "2026-03-30T00:00:00Z" },
16//     "userId": { "stringValue": "{{plugins['token-based-auth'].userId}}" }
17//   }
18// }

Firebase's onAuthStateChanged listener persists the user session across page refreshes — but the Token-based Auth plugin does not automatically hook into it. Create an App-level variable (Data panel → Variables → New → Object type, name it 'firebaseUser', default value null). Add an App-level workflow (Workflows panel → App workflows → New) with trigger 'On app load'. Add a 'Custom JavaScript' action. In the JS editor, register the onAuthStateChanged listener, extract the idToken from the current user, and store both in a window variable for use by other workflows. This ensures that if a user is already logged in (persistent session from a previous visit), WeWeb picks up their auth state.

1// Injection point: App-level workflow → On app load → Custom JavaScript action
2// Purpose: Initialize Firebase auth state listener
3
4return new Promise((resolve) => {
5  window.firebaseAuth.onAuthStateChanged(async (user) => {
6    if (user) {
7      // Get fresh idToken (refreshes automatically if expired)
8      const idToken = await user.getIdToken();
9      window.currentFirebaseUser = {
10        uid: user.uid,
11        email: user.email,
12        displayName: user.displayName,
13        idToken: idToken
14      };
15      // Store in WeWeb variable using the wwLib global
16      if (typeof wwLib !== 'undefined') {
17        wwLib.wwVariable.updateValue('YOUR_FIREBASE_USER_VARIABLE_ID', window.currentFirebaseUser);
18      }
19    } else {
20      window.currentFirebaseUser = null;
21    }
22    resolve({ user: window.currentFirebaseUser });
23  });
24});

Add a sign-out button to your navigation. Select the button and add an 'On click' workflow. Add a 'Custom JavaScript' action that calls window.firebaseAuth.signOut(). Add a second action: 'Token-based Auth - Logout' to clear the stored token from the WeWeb auth plugin. Add a third 'Navigate to page' action pointing to your login page. Also add a 'Change variable value' action to reset your firebaseUser variable to null. Test sign-out by clicking the button and confirming the user is redirected to the login page and the auth token is cleared.

1// Injection point: Button click workflow → Custom JavaScript action (sign-out)
2await window.firebaseAuth.signOut();
3// Next workflow step: Token-based Auth - Logout action
4// Next workflow step: Navigate to login page
5return { success: true };

Go to the Pages panel and select a page that should be private. Open Page settings (gear icon when page is selected). Find the 'Access control' section. Set 'Access' to 'Only authenticated users' — this uses the Token-based Auth plugin to check if a valid token exists. Set the redirect page for unauthenticated users to your login page. Important security caveat: this page restriction is frontend-only. A user who bypasses JavaScript can still access the page URL. True security for your data must be enforced in Firebase Security Rules. In the Firebase Console → Firestore → Rules, ensure all private collections require `request.auth != null`.