Firebase Plugin

Add Google's Firebase for user authentication and access to the Firebase Realtime Database.

Firebase Realtime Database

Store and retrieve user-specific data from the Firebase Realtime Database. Data is synced across all clients in realtime, and remains available when your app goes offline.

Firebase Storage Cloud

Upload binary files to the Firebase Storage Cloud. Uploaded files are then available at a public HTTPS URL.

Firebase User Authentication

Allow your app to know the identity of a user, securely save user data in the cloud and provide the same personalized experience across all of the user's devices.

Overview

The Firebase plugin allows to use the Firebase backend services. FirebaseAuth provides e-mail authentication to create user accounts, log in and log out. You can access the FirebaseDatabase and store and retrieve user-specific data with and without authentication. Use FirebaseStorage to upload binary files to the cloud.

Use Cases

User Authentication

Most apps need to know the identity of a user. Knowing a user's identity allows an app to securely save user data in the cloud and provide the same personalized experience across all of the user's devices.

Firebase Authentication provides backend services to authenticate users to your app. The plugin currently supports authentication using e-mail and passwords. Additionally, Firebase comes with a "forgot password" feature out of the box, which you can easily use in your application without tedious setup.

Support for popular federated identity providers like Google, Facebook and Twitter can be added to the plugin on request. Please contact us for more information.

You can design the login screen completely customized for your app. If you don't want to do that, we've got you covered as well: You can easily create a login page template using our wizard. Just click File -> New File or Project -> V-Play Apps -> Page and in the next step, select Login Page as Page Type.

Realtime Database

Store and sync data with the Firebase NoSQL cloud database. Data is synced across all clients in realtime, and remains available when your app goes offline.

The Firebase Realtime Database is a cloud-hosted database. Data is stored as JSON and internally synchronized in realtime to every connected client.

When you build cross-platform apps with the Realtime Database, all of your clients share one Realtime Database instance. The Firebase backend automatically receives updates with the newest data as soon as the database is changed by one of the clients. Additionally, changes to the database are propagated to other clients and can be read by the clients in real time.

The plugin currently supports reading the Realtime Database using FirebaseDatabase::getValue(). Additionally, you can receive realtime updates for values in your database by adding their keys to the FirebaseDatabase::realtimeValueKeys or FirebaseDatabase::realtimeUserValueKeys.

The Firebase database stores data in JSON format. Firebase and the V-Play Plugin support the primitive data types string, number and boolean. You can structure data using nested objects and arrays.

Retrieve data using a path into the JSON tree. For example, if your database looks like the one in the picture, calling firebaseDb.getValue("public/news") obtains the string "Firebase Plugin is now live".

Additionally, you can query data using an optional second parameter to FirebaseDatabase::getValue(). The parameter is a JSON object specifying which kinds of queries to use. This way, you can filter objects by their keys and values or limit the number of keys to obtain in an object.

To obtain the queried data, you have two options. A callback function can be used as third parameter to FirebaseDatabase::getValue(). You can also connect to the FirebaseDatabase::readCompleted signal. Both of these options get called when the data has been retrieved.

For example, the following code obtains the database object at the path "public/bigqueryobject". The query returns only keys alphabetically between "c" and "m" and limits the object to contain at most 5 keys.

 //use query parameter:
 firebaseDb.getValue("public/bigqueryobject", {
                       orderByKey: true,  //order by key before limiting
                       startAt: "c",      //return only keys alphabetically after "c"
                       endAt: "m",        //return only keys alphabetically before "m"
                       limitToFirst: 5,   //return only first 5 sub-keys
                     }, function(success, key, value) {
                       if(success) {
                         console.debug("Read user value for key", key, "from DB:", value)
                       }
                     })

For more information about querying data, see the documentation of FirebaseDatabase::getValue() and the official Firebase docs.

Realtime Database vs. V-Play WebStorage

V-Play also comes with its own easy to use WebStorage, which connects to the V-Play backend. It is a simple key-value store which syncs across different devices and platforms via the V-Play Game Network Backend as a Service (BaaS).

So what's the difference?

