7.2.1 • Public • Published

Firebase plugin from Smartface

NPM Twitter: @Smartface_io License

Firebase plugin

As a plugin, this plugin only works when published. Will not perform any action with regular run-on-device scenarios. Firebase gives you the tools to develop high-quality apps, grow your user base, and earn more money. We cover the essentials so you can monetize your business and focus on your users.

Migration Notice

If your project already has firebase plugin version 6, there are small changes to take care of after migrating to version 7.

Together with version 7.0.0, the module is refactored using TypeScript. There are a few changes to take note of:

  • The file imports have been changed. The following changes are:
    1. firebaseAnalytics -> Analytics
    2. firebaseApp -> App
    3. firebaseAuth -> Auth
    4. firebaseCrashlytics -> Crashlytics
    5. firebaseMessaging -> Messaging
    6. firebaseUser -> User

Since the file structure is changed, the file imports have been changed as well.

Old Usage:

import Firebase from '@smartface/plugin-firebase';
import Crashlytics from '@smartface/plugin-firebase/firebaseCrashlytics';
import Analytics from '@smartface/plugin-firebase/firebaseAnalytics';

New Usage:

import Firebase, { Crashlytics, Analytics } from '@smartface/plugin-firebase';

Other usages and functionalities are kept the same. You can use the other parts without changing anything.


Smartface Firebase plugin can be installed via npm easily from our public npm repository. The installation is pretty easy via Smartface Cloud IDE.

  • Run command in terminal on script directory yarn add @smartface/firebase


Some plugin configurations are automatically updated by the plugin itself, some need extra actions. Configurations are needed only once within the plugin installation.


You can manually access the Firebaseios.zip file from the link below.


Sample link:


Step 1

Download GoogleService-Info.plist from Firebase console and placed this file into workspace's assets directory.

Step 2

This step is automatically configured by postinstall script. It is advised to double check on your project.

Add firebase plugin to config/project.json.

"firebaseios": {
  "path": "plugins/iOS/firebaseios.zip",
  "active": true,
  "crashlytics": true


Unlike iOS, firebase plugin on Android needs to be built. Please follow this steps to enable Smartface to automatically build the plugin.

Step 1

Download google-services.json from Firebase console

Step 2

This step is automatically configured by postinstall script. It is advised to double check on your project.

  • Place google-services.json file into ~/workspace/config/Android
  • This repository contains prepared android library project under ~/Native/Android directory.
  • Finally, specify firebase plugin library to config/project.json.
"plugins": {
  "modules": {
    "firebaseplugin": {
      "path": "plugins/Android/firebaseplugin",
      "active": true

Step 3

  • Get senderID from firebase and edit config/project.json's senderID ⇒ (senderID = gcm_defaultSenderId )
"googleCloudMessaging": {
  "senderID": "${senderID}"

Step 4

  • Open this lines in config/Android/AndroidManifest.xml file.
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WAKE_LOCK" />

Step 5

  • By default, crashlytic and its ndk is disabled so enable it, apply plugins & specify library project in dependencies.gradle which is located under ~/workspace/config/Android folder. Such as;
apply plugin: 'com.google.firebase.crashlytics'
apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.google.firebase.firebase-perf' //(Optional)
dependencies {
implementation project(":firebaseplugin")
googleServices.disableVersionCheck = true
apply plugin:  'com.google.firebase.firebase-perf' //(Optional)
  • (Optional) Add nativeSymbolUploadEnabled after apply plugin statements. This allows your app to process and upload native symbols to Crashlytics so you can view properly-symbolicated stack traces. Smartface framework contains CPP libraries. To investigate the problems with Smartface professionals, it's recommend.
android {
    buildTypes {
        release {
            firebaseCrashlytics {
                nativeSymbolUploadEnabled true

If nativeSymbolUploadEnabled is true then add this below statement to your build process.

//call after assembling the project. eg ./gradlew app:assembleBUILT_TYPES
> ./gradlew app:uploadCrashlyticsSymbolFile$BUILT_TYPES

API docs

After initializing the Firebase, Firebase APIs can be used.

  • API Docs - You can use intelliSense on Smartface Cloud IDE for better & faster development.
  • Predefined Analytics Events - You can access the values from code via intelliSense on Firebase.analytics.Events


  • Initialize your SDK using the following code snippet: (You must write this code in app.ts)

Firebase has to be initialized before any use.

import Firebase from '@smartface/plugin-firebase';
import File from '@smartface/native/io/file';
import { Crashlytics } from '@smartface/plugin-firebase';
import { AssetsUriScheme } from '@smartface/native/io/path';

const iOSPlistFile = new File({
    path: `${AssetsUriScheme}GoogleService-Info.plist`
const firebaseConfig = {
    iosFile : iOSPlistFile

if (Firebase.apps().length === 0) {
  Crashlytics.ios.with([new Crashlytics()]);


All of the samples assumes that initialization has been completed


import { Analytics } from '@smartface/plugin-firebase';

import Page1Design from 'generated/pages/page1'; // Generated default page on ts workspace

export default class Page1 extends Page1Design {
    constructor () {
    this.onShow = onShow.bind(this, this.onShow.bind(this));
    this.onLoad = onLoad.bind(this, this.onLoad.bind(this));

function onShow(superOnShow) {
      You can use Crashlytics.setUserIdentifier to provide an ID number, token, or hashed value that uniquely     
      identifies the end-user of your application without disclosing or transmitting any of their personal 
      information. This value is displayed right in the FirebaseCrashlytics dashboard.
    // If you would like to take advantage of advanced user identifier features, you can additionally use both:
      Crashlytics allows you to associate arbitrary key/value pairs with your crash reports, which are viewable 
      right from the Crashlytics dashboard. Setting keys are as easy as calling: Crashlytics.setString(key, value) 
      or one of the related methods. Options are:
    FirebaseCrashlytics.setString("keyString", "value");
    FirebaseCrashlytics.setBool("setBool", true);
    FirebaseCrashlytics.setFloat("setFloat", 15.5);
    FirebaseCrashlytics.setInt("setInt", 12);

function onLoad(superOnLoad) {

Push Notifications

import Application from '@smartface/native/application';
import Firebase from '@smartface/plugin-firebase';
 * Init code
Application.on(Application.Events.ReceivedNotification) = (e) => {
    alert("Notification: " + typeof e);
    alert("Notification: " + JSON.stringify(e.remote));

Firebase.messaging.subscribeToTopic("all"); //this triggers register for notifications

For Push Notification details and more samples&usage on Smartface, please refer to this documentation on Smartface Docs:

Push Notification


import Firebase from '@smartface/plugin-firebase';
 * Init code


This project is licensed under the terms of the MIT license. See the LICENSE file. Within the scope of this license, all modifications to the source code, regardless of the fact that it is used commercially or not, shall be committed as a contribution back to this repository.

Package Sidebar


npm i @smartface/plugin-firebase

Weekly Downloads






Unpacked Size

352 kB

Total Files


Last publish


  • sbasbug
  • alnyli07
  • smf
  • furkan.arabaci