How do we connect to firebase Db using Oauth2, from App inventor

Data Storage
1

Hi all, I am trying to figure out how to use Oauth2 from my app to connect to firebase via oAuth2 (built-in in firebase) and set the online Db security rules so that only users from my app can consume the data.
The issue here is that I can do this from a webpage using node and JS to authenticate my users. But how do I do it in App inventor apps? Secondly, how do I set up the firebase data rules so that the Db only allows my users access. The security sample script on firebase Db (below) looks simple but how do we use it is my issue.
{ "rules": { ".read": true, ".write": true } }
I cannot figure out how to use sample secure rule (as below) to allow my App users entry while keeping the rest out.
{
"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"
}
}
}
}
How/where do I get the user_id and where do I get the auth.uid ?

A simple App inventor demo project with detailed blocks would of great help.
Thanks in advance.

1 Like
2

You can do it with firebase extensions (free and paid)
https://puravidaapps.com/extensions.php - search for firebase
a combination of extensions and the web component
How to have Secure Rules on Firebase, and allow Auth Users to Read/Write
or just the web component
Firebase Authentication with Web component and HTML

3

Thank you for the quick reply Tim. Will read up and revert

4

Thanks! Great references. Working on the https://ai2.metricrat.co.uk/guides/how-to-have-secure-rules-on-firebase-and-allow-auth-users-to-readwrite
demo.
I have a question here.... how do we log off. That block is not available. How do I use the firebaseAuth component for that?
Thanks in advance.

1 Like
5

from my third link above:

//signout user
if ( wvstr.split(",")[5]  == 'SIGNOUT' ) {
 auth.signOut(); 
}
1 Like
6

Thank you for the code to signout the user, however i am presently trying out your code using firebaseauth (refer https://ai2.metricrat.co.uk/guides/how-to-have-secure-rules-on-firebase-and-allow-auth-users-to-readwrite). So could you please let me know how to apply your code in firebaseauth?
Thanks.

7

As it says in my how to:

Sign Out / Log off is handled when the app is closed, but the idToken will expire after one hour, the user will need to Sign in again.

There is no method provided in the extension for sign out.

8

Thanks for the clarity on how the firebaseauth does not have a way of signing off.
And thank you for the demo app. It works very well and I am getting tons of ideas on how to use it in my own app. That was a really fabulous demo: simple, succinct yet fully implementable within minutes!

I would also like to request you for some help related to the demo.
Once a user is logged in, he is given a useridToken and all his data is stored under a branch which has the id of his token. Now here is my question (so that I can strategize the architecture of the Db): I have various users who create data records that are added to their own branches of the Db. Now the data of all these users needs to be accessed by a supervisor (who is logged in using his own ID) to view, edit AND write in his comments in some empty fields that are already available. These are then viewed by the users and acted upon. To summarize, how do I get a supervisor (a different person with a different id) to view and edit another user's data?

9

You would have to write a set of rules in firebase for that user - the supervisor, in order to give them read/write access to everything.

Something like this:

1 Like
10

Thank you, went through the url then tried the following, regrettably did not work. Any suggestions?

firebasesecurity
firebasesecurity955×790 65.7 KB

11

Something like this?

{
  "rules": {
    ".read": true,
    ".write": "auth.uid === 'dJrGShfgfd2'"
  }
  "myusers": {
     "$uid" : {
      ".read":  "$uid = auth.uid",
      ".write": "$uid = auth.uid"
     }
  }
}
12

You may need to put it around the other way....?

{
  "rules": {
     "myusers": {
     "$uid" : {
      ".read":  "$uid = auth.uid",
      ".write": "$uid = auth.uid"
     }
  }
    ".read": true,
    ".write": "auth.uid === 'dJrGShfgfd2'" //the supervisor uid
  
  }
}
13

It might be more accountable to let the supervisor only read the users' branches,
and have a list of the user IDs to track them all. Let the users know a branch ID of the supervisor that is read-all so they can see the supervisors' comments about their branch data.

Alternatively, if the supervisor has to revise user data, log his changes under each user branch separately, like comments on a Google Doc.

14

Thank you. The last part worked.
So I managed to get the data to load on to the realtime Db using your metric rat page that combines the firebaseauth and web components.
I could now use some suggestions on how to upload images/docs to the firebase storage using a similar combo of firebaseauth and web components.

15

That is a great idea, thanks. Will try it out once I finish with the image upload part.

16

Firebase Storage with Web Component

17

Dear Tim,
A request, is it possible for you to give me a single string that I can place in the web component (in the blue ringed area)? The currentuidpath is a unique name for the folder in which the images would be placed. 'firebaseio' would probably become 'appspot' and so on. I can extract the required parts of the string and concat them together, so no issues there. This would really make it simple for me, especially since I've already got the authentication and realtime Db string via the web component working perfectly. Of course there needs to be some place in the string for the MIME type.

webdb
webdb922×579 85.6 KB

Thank you for all the help.

18

Not quite sure what you mean. My firebase storage example uses the webviewer, not the web component to upload files, thus encompassing all the credentials as well ?

19

Oh, I have not tried the webviewer. Thanks. Will try it.

BTW, another issue. When I try capturing the path of a file from my mobile for upload of the content, the path looks weird and does not upload using the firebasestorage component. The path looks like "content://com.android.externalstorage.documents/document/primary%3Aenglishbook.pdf" (for a pdf file) and "content://com.android.media.documents/document/image%3A234543" (for a jpg image)

Do I need to remove/add some text to this so as to make it an uploadable path?
Here are the blocks I use to access files in my phone

uploadfileblocks
uploadfileblocks1761×511 143 KB

20

It is easiest to use Taifun's File extension and the block provided to convert a content uri to a file path.

Also, be wary of file paths at the moment, the last update to App Inventor introduced some changes, especially for Android 9 and 10, that moves file locations. It will get worse/better when Android 11 comes along.