V-Play WebStorage has many advantages compared to Firebase:

  • All platforms: V-Play WebStorage works not only on iOS & Android, but on all supported V-Play platforms. This also includes Desktop and embedded systems.
  • No authentication required: With V-Play WebStorage, you can access per-user data without your users having to log in.
  • Late authentication: Your users can authenticate later but start saving user data before this authentication. Once they do authenticate, their data is kept and merged to the new user profile.
  • Advanced merge conflict management: With V-Play WebStorage, you can modify the default merge conflict rules that may occur if your user stores to the same key from multiple devices at the same time. In Firebase, the last write is used, whereas in V-Play a merging of the data is tried first. Additionally, you can customize the merge behavior to your requirements with the WebStorage::dataConflictStrategy property.

These are the same features like Firebase has:

  • Offline usage: You can write and read values from the storage even if the user is offline. As soon as the user has Internet Connection again, the locally cached data is synchronized with the cloud.
  • Data synchronization: If the same user is authenticated on multiple devices, a change in the data is forwarded to all connected devices in realtime. This way, the user has the same data across all devices, even across platforms.

There is one restriction with WebStorage though: user access rights. With V-Play WebStorage, there are 2 access rules: per-app and per-user data. The per-user data cannot be shared with other users, and the per-app data cannot restrict its access to certain users. You can work around this restriction by adding custom fields to your per-app data that specifies to which user the app-wide data shall be available for. However, if you have advanced requirements for user rights & data management, the Firebase Realtime Database is the better solution as you can define access rules comprehensively.

For a quick summary: if you are only looking for a simple key-value store in the cloud that gets synced to multiple devices, you are better off with the V-Play WebStorage.

Firebase Storage Cloud

Firebase Storage hosts a virtual file system where you can upload any binary files to. You can then download them from anywhere using a public URI.

You can upload binary files using the FirebaseStorage QML item. After the upload, you retrieve a public HTTPS URL where the file is available. You can use these cloud URLs from anywhere.

For example, this lets you allow your users to upload a profile picture from the device or the camera. You can take pictures with NativeUtils::displayCameraPicker(). You can select local pictures with NativeUtils::displayImagePicker(). Afterwards you can upload the image file and display it on this user's profile.

FirebaseStorage can upload local files from the device to the cloud. Call FirebaseStorage::uploadFile() with a path to the local file you wish to upload, and with a filename to store it at in the cloud.

The following code uploads the local file local-image.png and stores it at images/remote-image.png in the cloud:

 FirebaseStorage {
   id: storage
   config: FirebaseConfig {} // add config parameters here

   Component.onCompleted: {
     var uploadFileUrl = Qt.resolvedUrl("local-image.png") // image in same folder as this QML file
     var remoteFilePath = "images/remote-image.png"

     storage.uploadFile(uploadFileUrl, remoteFilePath,
       function (progress, finished, success, downloadUrl) {
         if(!finished) {
           console.log("Upload progress:", progress, "%")
         } else if(success) {
           console.log("Upload finished! Download URL:", downloadUrl)
         } else {
           console.log("Upload failed!")
         }
       }
     )
   }
 }

Firebase Examples

Plugin Demo App

To try the plugin or see an integration example have a look at the V-Play Plugin Demo app.

Please also have a look at our plugin example project on GitHub: https://github.com/V-Play/PluginDemo.

Example Usage

The Firebase items can be used like any other QML item. Here are two simple and one more advanced example of how to integrate the plugin into your V-Play app or game.

These examples show off some of the use-cases of the Firebase plugin. The first and second examples demonstrate the authentication and database functions. The third example is more advanced and shows how to use the FirebaseAuth and FirebaseDatabase items in combination to store user-specific values in the database. It also shows how to use the built-in password-reset mechanism.

Firebase Authentication Example

