FirebaseDB secured connection?

sarkar · February 8, 2020, 12:45pm

How to use FirebaseDB securely using auth or any other methods?

Since there is no way to use database auth key using the AI firebase component, the DB read/write rules are needed to be kept open.

I found this extension on Thunkable forum. But it seems to be dealing with the DB management and not DB access.

Is there any way to set the rules for securely using the DB with AI?

TIMAI2 · February 8, 2020, 1:12pm

You set the security rules for your Firebase realtime database in Firebase (Rules).
Look also there for sign in methods available (Authentication)
You use the Firebase Authentication extension to connect AI2 users to your Firebase database

sarkar · February 8, 2020, 2:07pm

Yes, I would like the read and write rules to be “auth != null” or similar.

Please let me know which component or extension you’re referring to? The Firebase Authentication V.3.0 from Thunkable forum?

How do you I use that authentication to push or pull data to/from database?

TIMAI2 · February 8, 2020, 4:25pm

You need to Read The Manual:

FIREBASE

FIREBASE DATABASE SECURITY

FIREBASE RULES

FIREBASE AUTHENTICATION

Sign In Method Options

sarkar · February 9, 2020, 1:16pm

Thanks. I’m working on it.

In the meantime, could someone please translate the following tutorial?

TIMAI2 · February 9, 2020, 1:50pm

You should be able to follow the visuals without need to translation, most people have.

However, just for fun:
I grabbed the audio using youtube-dl
Converted it to text using the IBM speech to text online service
Dropped the text into Google Translate

Here is a transcription as text document in English (with the text in Spanish below). You have to “read between the lines” !

fba-translate.txt (16.6 KB)

sarkar · February 9, 2020, 2:09pm

@TIMAI2
That’s genius!

ABG · February 9, 2020, 6:50pm

Lost me at the Moabite

sarkar · February 9, 2020, 7:37pm

Okay, it seems I have some breakthrough.

Since I cannot use user authentications using the FirebaseDB component in AI, I thought of using the Web component to access the database instead using PUT and GET requests. In that way, I could use authentication acquired using the Firebase Authentication V.3.0 extension.

I was working on it when I found this tutorial achieving similar thing!
Here’s the link.

The only issue with the tutorial is that the custom DataChanged procedure is only triggered after the server sends response to a PUT request. In other words, the custom DataChanged method is not globally triggered. So if you change the data in the same database from a different phone running the app, the DataChanged block won’t be triggered on other instances.

EDIT: It seems the only thing needed in the native FirebaseDB component is the feature of dynamically setting the token field.

SteveJG · February 9, 2020, 10:39pm

MIT considers the code they use to access FirebaseDB to be deprecated. Google deprecated the solution MIT uses to access Firebase some time ago. Jeff indicates Google could pull the rug out from under the current solution at any time. MIT decided a while ago they wouldn’t continue developing the tool.

…would they be able to do it? I don’t know. MIT provided CloudDB as an alternative to Firebase because they expect the way AI2 links presently might not be possible soon. So beware. FB is a nice tool but it might disappear like Fusion tables. or you might get lucky and Google doesn’t change anything for a long time.

sarkar · February 10, 2020, 4:08am

If Jeff thinks that, then it’s serious!

@Taifun Someone might be interested in creating an extension for the task?

Yep, those gems from bygone era.

TIMAI2 · February 18, 2020, 11:31am

See also:

sarkar · February 21, 2020, 1:16pm

@TIMAI2 Great tutorial! Thanks! We now just need to add a “DataChanged” event-like functionality. How does the “DataChanged” event achieve that? IMO if it’s achievable through blocks, then we might also be able to implement it using Web / JavaScript etc.

TIMAI2 · February 21, 2020, 1:43pm

I have worked up the dataChanged scenario using javascript. This works fine in my computer browser, but I have some more work to do on the authentication to get it working in a webview (to feed the data back with a webviewstring). Watch this space…

sarkar · February 21, 2020, 1:55pm

@TIMAI2 That’s great! Looking forward for your success!

TIMAI2 · February 21, 2020, 2:47pm

I have also worked up the getTaglist feature.

Here is the completed html which can be used for the dataChanged event. Firebase returns everything, not the individual changed/added/removed item/s, so work needs to be done when the json is received back through the webviewstring. I have the firebase js scripts stored in the assets along with the html file. All the user details and the firebase config, comes through the webviewstring.

<!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. <Use error message here>
  }
});

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>

sarkar · February 23, 2020, 9:49pm

Hi Tim,

That’s great! Could you please explain me how the getData funtions works? Does that get triggered when the data in the database in changed?

TIMAI2 · February 23, 2020, 10:36pm

Yes, any changes (made by anyone from anywhere) are picked up by the html file.

See this firecast for the basics (value events)

You may also want to see the followup, Part II (child events)

Martin_Herraiz · January 3, 2021, 7:31pm

FireBase is accessible by two methods:
• Through the SDK (which seems to be the method used by the native blocks of the experimental FireBase component of AppInventor), and
• Through the REST API (HTTPS requests, which AppInventor can also manage with the Web component):

In practical terms, the difference seems to be that:

In the first way (in addition to simple requests to read and write to the DB), also allows setting a listener to the data base node: The FireBase1 .DataChanged block automatically receives changes (made by others to the database child node to which the ProjectBucket is aiming), and allows information updating, or even real-time communications between Apps.
But those requests are not authenticated, and (even with the available extensions) either you can’t secure de database with rules that prevent universal access to sensible nodes; or you can’t set up a listener on the protected ones.

The second way allows sending authenticated requests from AppInventor apps to the Realtime Database REST API, as simple as passing the ID token (generated and received when logging in with the authentication extension) as the auth=<ID_TOKEN> query string parameter. This would solve the problem of access to nodes restricted by rules for authorized users only.
But, how can I set up a listener with http rest? (so that the app receives data updates from a protected node).

This is a handicap that I’m facing in a several years old project.
Can anybody help?

TIMAI2 · January 3, 2021, 9:16pm

I provided the solution a few posts above....