Skip to main content

Set up Firebase for your static site

This guide walks you through the shared Firebase setup that any of our use cases relying on Firebase reference (Kanban, blog comments, internal admin tools, multiplayer apps…). You'll create a Firebase project, enable a Firestore database, set up email/password authentication, register a web app, and copy the public credentials your static site needs.

It's the same steps every Firebase-backed Flexweg project starts from — do them once, then your project's tutorial picks up at "apply your project's Firestore security rules" and ".env configuration".

What you'll get​

  • A Firebase project with Firestore Database in production mode
  • Email/password authentication enabled, with a bootstrap admin account
  • A registered web app + the 6 public config values you'll paste into your project's .env

Prerequisites​

  • A Google account (any Gmail address works) to sign in to Firebase.
  • Your project's tutorial open in another tab — at the end of this setup you'll switch back to it to apply security rules and configure the local app.

Step 1 — Open the Firebase console​

On the Firebase home page (once signed in), click Get started by setting up a Firebase project.

Firebase setup — step 1

Step 2 — Name your project​

Enter the name of your project and click Continue.

Firebase setup — step 2

Step 3 — Configure Google Analytics (or skip it)​

You can untick Enable Google Analytics for this project — you don't need it for this setup. Click Create project.

Firebase setup — step 3

Step 4 — Wait for the project to be provisioned​

Once the project is created, you'll see "Your Firebase project is ready". Click Continue.

Firebase setup — step 4

Step 5 — Open the project dashboard​

Once your project is created, you'll see it in the right column (here named "myproject"). Click on it to open the dashboard.

Firebase setup — step 5

Step 6 — Open Firestore Database​

Once on your project dashboard, in the right sidebar select Databases & Storage → Firestore.

Firebase setup — step 6

Step 7 — Create the database (1/4)​

Click Create database.

Firebase setup — step 7

Step 8 — Create the database (2/4)​

You can leave the Database ID field empty. Select Standard Edition, then click Next.

Firebase setup — step 8

Step 9 — Create the database (3/4)​

Select the region for your database, then click Next.

After you set this location, you cannot change it later

Pick the region closest to most of your users — moving the database afterwards requires a manual migration.

Firebase setup — step 9

Step 10 — Create the database (4/4)​

Select Start in production mode, then click Create.

Firebase setup — step 10

No schema or tables to define

Firestore is schemaless — you don't create any collections by hand at this point. The application you're deploying creates the necessary collections automatically the first time it's used. For now, leaving the database empty is normal.

Step 11 — Database dashboard​

Once your database is created, you'll be redirected to its dashboard view.

Firebase setup — step 11

Step 12 — Open Authentication​

In the left sidebar, select Security → Authentication.

Firebase setup — step 12

Step 13 — Set up Authentication (1/4)​

In the Authentication screen, click Get started.

Firebase setup — step 13

Step 14 — Set up Authentication (2/4)​

In the Sign-in method tab, select Email/Password.

Firebase setup — step 14

Step 15 — Set up Authentication (3/4)​

Toggle Enable on the Email/Password row, then click Save.

Firebase setup — step 15

Step 16 — Set up Authentication (4/4)​

You're returned to the Sign-in providers list — Email/Password now shows as Enabled.

Firebase setup — step 16

Step 17 — Add the bootstrap admin user (1/2)​

In the Authentication screen, switch to the Users tab, then click Add user.

Firebase setup — step 17

Step 18 — Add the bootstrap admin user (2/2)​

Enter an email and a password to create the bootstrap administrator. Note both down — most projects use them as:

  • The VITE_ADMIN_EMAIL (or equivalent) value in their .env file
  • The login credentials when first opening the deployed app
  • The reference email inside the project's Firestore security rules (so this account is granted admin privileges)

Firebase setup — step 18

Step 19 — Register a web app and copy your Firebase config​

Your app needs a few public Firebase identifiers (project ID, API key, etc.) to connect to your project from the browser. Generate them by registering a web app:

1. In the Firebase console, click the gear icon (top left) → Project settings.

Step 19 — point 1: open Project settings

2. Scroll down to the Your apps section.

3. Click the </> Web icon to register a new web app.

Step 19 — point 3: register a web app

4. Give it any nickname (e.g. your project's name) and click Register app. Skip the Firebase Hosting setup — Flexweg will host the site.

Step 19 — point 4: name and register the app

5. Firebase displays a code block with a firebaseConfig object. Copy the values — you'll paste them into your project's .env file.

Step 19 — point 5: copy the firebaseConfig values

You now have everything every Firebase-backed Flexweg project needs:

  • 6 public Firebase config values (apiKey, authDomain, projectId, storageBucket, messagingSenderId, appId)
  • The bootstrap admin email and password

Step 20 — Apply your project's Firestore security rules​

The Firebase project is now provisioned, but the database is currently wide open — Firestore started in production mode which denies everything until you publish rules. Every project that uses this Firebase setup ships its own Firestore security rules: an access-control policy that defines who can read or write what.

The rules are project-specific — a Kanban app needs different access patterns than a wiki or a CMS. Head straight to your project's dedicated rules section and paste the ruleset shown there:

Pick your project's rules
  • Kanban / ticket manager — rules for the kanban (tickets, sprints, comments, users with admin/editor roles).
  • Notion-like wiki — rules for the wiki (pages, mentions, per-page sharing).
  • Flexweg CMS — rules for the CMS (posts, terms, media, settings, plugin configs).
Don't forget to replace the bootstrap admin email

Every ruleset contains a placeholder email that pins the bootstrap administrator. It looks like this:

function isBootstrapAdmin() {
  return signedIn() && request.auth.token.email.lower() == "[email protected]";
}

Replace [email protected] with the exact email you used in Step 18 (the user you just created in Firebase Authentication). The comparison is case-insensitive but the value in the rules must be lowercase — the rule applies .lower() to the JWT email before comparing.

If you leave the placeholder in place, nobody can log in as admin — the rules will silently deny every privileged operation, and you'll get cryptic permission-denied errors when the app loads.

After you've published your project's rules, return to that tutorial — the next steps cover the .env configuration and the deploy.

Used by​

Tutorials that build on this setup:

More projects coming soon. If you're writing a new tutorial that uses Firebase, reference this page from your "Step 1 — Set up Firebase" instead of duplicating the screenshots.