This example shows how to register, log in and logout a test user with the FirebaseAuth item, and how to use the FirebaseAuth::authenticated property to react to the authentication state.

 import VPlayPlugins 1.0
 import VPlayApps 1.0
 import QtQuick 2.0

 App {

   Page {
     // make the background red if the user is logged out,
     // and green if logged in
     backgroundColor: firebaseAuth.authenticated ? "green" : "red"

     FirebaseAuth {
       id: firebaseAuth

       onAuthenticatedChanged: {
         console.debug("Authenticated changed " + authenticated)
       }

       onUserRegistered: {
         console.debug("User registered: " + success + " - " + message)
       }

       onLoggedIn:  {
         console.debug("User login: " + success + " - " + message)
       }

     }

     Column {
       anchors.fill: parent

       AppButton {
         text: "Register User"
         onClicked: firebaseAuth.registerUser("test@test.com", "thebestpassword")
       }

       AppButton {
         text: "Log in"
         onClicked: firebaseAuth.loginUser("test@test.com", "thebestpassword")
       }

       AppButton {
         text: "Log out"
         onClicked: firebaseAuth.logoutUser()
       }

       AppText {
         // shows the email address if the user is logged in
         text: firebaseAuth.email + " " + firebaseAuth.authenticated
       }
     }
   } // Page
 } // App

Firebase Realtime Database Example

This example shows how to read and write public data with the FirebaseDatabase item. If you want only authenticated users to access your database, have a look at the Private Database Example

You can try this example right from the browser here: Use Firebase Realtime Storage to Store Data in the Cloud

 import VPlayPlugins 1.0
 import VPlayApps 1.0
 import QtQuick 2.0

 App {

   FirebaseDatabase {
     id: firebaseDb

     // we store the read values in those properties to display them in our text items
     property string testValue: ""
     property string realtimeTestValue: ""

     // define which values should be read in realtime
     realtimeValueKeys: ["public/testValue"]
     // update our local realtimeTestValue property if database value changed
     onRealtimeValueChanged: {
       if(success && key === "testValue") {
         realtimeTestValue = value
       }
     }

     // update our local testValue property if read from database was successful
     onReadCompleted: {
       if(success) {
         console.debug("Read value " +  value + " for key " + key)
         testValue = value
       } else {
         console.debug("Error: "  + value)
       }
     }

     // add some debug output to check if write was successful
     onWriteCompleted: {
       if(success) {
         console.debug("Successfully wrote to DB")
       } else {
         console.debug("Write failed with error: " + message)
       }
     }
   }

   NavigationStack {
     Page {
       title: "Realtime Database"
       // our simple UI
       Column {
         anchors.fill: parent
         spacing: dp(15)

         // button to update public/testValue with test-[currenttimestamp]
         AppButton {
           text: "Update Value"
           anchors.horizontalCenter: parent.horizontalCenter
           onClicked: firebaseDb.setValue("public/testValue", "test-" + Date.now())
         }

         // button to read the public/testValue manually
         AppButton {
           text: "Get Value"
           anchors.horizontalCenter: parent.horizontalCenter
           onClicked: firebaseDb.getValue("public/testValue")
         }

         // display the testValue property with a simple property binding
         AppText {
           width: parent.width
           horizontalAlignment: AppText.AlignHCenter
           text: "Manual TestValue: " + firebaseDb.testValue
         }

         // display the realtimeTestValue property with a simple property binding
         AppText {
           width: parent.width
           horizontalAlignment: AppText.AlignHCenter
           text: "Realtime TestValue: " + firebaseDb.realtimeTestValue
         }
       }// Column
     }// Page
   }// NavigationStack
 }// App

Firebase Storage example

The following QML example shows how to upload a picture directly from the device camera. The picture is taken using NativeUtils::displayCameraPicker(). After NativeUtils::cameraPickerFinished() is emitted, the stored picture is uploaded using FirebaseStorage::uploadFile(). The uploaded file is then displayed using the downloadUrl in an AppImage item.

While uploading, the status is displayed in an AppText item. The upload can be canceled with a button using FirebaseStorageUploadTask::cancel().

