Firebase

Google Firebase is a collection of backend services and client-side libraries that provides many useful building blocks for modern web and mobile apps.

It has a fully free tier, with paid plans available for production use.

The Google Firebase connector in Composer Pro provides you with access to multiple functionalities you can add to your Composer app:

1. Data resources that utilize Cloud Firestore, Google's cloud database
2. User authentication utilizing Firebase Authentication
3. File uploads and downloads utilizing Firebase Storage

To use the Google Firebase connector, you need to first create a Firebase project for your app, then set up the features you want to use (Cloud Firestore, Authentication, Storage), and then configure the different platforms (i.e. web / Android / iOS) you want to support.

After this, you need to create a Firebase connector configuration in Composer, inputting the API keys, authentication domains and other settings required by each platform.

Creating a Firebase project

To get started, sign in to the Firebase console at https://console.firebase.google.com/ with your Google account, then create a new project.

You do not need to set up Google Analytics, but can do so if you want to – just be aware of the privacy implications for your users.

Next, you want to enable and configure the different Firebase features for your app.

Configuring Authentication

The AppGyver Firebase connector gives access to user authentication via dedicated flow functions, so while it is a good idea to read the documentation at https://firebase.google.com/docs/auth, note that the implementation and usage details are quite different.

To get started, we need to enable authentication in Firebase. From the left-side menu in Firebase console, select Authentication, then select Get started.

AppGyver currently supports the Email/Password and Anonymous type sign-in providers. Choose one or both depending on what you want to use in your app.

If you chose Email/Password, you can use the Users tab in Firebase to manage users and e.g. create a test user for development purposes.

Configuring Cloud Firestore

The AppGyver Firebase connector utilizes Firestore through a normalization layer to make it work like other data resources. Full CRUD operations are supported, but the way e.g. list operation queries are constructed is based on the AppGyver standard, and transformed into Firebase-specific instructions only at runtime.

This means that while It is a good idea to start by reading through the official Firebase documentation for Cloud Firestore, much of the information there does not apply directly to Firestore data resources in Composer.

To start using Firestore, go to the Firebase console, then select Firestore Database in the left-side menu.

Enable Firestore by selecting "Create database". Select test mode. Select the desired region for your database.

By default in test mode, reading and writing data is allowed by everyone (the if true part).

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

