At the time of writing, there are built-in components for Firebase Authentication (Kodular) and extensions for App Inventor, that allow for users of an app to sign up and login in as an authenticated user to a Firebase realtime database. So far, so good. However many users have then expressed problems that setting the security rules in Firebase to anything other than " read:true / write:true ", prevents users, who should be authenticated, from any reading or writing.

The issue appears to be, for the extensions or built-in components, that the idToken required to "authenticate" the user/app is not being carried over into the blocks.

There is a workaround for this, to enable an authenticated user to read, write and delete data, by using the web component and Firebase's REST api.

Before I go any further, I must recommend the following reading, in order to help understand the requirements and the background:

• Authenticate REST Requests  |  Firebase

• Firebase Database REST API  |  Firebase

• User Based Security  |  Firebase Realtime Database

I am going to use some fairly basic settings in Firebase for this example, the security rules will be set for any authenticated user to have read/write access to everything, and the sign up method will be a simple email and password, without any 2 factor verification requirements. These can all be expanded upon once everything is up and running. The aim is to grab the local ID created for the authenticated user, and use this as the base "key" in the data structure - with the intention that the user will only be able to access their data from the app (regardless of the security on Firebase)

Using the web component, instead of the firebase blocks, you need to construct a url which sets the node level and includes the idToken:

https://<firebaseUrl>/<ProjectBucket>/<userID>/<node.json?auth=<idToken>

Data Formatting:

If using this method, the web component delivers data to Firebase in a slightly different way than the built in Firebase component blocks. 

A single value would normally look like this on Firebase:     

key:"\"value\""

whilst with the web component it looks like this:

key:"value"

Both appear to come back to the app OK and convert to lists using the json decode block, but if they are mixed, then you can end up with double double quotes around values. This can be handled with text manipulation in the app, but it may better to stick with one method. 

You will need to use the web component method if you want secure rules and authentication!

Note: where I show the use of the firebase js files, make sure you go off and look for the latest versions.

Now to work:

On Firebase:

• Create a new project (or use an existing one, as you prefer)

• Use a real time database

• To start with, set the rules to read:true/write:true (development mode)

• Set the sign up method to email/password, and leave the optional settings alone

• Get the project url and API key for use in the app

On App Inventor (using AI2 to for this example):

• Create a new project

• Pull out a FirebaseDB component from Experimental

  • Set the url and api (token) using the data from Firebase

  • Set a Project Bucket name of your choice ( I used " FBAuthSignUpIn")

• Install the FirebaseAuth extension from mirxtrem

  • Set the api using the data from Firebase

• A label up top to display login information

• Two textboxes (one for the email, one for the password) and a button named Sign Up

• A button named Sign In

• Two more textboxes (one for the "Tag" or "Key", one for the "Value")

• Three more buttons: Submit Data, Read Data, Delete Data

• A label to display output from responseContent

The Blocks:

• One thing of note, for each call to the database one has to set web headers. For Read and Write the web headers need to equal an empty "text" block, whilst for the delete call to include the delete header requirements. This is important, from testing, once the delete headers are set they will continue to be set, and any read/wrtie call will just delete everything in the database!!

Security

So far we have been running firebase in development mode, but now it is time to lock things down to authenticated users only.

Development Rules:

{

  "rules": {

    ".read": true,

    ".write": true

  }

}

Authenticated Rules: 

(just requires a sign in to read / write data)

Change the rules to the ones below, sign in again with a user, and test read/write. it should still work.

{

  "rules": {

        ".read": "auth != null",

        ".write": "auth != null"

   }

}

This has all been tested on AppInventor 2 using a GenyMotion Emulated Pixel 3XL (Android 9) and a free Firebase account.

A compiled version has also been tested on an HTC10 (Android 7)

CREDITS: Mrixtrem for the FirebaseAuth Extension

FBAuthSignUPIN_empty.aia (all firebase requirements are empty)

MORE:-

Taglist:

• Blocks to use to get a taglist back from Firebase

Data Changed

For dataChanged we need to use a different method, it will require a webviewer, and html file that monitors the state of the data. All data is returned by Firebase. We need to get a the firebase config file from Project Overview/Settings:

The html file will return the data as a stringified JSON to the webviewstring on change. in this example I have have loaded the firebase js files required directly to the assets

<!DOCTYPE html>

<html>

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

<meta charset="utf-8">

<head>

  <title>DataChanged</title>

 <script src="firebase-app.js"></script>

 <script src="firebase-auth.js"></script>

 <script src="firebase-database.js"></script>

</head>

<body>

<script>

var wvstr = window.AppInventor.getWebViewString();

var email = wvstr.split(",")[0];

var pass = wvstr.split(",")[1];

var setPB = wvstr.split(",")[2];

var uid = wvstr.split(",")[3];

var firebaseConfig = {

  apiKey: wvstr.split(",")[4],

  authDomain: wvstr.split(",")[5],

  databaseURL: wvstr.split(",")[6],

  projectId: wvstr.split(",")[7],

  storageBucket: wvstr.split(",")[8],

};

firebase.initializeApp(firebaseConfig);

var auth = firebase.auth();

auth.signInWithEmailAndPassword(email,pass);

auth.onAuthStateChanged(function(user) {

  if (user) {

    // User is signed in.

    getData();

  } else {

    // No user is signed in.

  }

});

function getData() {

var dbRefObject = firebase.database().ref().child(setPB +"/"+ uid);

dbRefObject.on('value', snap => { window.AppInventor.setWebViewString(JSON.stringify(snap.val(), null, 3)); }); 

}

</script>

</body>

</html>