undefined

How to Setup Firebase

You might need to use Firebase for the following reasons:

  1. Firebase authentication of users in your app via phone number.
  2. Firebase Cloud Messaging (FCM) push notifications (former GCM).

It might look a bit scary at first. But don’t panic and let's check how to do this right step by step.

Firebase account and project registration

Follow these steps to register your Firebase account and create a Firebase project:

  1. Register a Firebase account at Firebase console . You can use your Google account to authenticate at Firebase.

  2. Click Create a project

    Adding Project in Firebase

    Note: If you have a Google project registered for your mobile app, select it from the Project name dropdown menu.

    You can also edit your Project ID if you need. A unique ID is assigned automatically to each project. This ID is used in publicly visible Firebase features. For example, it will be used in database URLs and in your Firebase Hosting subdomain. If you need to use a specific subdomain, you can change it.

  3. Fill in the fields required (Project name, Project ID, etc.) and click Continue.

    Add a project 1 of 3

    Add a project 2 of 3

  4. Configure Google Analytics for your project and click Create project.

    Add a project 3 of 3

    Then click Continue.

    Click Continue

  5. Select platform for which you need Firebase

    Select platform

Connect Firebase SDK

The Firebase team has developed the convenient tool for integration the Firebase features to your Flutter project. For using this tool just do few steps provided in the guide.

The main steps include:

You can install the Firebase CLI using a method that matches your operating system, experience level, and/or use case. Regardless of how you install the CLI, you have access to the same functionality and the firebase command.

Windows macOS/Linux


After installing the CLI, you must authenticate. Then you can confirm authentication by listing your Firebase projects.

1) Log into Firebase using your Google account by running the following command:

firebase login

This command connects your local machine to Firebase and grants you access to your Firebase projects.

2) Install the FlutterFire CLI by running the following command from any directory:

dart pub global activate flutterfire_cli


Use the FlutterFire CLI to configure your Flutter apps to connect to Firebase.

From your Flutter project directory, run the following command to start the app configuration workflow:

flutterfire configure

The flutterfire configure workflow does the following:

  • Asks you to select the platforms (iOS, Android, Web) supported in your Flutter app. For each selected platform, the FlutterFire CLI creates a new Firebase app in your Firebase project.

    You can select either to use an existing Firebase project or to create a new Firebase project. If you already have apps registered in an existing Firebase project, the FlutterFire CLI will attempt to match them based on your current Flutter project configuration.

  • Creates a Firebase configuration file (firebase_options.dart) and adds it to your lib/ directory.

  • (for Crashlytics or Performance Monitoring on Android) Adds the required product-specific Gradle plugins to your Flutter app.

After this initial running of flutterfire configure, you need to re-run the command any time that you:
     - Start supporting a new platform in your Flutter app.
     - Start using a new Firebase service or product in your Flutter app, especially if you start using sign-in with Google, Crashlytics, Performance Monitoring, or Realtime Database.

Re-running the command ensures that your Flutter app's Firebase configuration is up-to-date and (for Android) automatically adds any required Gradle plugins to your app.

1) From your Flutter project directory, run the following command to install the core plugin:

flutter pub add firebase_core

2) From your Flutter project directory, run the following command to ensure that your Flutter app's Firebase configuration is up-to-date:

flutterfire configure

3) In your lib/main.dart file, import the Firebase core plugin and the configuration file you generated earlier:

import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

4) Also in your lib/main.dart file, initialize Firebase using the DefaultFirebaseOptions object exported by the configuration file:

await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

5) Rebuild your Flutter application:

flutter run

Firebase authentication

This option allows users in your app authenticate themselves via phone number. If you use this method for user authentication, the user receives an SMS with verification code and authenticates via that code in your app.

You need to follow these steps to add Firebase authentication to your Flutter project:

  1. Setup the Firebase console for using Phone auth per every supported platform your project support according this guide.

  2. Install the Firebase UI Auth plugin in your project using next command:

    flutter pub add firebase_ui_auth
  3. Configure the routing of your project for opening needed screens according to the plugin logic:

    MaterialApp(
    routes: {
     // ...other routes
     '/phone': (context) => PhoneInputScreen(
       actions: [
         SMSCodeRequestedAction((context, action, flowKey, phoneNumber) {
           Navigator.of(context).push(
             MaterialPageRoute(
               builder: (context) => SMSCodeInputScreen(
                 flowKey: flowKey,
               ),
             ),
           );
         }),
       ]
     ),
    }
    );
  4. Add the action for listening the auth state changes and using it for the ConnectyCube API requests:

    AuthStateChangeAction<SignedIn>(
    (context, state) {
     state.user?.getIdToken().then((idToken) {
       signInUsingFirebase(
         DefaultFirebaseOptions.currentPlatform.projectId, 
         idToken
       ).then((cubeUser) {
         // the user was successfully signed in
         // start required logic (processing the user, opening screen with chats, etc.)
         Navigator.of(context).popUntil((route) {
           return route.isFirst;
         });
       });
     });
    });

    After it the rout will look similar to the next:

    MaterialApp(
    routes: {
     // ...other routes
     '/phone': (context) => PhoneInputScreen(
       actions: [
         SMSCodeRequestedAction((context, action, flowKey, phoneNumber) {
           Navigator.of(context).push(
             MaterialPageRoute(
               builder: (context) => SMSCodeInputScreen(
                 flowKey: flowKey,
                 actions: [
                   AuthStateChangeAction<SignedIn>(
                     (context, state) {
                       state.user?.getIdToken().then((idToken) {
                         signInUsingFirebase(
                           DefaultFirebaseOptions.currentPlatform.projectId, 
                           idToken
                         ).then((cubeUser) {
                           // the user was successfully signed in
                           // start required logic (processing the user, opening screen with chats, etc.)
                           // in our example we just go to the first screen
                           Navigator.of(context).popUntil((route) {
                             return route.isFirst;
                           });
                         });
                       });
                   })
                 ],
               ),
             ),
           );
         }),
       ]
     ),
    }
    );
  5. Try running a test. Once your user is logged in successfully, you will find him/her in your Dashboard >> Your App >> Users >> Users List section.

User logged in

The simplest method for using the Firebase Phone Auth feature in your Flutter project was provided. It is available the manual user verification without using the firebase_ui_auth plugin too. Use this guide for manual implementation of the Firebase Phone Auth feature.

So now you know how to use Firebase features in your ConnectyCube apps. If you have any difficulties - please let us know via support channel