For production use, you want to set up user authentication and then restrict access to resources based on e.g. if the user is authenticated or not (the if request.auth != null part:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

For more, you can read the security guide: https://firebase.google.com/docs/firestore/security/get-started

Add indexes to enable sorting

To sort Firebase resources, you need to add indexes for each property you want to sort by – see the guide below for details:
https://firebase.google.com/docs/firestore/query-data/indexing

Configuring Storage

The AppGyver Firebase connector utilizes Storage via dedicated flow functions. This means that while it is a good idea to read through the official documentation at https://firebase.google.com/docs/storage, note that implementation and usage details are quite different.

To enable file uploads and downloads, you need to enable Storage.

From the left-side menu in Firebase console, choose Storage. Enable it by selecting Get started.

Security rules

Similarly to Firestore, you can and should set up security rules for your files. You can read more at https://firebase.google.com/docs/storage/security

Configure CORS for web

By default, Firebase Storage limits access from web via CORS rules. To allow Storage to be utilized on web, you need to add either * as an allowed CORS origin to enable requests from everywhere, or whitelist the domains from where your app will be accessed on the web. The latter means adding preview.appgyver.com, and when you've decided on it, the URL for the standalone deployment of your web app, e.g. my-firebase-tester.appgyverapp.com.

You can read more at https://firebase.google.com/docs/storage/web/download-files#cors_configuration

Configuring platforms in Firebase

To enable a platform (i.e. iOS/Android/web) in Firebase, you need to create an app for that platform, then copy the configuration values (such as client ID and API key) over to the Firebase connector configuration in Composer.

First, let's take a look at how to set up each platform.

Web setup

The Step 2 of the instructions at the link below describes how to register a web app in your Firebase project:

https://firebase.google.com/docs/web/setup#register-app

You do not need to set up Firebase Hosting.

After creating the project and giving your app a name, you are presented with some JavaScript code to initialize the web SDK.

Since Composer already includes all the necessary SDKs, we are just interested in the web configuration object, which looks like this:

{
  apiKey: "<api_key>",
  authDomain: "<app_id>.firebaseapp.com",
  projectId: "<app_id>",
  storageBucket: "<app_id>.appspot.com",
  messagingSenderId: "<id_1>",
  appId: "1:<id_1>:web:<id_2>"
}

The configuration object can also be found under by opening the project settings in Firebase console, selecting an app and clicking the Config radio button under SDK setup and configuration.

iOS setup

To register an iOS app under your Firebase project, follow Step 2 of the iOS setup guide, linked below:

https://firebase.google.com/docs/ios/setup#register-app

Note that the iOS bundle ID must match what you set up in Build Service under iOS build settings' Bundle identifier, see the iOS build settings guide.

After the first step, download the GoogleService-Info.plist file – you'll need it later to set things up in Composer. You can ignore the rest of the steps.

Android setup

To register an Android app under your Firebase project, follow Step 2 of the Android setup guide, linked below:

https://firebase.google.com/docs/android/setup#register-app

Note that the Android package name must match what you set up in Build Service under Android build settings' Package identifier, see the Android build settings guide.

After the first step, download the google_services.json file – you'll need it later to set things up in Composer. You can ignore the rest of the steps.

Connector configuration in Composer

Connector configurations can be founder under the Data section in the global toolbar. After opening the Data section, select Connectors from the left side menu, then click the toggle switch to enable the Google Firebase connector. You can only have one Firebase connector configuration per app.

You'll note that some of the configuration fields are platform-specific – i.e. App ID, API Key and Client ID – while the rest are shared between all platforms.

It's most straightforward to start with the web platform, copying over the values from the web configuration object into their respective fields (be sure to copy just the value, not the surrounding ""), you are good to go for the web configuration.

Note that if you have not enabled Google Analytics, Measurement ID will be empty.

For Android, the correct values can be found under the following paths in the google_services.json file:

• Android API key: client.api_key.current_key
• Android app ID: client.client_info.mobilesdk_app_id
• Android client ID key: client.oauth_client.client_id

For iOS, the correct values can be found under the following keys in the GoogleService-Info.plist file:

• iOS API key: API_KEY
• iOS app ID: GOOGLE_APP_ID
• iOS client ID key: CLIENT_ID

Using Firebase in your appp

Using the Firebase features happens via flow functions.

The very first thing to do is add the Initialize Firebase flow function to the Global Canvas, connecting it to the App launched event. This flow function uses the Firebase connector configuration in your app, setting things up so that all the other Firebase flow functions will connect to your Firebase project without any extra setup needed.

Currently, AppGyver Preview can only be initialized with one Firebase app at a time. If you need to switch over to another app that also uses Firebase, you need to close and restart the AppGyver Preview app first.

Also, note that any misconfiguration in the Firebase connector configuration will cause the initialization to fail with a generic error code.

If you can't seem to be able to run the Initialize Firebase flow function successfully, double-check your configuration, restart the Preview app and try again.

Authentication

The following flow functions are available for Firebase authentication:

• Authenticate anonymous user – authenticate user using the Firebase Auth anonymous login
• Email & password authentication – authenticate user using the Firebase Auth email & password login
• Get current user – retrieve info for the currently logged-in Firebase Auth user
• Set auth state persistence– web only, changes how the current user session is persisted
• Sign out user – signs out the current user

By default, the user will remain signed in even if the app is closed and reopened.

When you enable Firebase authentication via the Auth section of the global toolbar, an auth template is added to your app and configured to be the initial view. You can explore the logic there to see how we validate the existence of a session to determine if the user should be automatically taken to the app, and how the current user info is saved into an app variable so it can be used elsewhere in the app.

To use the Authenticate anonymous user flow function, simply drag it onto the global canvas after the Initialize Firebase flow function – since it always succeeds (given there's Internet), there's no reason to add a login view just for that.

Cloud Firestore data resources

You can create Firestore data resources via the Data section of the global toolbar.

In the modal that opens, you need to give the resource a unique name, then give the name of the Firestore collection it will access.

Finally, since Firestore collections do not have a schema, you need to define one in Composer.

The Firestore data resources are accessed with the same data flow functions as other data resources.

Storage

The following flow functions are used to upload files to Firebase Storage and download them:

• Firebase Storage upload files] – upload a list of file objects to Firebase Storage
• Firebase Storage get download URLs – get signed, temporary download URLs for a list of file objects that have been previously uploaded to Firebase Storage

The flow function descriptions give a good overview of how to use them.

To follow upload progress, you can add the onFileUploadProgress custom event onto your logic canvas.

Building a standalone app with Firebase

To build a standalone iOS and Android app that uses the Firebase connector, you currently need to include the google_services.json file in the Android build settings and GoogleService-Info.plist file in the iOS build settings.