You can try this example right from the browser here: Upload Local Files to the Firebase Cloud Storage

 import QtQuick 2.0
 import VPlayApps 1.0
 import VPlayPlugins 1.0

 App {
   property FirebaseStorageUploadTask uploadTask

   FirebaseStorage {
     id: storage

     config: FirebaseConfig {
       id: customConfig

       // get these values from the Firebase console
       projectId: "<FB project ID>"
       storageBucket: "<fb project>.appspot.com/"

       // platform dependent - get these values from the google-services.json / GoogleService-info.plist
       apiKey: Qt.platform.os === "android" ? "<android API key>" : "<ios API key>"
       applicationId: Qt.platform.os === "android" ? "<android app ID>" : "<ios app ID>"
     }
   }

   // UI
   AppFlickable {
     anchors.fill: parent
     anchors.topMargin: Theme.statusBarHeight

     Column {
       anchors.left: parent.left
       anchors.right: parent.right
       anchors.margins: dp(12)

       AppButton {
         text: "Capture image + upload"
         onClicked: nativeUtils.displayCameraPicker()
       }

       AppButton {
         text: "Cancel upload"
         onClicked: if(uploadTask) uploadTask.cancel()
       }

       AppText {
         id: status
         text: "Idle"
       }

       AppImage {
         id: img
         defaultSource: "vplay-logo.png"
         autoTransform: true
       }
     }
   }

   Connections {
     target: nativeUtils
     onCameraPickerFinished: {
       if(accepted) {
         // picture taken with camera is stored at path - upload to Firebase Storage
         uploadTask = storage.uploadFile(path, "test-image.png",
                                         function(progress, finished, success, downloadUrl) {
                                           if(!finished) {
                                             status.text = "Uploading... " + progress.toFixed(2) + "%"
                                           } else if(success) {
                                             img.source = downloadUrl
                                             status.text = "Upload completed."
                                           } else {
                                             status.text = "Upload failed."
                                           }
                                         })
       }
     }
   }
 }

Firebase Database Filtering Example

This example shows how to query only parts of data with the FirebaseDatabase item. Using the queryProperties parameter to FirebaseDatabase::getValue(), only the newest 20 items of the database, ordered by timestamps, are returned. A click on a button creates a new item with the current time as timestamp.

 import VPlayApps 1.0
 import VPlayPlugins 1.0
 import QtQuick 2.0

 App {
   readonly property int maxListEntries: 20
   property int numListEntries
   property bool loading: false

   FirebaseDatabase {
     id: firebaseDb

     // load total number of entries to compute index of next element
     realtimeValueKeys: ["public/numListEntries"]
     onRealtimeValueChanged: if(success && key === "numListEntries") numListEntries = value

     // load data on startup
     onPluginLoaded: loadData()
   }

   Page {
     AppListView {
       id: listView

       anchors.left: parent.left
       anchors.right: parent.right
       anchors.top: parent.top
       anchors.bottom: actionBar.top
       anchors.topMargin: Theme.statusBarHeight

       delegate: SimpleRow {}

       model: [
         { text: "Loading data from database..." }
       ]
     }

     Flow {
       id: actionBar

       anchors.left: parent.left
       anchors.right: parent.right
       anchors.bottom: parent.bottom
       spacing: dp(12)

       AppButton {
         text: "Add new item"
         onClicked: addItem()
         enabled: !loading
       }

         AppActivityIndicator {
           visible: loading
         }
       }
   } // Page

   function loadData() {
     loading = true

     // load the last X entries, ordered by timestamp property
     firebaseDb.getValue("public/listEntries", {
                           limitToLast: maxListEntries,
                           orderByChild: "timestamp"
                         }, function(success, key, value) {
                           if(success) {
                             listView.mode = value
                           }
                           loading = false
                         })
   }

   function addItem() {
     loading = true

     // add new DB item with timestamp and text
     var date = new Date()
     var timestamp = date.getTime()
     var text = "Item created at " + date.toString()

     var dbItem = { timestamp: timestamp, text: text }
     var index = numListEntries

     // keep track of total number of entries
     firebaseDb.setValue("public/numListEntries", numListEntries + 1)
     firebaseDb.setValue("public/listEntries/" + index, dbItem, function(success, message) {
       if(success) loadData()
     })
   }
 } // App

Multiple Firebase Accounts Example

It is also possible to use more than one Firebase account in a single app. Use the QML type FirebaseConfig to specify custom Firebase account details and override the default account specified with google-services.json and GoogleService-info.plist.

Example:

 FirebaseAuth {
   id: customAuth

   // assign custom config values - override config from google-services.json / GoogleService-info.plist
   config: FirebaseConfig {
     // get these values from the Firebase console
     projectId: "projectabc-1234"
     databaseUrl: "https://projectabc-1234.firebaseio.com/"

     // platform dependent - get these values from the google-services.json / GoogleService-info.plist
     apiKey:        Qt.platform.os === "android" ? "android-key"           : "ios-key"
     applicationId: Qt.platform.os === "android" ? "1:abcdef:android:1234" : "1:abcdef:ios:1234"
   }

   onFirebaseReady: loginUser("username", "pw")
 }

