Simple Login in Firebase Web API

Simple Login in Firebase with Web API

Simple Login in Firebase with Web API

The Internet has become a new World now. And its also dicey in itself in terms of its usage, it has its own faces. To maintain integrity, Authentication and Authorization is the answer. We all know about how to’s of these in Web Apps. Today we will see basic authentication i.e. Simple Login in Firebase. As it is a Database-as-a-Service, it also supplies an authentication system which can be leveraged for basic needs application.

Edit:


Auth schemes in new Google Firebase:
http://time2hack.com/2016/06/auth-schemes-in-google-firebase.html

For quick view on what we are building here, the sweet demo and download links for this Contact Store App are:

Demo  Download

In the last post we had already discussed about the introduction of Firebase and setting up a quic application with Firebase. Lets equip our last app i.e. `Contact Store Application` with Authentication.

So before moving ahead, lets see how the data is stored in Firebase; as in last post we saw a sample data like this:

{
  "contacts" : {
    "-Jl4Y4ek1Gpb1dLW9R8o" : {
      "email" : "pankaj.njoy@gmail.com",
      "location" : {
        "city" : "Gurgaon",
        "state" : "Haryana",
        "zip" : "122001"
      },
      "name" : "Pankaj Patel"
    },
    ...
  }
}

Some notes on Firebase DB:

  • The DB is NoSQL based
  • Data is written JSON
  • Every JSON Object represents a node in a Tree
  • A Node may or may not have child nodes
  • Firebase avoids arrays, because of possible key collision on concurrent access of DB Data
  • Arrays are replaced by Objects of `key` and `value` pairs
  • Keys in collection are generated by Firebase e.g. `-Jl4Y4ek1Gpb1dLW9R8o`

So if the DB has `(suppose)` children till 5th level, and we are accessing any third level child; we will receive all the data which it possess along with all its children.

So we need to plan the application and the DB structure accordingly. And it totally depends on following:

  1. Primary Purpose
  2. Good to Have Features

So for now we are not planning any Contact Sharing, every user is having control on its data and there is no intersection among the users. So as per this plan we can create `users` as immediate child of DB and `contacts` will be the child of `users`. Now it looks like this:

{
  "contactdb" :{
    "profiles" : {
      "1" : {
        "email" : "pankaj.njoy@gmail.com",
        "location" : {
          "city" : "Gurgaon",
          "state" : "Haryana",
          "zip" : "122001"
        },
        "name" : "Pankaj Patel"
      }
    },
    "contacts" : {
      "1" : {
        "-Jl9cQXgm_6YkdC1xgCK" : {
          "name" : "Pankaj",
          "email" : "pankajnjoy@gmail.com",
          "location" : {
            "city" : "Gurgaon",
            "state" : "Haryana",
            "zip" : "122001"
          },
        },
      },
    }
  }
}

For this simple login, we need to enable Email and Password authentication scheme in our Firebase DB.

After that we need to setup the security rules for our DB. It is very critical and important to setup the security rules which works with the authentication scheme and DB structure. As we have decided the DB structure, we would write the security rules as follows. It will have the combination of `.read`, `.write`, `$variables`, `$validations` and some session constants like `auth`.

Short notes on Firebase Security Rules:

  • All the rules will be listed under a global object.
  • `rules`will be the only child in Global Object
  • `.read` and `.write` are used to set the readability and write-ability of any object
  • `.read` and `.write` can be set to `true` OR `false`
  • `.validate` can check what type of data can be written
  • `.validate` can also be used to block the writes
  • `.validate` can’t check for deletions
  • `auth` is a global variable holding the `provider` and `uid` information of user
  • `provider` can be `password`, `facebook`, `github` etc.
  • `uid` is auth scheme based i.e. `simplelogin:1`, `facebook:2`, `github:3` etc.

There’s more that we can do with the firebase security rules. You can get full info on firebase security rules here.

The `profiles` and `contacts` are our data storage areas, and with `.read` and `.write` we can specify who should be allowed to read and write data at particular object. Below the profiles or contacts object, we have specified `$uid` variable to indicate a user logging in, where `auth` will hold the basic authentication info like the `userId` and `provider`. In our Simple Login scheme, `provider` is `password`.

For login, we need to create users. We can create a new user by `createUser` method on our DB reference. This method can be used in following way:

In `createUser`, we accomplished following things sequentially:

  • Created a user with supplied email and password
  • Logged the user in. This is explained further.
  • Saved the extra info in profiles collection in out DB

Now to login with Simple Login scheme in Firebase, `authWithPassword` method can be used in DB Reference.

Now, we have a successful registration and login, we can operate the DB as per our desired data needs. Here’s the full code to the sample Contacts Store app created with the Simple Login in Firebase. In following code, there is some code to make the UI work like a real application.

The sweet demo and download links for this Contact Store App:

Demo  Download

Here is the HTML for our final Contact Store Application:

And the JavaScript for the app:

Happy Coding…!


10 thoughts on “Simple Login in Firebase Web API

Got Something To Say:

Your email address will not be published. Required fields are marked *

*