Step 2 · Connect the Apps

Connect the Apps to Firebase

The download points to the demo project. One command per app folder connects it to your own Firebase project.

15 min

The FlutterFire CLI registers each app in your Firebase project and writes its settings file, lib/firebase_options.dart. Every app already starts Firebase from that file, so there is nothing else to change in the code.

Package names first

Firebase knows each phone app by its package name. Set your own on the previous page before you run FlutterFire. If you change one later, run FlutterFire again for that app.

Install the tools (once)#

npm install -g firebase-tools
firebase login
dart pub global activate flutterfire_cli

firebase login opens the browser. Sign in with the Google account that owns the Firebase project.

Run FlutterFire in each app folder#

Use your project ID (shown in Firebase consoleSettingsGeneral):

cd admin
flutterfire configure --project=your-shop-a1b2c

Repeat in customer, store and driver. When it asks which platforms to support, use the arrow keys and Space to tick these, then Enter:

Folder	Tick these platforms
`admin/`	web only
`customer/`	android, ios, web
`store/`	android, ios, web
`driver/`	android, ios

If it asks to overwrite firebase_options.dart or google-services.json, answer yes.

Firebase configuration file lib/firebase_options.dart generated successfully
with the following Firebase apps:

Platform  Firebase App Id
web       1:123456789012:web:a1b2c3d4e5f6
android   1:123456789012:android:a1b2c3d4e5f6
ios       1:123456789012:ios:a1b2c3d4e5f6

Update the web push settings#

Each website has a small file that shows push notifications while the tab is closed: web/firebase-messaging-sw.js in admin, customer and store. Copy the values from the web block of that app's new lib/firebase_options.dart into it:

web/firebase-messaging-sw.js

firebase.initializeApp({
  apiKey: 'YOUR_WEB_API_KEY',
  appId: 'YOUR_WEB_APP_ID',
  messagingSenderId: 'YOUR_SENDER_ID',
  projectId: 'your-shop-a1b2c',
  authDomain: 'your-shop-a1b2c.firebaseapp.com',
  storageBucket: 'your-shop-a1b2c.firebasestorage.app',
  measurementId: 'YOUR_MEASUREMENT_ID',
});

Check it#

Start the admin panel in Chrome. It should open the login page of your own, empty project:

cd admin
flutter pub get
flutter run -d chrome

\"flutterfire\" is not recognised?

Add Dart's global tools folder to your PATH and open a new terminal. Windows: %LOCALAPPDATA%\Pub\Cache\bin. macOS / Linux: $HOME/.pub-cache/bin.

What FlutterFire changes#

File	What it holds
`lib/firebase_options.dart`	Your project's settings for each platform. Used by `main.dart`. Do not edit it by hand.
`android/app/google-services.json`	Firebase settings for the Android build. The build fails without it.
`ios/Runner/GoogleService-Info.plist`	Firebase settings for iOS (written if you ticked ios).
`firebase.json` (in the app folder)	A record for the CLI.

Two more connections come later

SHA-1 and SHA-256 keys for phone and Google sign-in on Android: SHA Keys.
Google and phone sign-in values for the customer app on iPhone: iPhone release.

Step 2 is done

All four apps now talk to your project. Next is Step 3: open the admin panel, create your super admin and fill in the settings.