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.
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!