1. Home
  2. Analytics
  3. Firebase
  4. Firebase – Sync data with your Construct 2 game
  1. Home
  2. Construct 2
  3. Tutorials
  4. Firebase – Sync data with your Construct 2 game
  1. Home
  2. Documentations
  3. Templates
  4. Firebase Template
  5. Firebase – Sync data with your Construct 2 game

Firebase – Sync data with your Construct 2 game

Firebase

Get Started

If you want to use Firebase, please create a new account or login to your existing one.

  Firebase - Console
Just to let you know...

Firebase offers a free plan which is allowing you to use 2 projects. If you need more, you have to upgrade to a paid plan.

Create a project

First of all you need to create a new project (alternatively you can login to AdMob and export your existing app to Firebase)

Click on Create new Project and fill out all needed information.

firebase_new_project

Then confirm the dialog.

Now you are able to add Apps to your project by clicking the “Add App” button (upper right corner).

firebase_new_appThen select the platform of your app.

firebase_new_app_plattform

Fill out all needed information for your choosen platform and fill out all needed information.

Auth

Here you can add and configure login handlers for instance

  • Facebook Login
  • Google Login
  • Twitter Login
  • Email / Password Login
  • and so on

firebase_auth_handler

Email & Password

No further settings needed. Just activate this handler.

Google

No further settings needed. Just activate this handler.

Facebook

In order to activate the Facebook Login Handler you have to create a Facebook App first. If you need help with that, please visit this guide.

  Create a Facebook App

If you already have a Facebook App, just login to Facebook Developers and copy the APP ID and the APP SECRET…

firebase_auth_handler_fb_app_id

…and paste it at Firebase.

firebase_auth_handler_fb_app_id_paste

Then copy the …/auth/handler  (blue marked) URL and paste it at your Facebook App.

firebase_auth_handler_fb_handler

Twitter

In order to activate the Twitter Login Handler you have to create a Twitter App first.

  Create a Twitter App

Copy your APP ID and your APP SECRET and paste it at Firebase.

firebase_auth_handler_twitter_app_id

Then copy the Auth URL and paste it at your Twitter App (Settings Tab).

firebase_auth_handler_twitter_handler

OAuth Redirection

If you are using Social Handlers (Facebook, Google, …) add your domain to the list below. Otherwise the login will be blocked and you’ll get this error message in the browser console.

c2runtime.js:16221 Auth: Login failed with following error message: “This domain is not authorized for OAuth operations for your Firebase project. Edit the list of authorized domains from the Firebase console.”

firebase_auth_handler_blocked_error

So just add the domain where your game is running on to the list below.

firebase_auth_handler_oauth_add

For Scirra Arcade

If you want to add games on Scirra Acarde using Firebase Authentifiaction please note, that Scirra is blocking cross-platform request. Therefor the login with Social Handlers do not work there.

Realtime Database

Firebase offers a realtime database for your game / app. The structure of it can be created in Construct 2 via the Firebase plugin. However to assure that only the data owner can read and write its data, we need to add some rules to the database.

Default

{
"rules": {
".read": "auth != null",
".write": "auth != null"
}
}

 

Above shown is the default code for the rules. This says that only logged in user can access the data from the database.

New

{
"rules": {
"users": {
"$user_id": {
// grants write access to the owner of this user account
// whose uid must exactly match the key ($user_id)
".write": "$user_id === auth.uid",
".read": "auth != null && auth.uid == $user_id"
}
}
}
} 

 

But in order to differ the data for each user, we have to add following code (more information can be found in the docs of Firebase). So overwrite the default rule with the rules shown above.

Just to let you know...

This will assure that the user can see and write only his/her own data. This also will need some modification in the C2 code, but more later.

Construct 2

At the moment there is now mobile Firebase plugin for Construct 2 available. Only for HTML5 games.

Thank you!

The Firebase plugins for Construct 2 were made by Rexrainbow! Thank you for your hard work.

Live Demo

If you want to check out a live demo of the Firebase Service, please visit following link (Scirra Acarde).

  Game Templat 14 - Cloud Data Sync with Firebase (WEB)
Please note...

Scirra is blocking the Google Login. Please use the Email & Password Login Method instead.

Requirements

If you want to use Firebase you’ll need to add at least following plugins made by Rexrainbow.

NameAuthorVersionLicenseDocumentationDownload
NameAuthorVersionLicenseDocumentationDownload
Firebase API V3rexrainbowFree  Docs  Download (279 clicks)
Firebase AuthentificationrexrainbowFree  Docs  Download (160 clicks)
Firebase CorerexrainbowFree  Docs  Download (171 clicks)
Firebase QueryrexrainbowFree  Docs  Download (168 clicks)