To be able to use database with authentication and custom Firebase account details, be sure to use the same FirebaseConfig instance for both these types, as in the following example.

 App {
   // this object can override the default Firebase config when used in FirebaseAuth/Database
   FirebaseConfig {
     id: customConfig

     // get these values from the Firebase console
     projectId: "projectabc-1234"
     databaseUrl: "https://projectabc-1234.firebaseio.com/"

     // platform dependent - get these values from the google-services.json / GoogleService-info.plist
     apiKey:        Qt.platform.os === "android" ? "android-key"           : "ios-key"
     applicationId: Qt.platform.os === "android" ? "1:abcdef:android:1234" : "1:abcdef:ios:1234"
   }

   FirebaseAuth {
     id: defaultAuth

     // config not assigned - use default auth with values from google-services.json / GoogleService-info.plist

     onFirebaseReady: loginUser("username", "pw")
   }

   FirebaseAuth {
     id: customAuth

     // assign custom config values
     config: customConfig

     onFirebaseReady: loginUser("username", "pw")
   }

   FirebaseDatabase {
     id: defaultDb

     // config not assigned - use default DB with values from google-services.json / GoogleService-info.plist

     onFirebaseReady: getValue("public/myDbValue")
   }

   FirebaseDatabase {
     id: customDb

     //assign custom config values
     config: customConfig

     onFirebaseReady: getValue("public/myDbValue")
   }

   // use auth and database in app...
 }

Firebase Authorization and Private Database Example

This example demonstrates advanced usage of the Firebase plugin. The users can authenticate themselves via a simple login form. When authorized, private per-user values are stored to and retrieved from the database. Additionally, it shows how to use the "Forgot Password" functionality of Firebase.

 import VPlayPlugins 1.0
 import VPlayApps 1.0
 import QtQuick 2.0

 App {

  Page {

   FirebaseAuth {
     id: firebaseAuth

     onUserRegistered: {
       console.debug("User registered: " + success + " - " + message)
       output.text = message
     }

     onLoggedIn:  {
       console.debug("User login: " + success + " - " + message)
       output.text = message
     }

     onPasswordResetEmailSent: {
       console.debug("Email Sent: " + success + " - " + message)
       output.text = message
     }
   }

   FirebaseDatabase {
     id: firebaseDb

     onReadCompleted: {
       if(success) {
         console.debug("Read value " +  value + " for key " + key)
       } else {
         console.debug("Error: "  + value)
       }
       output.text = value
     }

     onWriteCompleted: {
       if(success) {
         console.debug("Successfully wrote to DB")
         output.text = "Successfully wrote to DB"
       } else {
         console.debug("Write failed with error: " + message)
         output.text = "Write failed with error: " + message
       }
     }
   }

   Column {
     spacing: dp(20)

     AppTextField {
       id: email

       visible: !firebaseAuth.authenticated
       text: "E-Mail"
       showClearButton: true
     }

     AppTextField {
       id: pw

       visible: !firebaseAuth.authenticated
       text: "Password"
       showClearButton: true
       echoMode: TextInput.PasswordEchoOnEdit
     }

     AppButton {
       text: "Log in"
       visible: !firebaseAuth.authenticated
       onClicked: {
         if(email.text.length > 0 && pw.text.length > 0) {
           firebaseAuth.loginUser(email.text, pw.text)
         } else {
           output.text = "Please enter an e-mail address and a password!"
         }
       }
     }

     AppButton {
       text: "Register"
       visible: !firebaseAuth.authenticated
       onClicked: {
         if(email.text.length > 0 && pw.text.length > 0) {
           firebaseAuth.registerUser(email.text, pw.text)
         } else {
           output.text = "Please enter an e-mail address and a password!"
         }
       }
     }

     AppButton {
       text: "Send Password Link"
       visible: !firebaseAuth.authenticated
       onClicked: {
         if(email.text.length > 0) {
           firebaseAuth.sendPasswordResetMail(email.text)
         } else {
           output.text = "Please enter an e-mail address!"
         }
       }
     }

     AppButton {
       visible: firebaseAuth.authenticated
       text: "Save Private Value"
       onClicked: firebaseDb.setUserValue("teststring", "test")
     }

     AppButton {
       visible: firebaseAuth.authenticated
       text: "Get Private Value"
       onClicked: firebaseDb.getUserValue("teststring")
     }

     AppButton {
       visible: firebaseAuth.authenticated
       text: "Log out"
       onClicked: firebaseAuth.logoutUser()
     }

     AppText {
       id: output
       text: ""
     }
   }

  }// Page
 }// App

