Home > Uncategorized > #HelloWorld for #Firebase for the web

#HelloWorld for #Firebase for the web


While creating a demo site, which was purely static HTML page Payhook.co.uk, I decided that it would be worthwhile recording anyone who actually went to register on the website. My usual approach would have been the following

  • Create a SQL server database, with a ‘users’ table
  • Write C# code to insert into the users table
  • Write an ASPX page to receive an Ajax call and call the user insertion function
  • Write Javascript to post the fields to the ASPX page via Ajax.

All that is fine, and arguably more secure than the aproach listed below, but since my motivations were really more to learn about Firebase, let’s put security aside for now.

First, you go and create a Firebase project with Google, and insert the initialisation script in the page, which looks something like the following;

// Initialize Firebase
var config = {
apiKey: “xxxxx-xxxxx”,
authDomain: “xxx-xxx.firebaseapp.com”,
databaseURL: “https://xxxx-xxxx.firebaseio.com”,
projectId: “xxxx-xxxx”,
storageBucket: “”,
messagingSenderId: “xxxxx”

That initialises the Firebase connection, but doesn’t really do much.

Now, the big Gotcha here, is that by default, the Firebase database is locked down, so you cannot read or write to it. Which is useless. Instead, I’m opening the doors right up, which makes it useless for security, but as I said, I’m glossing over that for now.

Press Database > Rules, and use this template;

“rules”: {
“.read”: true,
“.write”: true

Now, I’m going to use the push command to push a user object up to the database server. It’s NoSQL, so I don’t need to define a schema first.

username: $(“#tbName”).val(),
email: $(“#tbEmail”).val(),
password: $(“#tbPassword”).val()
function () {
location.href = “dashboard.html”;

Here, tbName, tbEmail, and tbPassword were defined on the page as id’s for their respective text boxes. Also, you probably see that this code requires JQuery to be included and initialised.

The second parameter to push() is the callback, and is used to make sure the data is sent to Google Firebase before the user moves to the next page.


And, to verify that everthing is there, you can log back into Google Firebase, and you can see the data displayed there.

This no-security approach to Firebase is only realy useful for storing data that you don’t care who sees or edits, like simple analytics, and certainly should never be used to store passwords, like this demo. But you should get the idea.


Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: