Use web component to write data to Firebase Realtime DB

Discuss
1

Can anyone tell me if it’s possible to save or retrieve data from Firebase Realtime DB using the Web Component? If so, is there a tutorial on the forum?

2

Hi dear,

3

I did some recording tests. Following the example I noticed that when recording he put another different uid that is in Authentication

A block-based programming interface showing code to save user input data (name and email) to a Firebase database when a save button is clicked, followed by showing a success alert. (Captioned by AI)
A block-based programming interface showing code to save user input data (name and email) to a Firebase database when a save button is clicked, followed by showing a success alert. (Captioned by AI)898×434 28 KB

Firebase Authetication - uid:

The image shows an authentication admin interface with a user list displaying one user, including details such as email, creation and last login dates, and a unique identifier, along with a notification banner about two-step authentication being disabled for Firebase Dynamic Links. (Captioned by AI)
The image shows an authentication admin interface with a user list displaying one user, including details such as email, creation and last login dates, and a unique identifier, along with a notification banner about two-step authentication being disabled for Firebase Dynamic Links. (Captioned by AI)1490×674 47.3 KB

Firebase Realtime - different uid

The image displays a Firebase realtime database interface showing a 'supermarket' node with a child node containing an email and name entry for a user named "fulano de tal." (Captioned by AI)
The image displays a Firebase realtime database interface showing a 'supermarket' node with a child node containing an email and name entry for a user named "fulano de tal." (Captioned by AI)875×296 16.3 KB

This is the rule I used and I don’t know if it has to do with the different uid

A snippet of JSON code defining read and write permissions as true for a 'supermarket' object within 'rules'. (Captioned by AI)
A snippet of JSON code defining read and write permissions as true for a 'supermarket' object within 'rules'. (Captioned by AI)390×282 6.89 KB

I tried using another rule:

This image shows a JSON snippet defining database rules where users can read and write data only if their user ID matches the authenticated user's ID. (Captioned by AI)
This image shows a JSON snippet defining database rules where users can read and write data only if their user ID matches the authenticated user's ID. (Captioned by AI)566×318 9.89 KB

A mobile app screen titled 'Screen1' shows two input fields filled with 'beltrano' and 'beltrano@ig.com', a 'Save' button, and an error message below stating '401 application/json; charset=utf-8 ((error Permission denied))'. (Captioned by AI)
A mobile app screen titled 'Screen1' shows two input fields filled with 'beltrano' and 'beltrano@ig.com', a 'Save' button, and an error message below stating '401 application/json; charset=utf-8 ((error Permission denied))'. (Captioned by AI)298×608 17.1 KB

Can someone tell me what I did wrong?

4

That’s not the UID but a randomly generated unique key.

component_event
When a user authenticates, they get a user ID that corresponds to this one.

5

Ok I have the userid, now how do I do with this structure so that it appears in this recording?

This image shows a block-based programming script for Firebase Authentication, initialising global variables, and handling a save button click event to post user name and email data to a specified URL. (Captioned by AI)
This image shows a block-based programming script for Firebase Authentication, initialising global variables, and handling a save button click event to post user name and email data to a specified URL. (Captioned by AI)830×554 34.5 KB

6

global_firebase/supermarket/uid.json

7

Hi… I was just wondering why the Initialize block says "supermerkat while the Web URL says supermarket?

8

His Firebase project is called supermerkat-3f880, and inside the database, it’s pointing to the supermarket bucket.

9

I saw this too, but I made the correction.
In this database I will have: People Registration, Products and Brands Registration, Budgets.
In this case, would the Url look like this?

A visual programming code block sets a URL to post JSON data containing personal details like name, email, address, and profile image to a web database. (Captioned by AI)
A visual programming code block sets a URL to post JSON data containing personal details like name, email, address, and profile image to a web database. (Captioned by AI)736×409 47.5 KB

And what would the rule be in realtime?

10

Always add .json at the end.

11

You should explain in detail what you would like to achieve.

12

Would this security rule alone be enough if the writing and reading structure remained like this?

The image shows a Firestore security rules configuration that restricts read and write access to documents within the 'supermarket' collection so that only the authenticated user matching the document ID can access them. (Captioned by AI)
The image shows a Firestore security rules configuration that restricts read and write access to documents within the 'supermarket' collection so that only the authenticated user matching the document ID can access them. (Captioned by AI)843×463 42.5 KB

image
image626×120 12.9 KB

I’ve read about the Realtime rules several times but I get confused when building and which one to use.

13

If you’ve fixed the code and the key you mentioned now matches the user’s UID, only that user will be able to read/write within that node.

1 Like
14

Perfect, Gianluca!
Thank you so much again for your help!

15

I’ll wrap up this post. I’d like to thank everyone, especially Gianluca, who provided the tutorial on using the web component to read, write, and update Firebase data.

16

It was a pleasure helping you, I wish you a great day!

17

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.