Firebase Auth "$uid" Tutorial - Create Personal Nodes for Your Users!

firebase
tutorial
extension

#1

Hello Thunkers!
On the forum, I see a lot of questions like: “How do I use Firebase Realtime Database and Firebase Authentication with $uid in rules to create personal nodes for each user?” I have asked this question too, but nobody answered. But I found a solution for this and in this tutorial, I will show you how to do so.

PREREQUISITES:

For Authentication itself we are going to use Firebase Auth 3.0 Extension created by @mirxtrem_apps , since it is free to use and works perfectly. No other extensions are required.
You can download Firebase Auth 3.0 extension HERE

STEP 1: Set up Firebase Rules!
If you want to create personal nodes for each user and keep them private from other users, you at first have to set the Firebase Realtime Database rules. Once you sign into your Firebase console, you will go to Database, then Realtime Database and in the end Rules. You may create your own ones or paste example rules from Firebase Documentation.
These rules look like this:

STEP 2: Get your components!
When you set up all the rules, lets go to your Thunkable project. Import the extension you have downloaded and create a component for it. Then you will need two Web components, not to be confused with WebViewer, but just Web. You can find it in Palette under Connectivity section.
This is just optional, you can rename them however you want, or not rename at all, but for this tutorial we are using names “FirebaseDB_Enhanced_WRITE” and “FirebaseDB_Enhanced_READ”.
Also, you have to set your Firebase API Key in Firebase Auth Extension properties, otherwise this will not work, as it needs to know which project should it sign or log in.
You can find your API Key in Firebase console —> Authentication —> Web Setup and search for line starting with apiKey:. Copy it without quotes.

STEP 3: The BLOCKS!
This is probably the most exciting part. The Blocks! So I have prepared everything for you. You can re-build it yourself from the image here, or copy it through backpack from the .aia project under the image.


PrivilegedRESTRequests.aia (42.2 KB)

DESCRIPTION OF FUNCTIONS
You may wonder how it all works. You have 4 global variables, all except the Firebase_DatabaseName are initialized to empty strings. This one, you have to put your Database Name into it. You can find it also in Web Setup as described in Step 2, but under the project-Id now.
In “when FirebaseAuth1.FirebaseAuthUserData” you can add whatever you want, just keep these 3 variables as they are in the example and don’t change them, unless you really know, what you’re doing.
In “to FirebaseDB_SetValue_Privileged” you don’t have to do anything. There are just replacement blocks to process $uid flag, then Set URL of the web component so it writes data to the correct location in your database. There is also the Put Text block, so that it sends the data to your Database with a simple JSON Value generator.
In the “when FirebaseDB_Enhanced_WRITE.GotText” we are converting the response the Database gives us with the written data and their tag and calling the function that acts as DataChanged in classic Firebase_DB component. Once you do all, you can add whatever you want into this Procedure, while having Tag and Value available.
In “FirebaseDB_GetValue_Privileged” we are replacing $uid with user’s uid and sending a Get request to your database.
In “when FirebaseDB_Enhanced_READ.GotText” we are extracting the Tag from the URL we have sent our request to and removing leading and trailing quotes from Value.
The idToken has an expiration time of what I know 1 hour. So you will need to refresh it after a while. For this, you just call the FirebaseAuth1.RefreshIdToken and as RefreshToken you use the global variable called CurrentRefreshToken. After the refresh token you can also add whatever you want, just keep these 2 set variable blocks as they are.

STEP 4 Try it out!
For WRITE: Once you have done all this, you can just go ahead and use it! Once the user has already authenticated in your app, you can access his personal node. If you want to set the value in your Firebase Realtime Database, just take the block SetValue from Procedures and set tag and value as you would in normal FirebaseDB. And finally, Value is the data you want to store under the given tag.
For READ: Take the GetValue from Procedures and define Tag, you can also use $uid in it. Under when_Firebase_Enhanced_GotData Procedure (acts as an Event Handler) you can add whatever you want, while having the Tag and Value available. Acts as GotValue in classic FirebaseDB.

That’s all folks! I hope it helped you in some way!
Happy Thunking!
G_Lise710


#2

Great Job!! congratulations.
HAve you probe it with Firebase Storage Rules?


#3

Yes, I tried it, and it works, I use almost the same rules in my own project. I have nicknames as readable/writable for public (it is just for checking uniqueness of the new nickname) and then every user has his own data in his account under users node. That one is readable for all and writable just for that user, who owns it.
Using the method described in this tutorial you also bypass the Runtime Error “Permission denied.” you get, when using classic FirebaseDB component and not having absolute READ access. That is because you don’t keep persistent connection with this method, but you always create a new one throught the PUT request onto REST endpoint of your Firebase Realtime Database.
EDIT: You meant Storage, oh! :smiley:
And with Firebase Storage I haven’t tried yet, but it should be possible to be done similar way too. I will take a look at it in a few hours maybe. Should I put it here, edit the first post, or create a new one with Authentication with Storage?


#4

Hey man do you have a idea how i can make some rules for my databse. I have a database for my chat app, in this database each one should have the permission to wirte in the chat tag for the chat. I have different chatrooms with different tags.
and each user should have his own place where i can store user data and other things about or from the user. In Kodular and block… we have the firebae auth component but there is no component for id token only id user. so i dont kow how to work with that. Pls can you help me with that. Thank you.

You have made a good post about firebase auth and user data. Really nice man. Thanks. .


#5

Error “Permission denied. Too


#6

Do you mean the Runtime Error at launch, or the error in “sandwich” notifier, just when you try to read/write something?


#7

Yes.I can’t update data to realtime data base now.


#8

Could I please see a screenshot or get a more detailed description of the error itself and when it occurs, so I can try to fix it?


#9


#10

I making code follow you


#11

This error occurs if you are using the built-in Firebase_DB component. You need to use Web component for this to work. If you are using normal Firebase_DB, you will get this error, once you deny read permission in any place in your database. You will need to remove the built-in Firebase_DB. If you have any blocks associated with it, you need to swap these for the ones that you got from this tutorial. You can use the Web component (named FirebaseDB_Enhanced) based communication, even when reading from or writing to public areas of the database. Hope it helped. If the problem persists, reply to this and it would really be good, if you have described what your app does/is supposed to do, optionally providing the blocks. If you don’t want to post your code here, ask me for my email address.


#12

i will post capture at this tomorrow because my office is close now. Thank you sir very much.


#13

we have a problem we cannot change the project bucket with web com ponent so it is a problem. it is nice to store tags and values but there is no block for a project bucket.


#14


What is component?
I can’t download file Aia please send to email [email protected]
Thank you.


#16

CaptureRulefirebase
My firebase test (not secret).