For the full source code, see the plugin example project on GitHub: https://github.com/V-Play/PluginDemo

Available QML Items

FirebaseAuth

Item allows user registration and authentication with the email/password authentication provider

FirebaseConfig

Item allows to define account properties for FirebaseAuth and FirebaseDatabase

FirebaseDatabase

Item allows to read and write user-specific and public data from and to the Firebase Realtime Database. Data is synced across all clients in realtime, and remains available when your app goes offline. As soon as the user goes online again, the changes are synced up to the Firebase cloud backend

FirebaseStorage

Item allows uploading files to the Firebase Storage cloud. It uploads local files to the cloud file system and returns the public download URL

FirebaseStorageUploadTask

Returned by FirebaseStorage::uploadFile()

Adding and Activating Plugins

How to Add a V-Play Plugin to your App or Game

When you create a new project, you can choose the Plugin Application template to get your own version of the V-Play Plugin Demo with the plugins you want to include. Open Qt Creator and choose “File / New File or Project”, then select Plugin Application in the V-Play Apps section or Game with Plugins in the V-Play Games section to start the project wizard.

Then select the platforms you want to run your application on. The plugins are available for both iOS & Android. There is a fallback functionality in place on Desktop platforms so your project still works when you call methods of the plugins. This allows you to do the main development on your PC, and for testing the plugin functionality you can run the project on iOS and Android.

After the Kit Selection, you can choose which of the plugins you’d like to add to your project:

Then complete the wizard, your project is now set up with all the correct plugin dependencies for Android & iOS automatically. This includes:

  • Setting up the .gradle file for Android.
  • Setting up the .plist file for iOS.
  • Setting up the .pro file to include the plugin libraries for iOS.

Note: Additional integration steps are still required for most plugins, for example to add the actual plugin libraries for iOS to your project. Please have a look at the integration steps described in the documentation for each of the used plugins.

If you have an existing V-Play application, follow these steps to include a plugin to your app or game:

In Qt Creator, select “File / New File or Project” and choose either V-Play Games or V-Play Apps from Files and Classes. Then select V-Play Plugin and press Choose.

You can now select the plugin you want to add:

The plugin item, which contains the chosen plugin and a short usage example, is now added to your project. To use the item in your project, simply perform these steps:

  • Include the created item (use the name you entered in the template before) in your main.qml file.
  • Modify the .pro file & .plist file for iOS usage. See the iOS integration guide of the chosen plugin for more information.
  • Modify the the .gradle file for Android usage. See the Android integration guide of the chosen plugin for more information.

Note: If you have an existing Qt application, you can also add V-Play Plugins to your app! See here how to do this.

Activating Plugins with a License Key

You can test all plugins as soon as the required integration steps and plugin configuration are completed.

However, the plugins are only available as Trial Versions if they are not activated with a valid license. When you are using unlicensed plugins, a dialog is shown and a watermark overlays your application to notify you about the testing state of the plugin.

All monetization plugins are free to use in all licenses, other plugins are only fully usable if you have purchased the Indie or Enterprise license. To activate plugins and enable their full functionality it is required to create a license key. You can create such a key for your application using the license creation page.

This is how it works:

  • Choose the plugins you want to include in your license key:

  • Click on “Generate License Key” and set the app identifier & version code of your application. You can see that the AdMob plugin was enabled in this license key:

  • Copy the generated licenseKey to your GameWindow or App component.

  • You can now fully use the selected plugins!

Integration

To use the Firebase plugin in your project, add the platform-specific native libraries for each platform to your project.