Download and install all the core plugins listed above. Those are needed to open the example files.

Additions

Additionally you can download and install following plugins made by Rexrainbow.

NameAuthorVersionLicenseDocumentationDownload
NameAuthorVersionLicenseDocumentationDownload
Firebase CounterrexrainbowFree  Docs  Download (131 clicks)
Firebase GeofirerexrainbowFree  Docs  Download (119 clicks)
Firebase ItembookrexrainbowFree  Docs  Download (107 clicks)
Firebase ItemmonitorrexrainbowFree  Docs  Download (118 clicks)
Firebase ItemtablerexrainbowFree  Docs  Download (131 clicks)
Firebase LeaderboardrexrainbowFree  Docs  Download (124 clicks)
Firebase RoomsrexrainbowFree  Docs  Download (108 clicks)
Firebase Save DatarexrainbowFree  Docs  Download (109 clicks)
Firebase Simple MessageFree  Docs  Download (108 clicks)
Firebase Single LoginrexrainbowFree  Docs  Download (122 clicks)
Firebase StoragerexrainbowFree  Docs  Download (117 clicks)
Firebase TimerrexrainbowFree  Docs  Download (108 clicks)
Firebase TokenrexrainbowFree  Docs  Download (119 clicks)
Firebase UserID 2 IDrexrainbowFree  Docs  Download (118 clicks)
Looking for more?

If you are looking for more awesome plugins & behaviors made by rexrainbow, visit his website over here.

Capx Examples

You can download a complete Firebase Template in the Scirra Store.

  Firebase - Game Accounts

Firebase API

Configuration

In order to get your ID’s for the Firebase API v3 Plugin, select your Project in Firebase and click on the little gear icon (next to your Project Name) and then Project Settings.

firebase_project_settings

Then scroll down and download the “google-services” JSON-file. There you’ll find all needed ID’s to configure the Firebase API v3 plugin.

firebase_project_settings_json

Open the JSON-file with an editor of your choice.

firebase_project_settings_json

Copy the corresponding ID’s from the JSON-file to the Firebase API v3 Plugin.

  • (1) API Key: Copy the as it is from the JSON-File
  • (2) Auth Domain: Copy it WITHOUT https://
Just to be sure...

If your Auth Domain is https://2625623625982.firebaseio.com, then copy 2625623625982.firebaseio.com

  • (3) Database URL: Copy it WITH https://
Just to be sure...

The Database URL is the same then the “firebase_url”, so if the firebase url is https://2625623625982.firebaseio.com, then copy https://2625623625982.firebaseio.com

  • (4) Storage Bucket: Copy it as it is

firebase_project_settings_json_file

Updated on May 6, 2017

Was this article helpful?

Related Articles

Comments

    1. Hi,

      Just see the screenshot above in the guide. You can download the json file with your ID’s out of your Firebase project.

      Regards
      Andy

        1. Just go to firebase and select your project. Then click on settings, there you’ll find the file 🙂

          Regards
          Andy

          1. i see in my project
            -Data
            -simulator
            -analytics
            -login & auth
            -hosting
            -secrets

            but no settings

  1. Just to add something that took me a while to figure out…the auth domain ends in *firebaseapp.com…if you see local host under OAuth redirect domains (Auth Tab) it’s the address below. Thanks for this tutorial.
  2. Hello I’m new to firebase concept and I do no that How to use the firebase in construct 2? I am working on cricket project in construct 2 tell me that how can I make it as multiplayer one using firebase
    1. Hi,
      I haven’t made a game using Firebase for multiplayer, so I can’t tell you how to do it. It’s better if you ask that question in the scirra forum.

      Regards
      Andy

  3. Thanks, that’s incredibly helpful.

    I want to send variables (questionnaire answers) to the Firebase database. Any suggestion what the best way it to do so?

  4. I’m getting an error of: “TypeError: Cannot read property ‘name’ of null(…)”

    Claims there is an issue with Line 49 Col 27 of the runtime.js and cannot read “database”.

    It might be a problem to bring to RexRainbow, but thought I’d try here first. I’ve played around with the account information entries and nothing seem to change the error, only deleting the V3 plugin works.

    1. Okay, I ended up uninstalling all the Firebase plugins and then shutting down C2. Restarted C2 and added the V3 API plugin, no problem.

      Of course then I added the Auth plugin and got an error but I think I know what is wrong there.

Add A Comment