iOS Integration Steps

  1. Download our PluginDemo from https://github.com/v-play/PluginDemo/archive/master.zip and unzip it.
  2. Copy the following frameworks from the ios sub-folder to a sub-folder called ios within your project directory.
    • FirebaseAnalytics.framework
    • FirebaseAuth.framework
    • FirebaseCore.framework
    • FirebaseCoreDiagnostics.framework
    • FirebaseDatabase.framework
    • FirebaseInstanceID.framework
    • FirebaseNanoPB.framework
    • FirebaseStorage.framework
    • GoogleToolboxForMac.framework
    • GTMSessionFetcher.framework
    • leveldb-library.framework
    • nanopb.framework
  3. Add the following lines of code to your .pro file:
     ios {
       VPLAY_PLUGINS += firebase
     }

Android Integration Steps

  1. Open your build.gradle file and add the following lines to the dependencies block within the buildscript block:
     dependencies {
         ...
         classpath 'com.google.gms:google-services:3.0.0'
     }
  2. Open your build.gradle file and add the following lines to the dependencies block:
     dependencies {
       compile 'net.vplay.plugins:plugin-firebase:2.+'
     }
  3. Add the following line at the end of your build.gradle file:
     apply plugin: 'com.google.gms.google-services'

    Note: If you did not create your project from any of our latest wizards, make sure that your project uses the Gradle Build System like described here.

Firebase Account

In order to use Firebase in your project, set up a Firebase project at https://firebase.google.com/ for your app or game.

Note: Create a Google account first if you don't have one yet.

Go the Firebase console (https://console.firebase.google.com/). You will be greeted with the welcome screen.

Now, you can create your first Firebase project. Proceed with the following steps:

  • Click "Add Project"
  • Enter a name for your project and select your preferred region

  • Click "Create Project"

Back on the Dashboard for your Firebase project, proceed with adding the platforms you want to use.

iOS

  • Click "Add Firebase to your iOS app" or "Add another app" if you already created one for Android.
  • Enter the iOS Bundle ID. It is equal to the "App Identifier" which you entered when creating your V-Play project.
  • Click "Register App" and download the GoogleService-Info.plist on the next page.

  • Copy the GoogleService-Info.plist into the ios subfolder of your project. This file defines the Firebase project ID, app ID, API key and database URL to use in for FirebaseAuth and FirebaseDatabase. You can also use multiple Firebase accounts from within the same app by setting a FirebaseConfig instance for FirebaseAuth::config and FirebaseDatabase::config.
  • You can ignore the next steps of the wizard, we already did those steps for you. Just click "Continue" and "Finish".

Android

  • Click "Add Firebase to your Android app" or "Add another app" if you already created one for iOS.
  • Enter the package name. It is equal to the "App Identifier" which you entered when creating your V-Play project.
  • Click "Register App" and download the google-services.json.

  • Copy the google-services.json into the android subfolder of your project. This file defines the Firebase project ID, app ID, API key and database URL to use in for FirebaseAuth and FirebaseDatabase. You can also use multiple Firebase accounts from within the same app. For this, additional accounts can be configured using the FirebaseConfig type and assigning FirebaseAuth::config and FirebaseDatabase::config.
  • You can ignore the next steps of the wizard, we already did those steps for you. Just click "Continue" and "Finish".

Firebase Realtime Database Setup

By default, anyone can access your Firebase database. This is not desirable in many cases. Therefore, you should restrict your database so your users can only access data that is allowed for them.

To change the Realtime Database rules, select "Database" in the Firebase Console.

Then, select the "Rules" tab in the top. You will see the Firebase default rules.

Now, you can replace the default rules with the following code:

 // These rules grant access to a node matching the authenticated
 // user's ID from the Firebase auth token
 // Additionally, they grant access to everyone for the "public" branch
 {
   "rules": {
     "users": {
       "$uid": {
         ".read": "$uid === auth.uid",
         ".write": "$uid === auth.uid"
       }
     },
     "public": {
       "$uid": {
         ".read": true,
         ".write": true
       }
     }
   }
 }

These rules grant everyone access to all child nodes of the public branch. In addition, with these rules, an authenticated user can access data that is stored in the users/<individual-user-id> branch of the database.

To learn more on Database Rules, we recommend to read up on the topic in the Firebase Docs.

Used Firebase SDK Versions

iOS 4.13.0
Android 15.0.0

Note: Other SDK versions higher than the stated ones might also be working but are not actively tested as of now.

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support