Getting Started with FIREBASE 3.x, They turnt things up!!

$: firebast init

I’m a Firebase lover, because of it’s simplicity, realtime action and robustness. Some many months ago in 2014 :D Firebase got acquired by @Google, and what happens when Google takes over? Let’s get started setting up a simple FRONT-END application implementing just a custom login for a start.

1. Create a firebase project @ https://firebase.google.com/console/,
2. Now make a new directory/folder call it anything you want, by opening your favourite code editor, for me i use sublime text which you can download at https://www.sublimetext.com/3 if you would like to try it out :D. Inside the folder create an index.html file and a .js file(i would name mine firebase-config.js)you can name yours anything.

You can paste this is firebase-config.js and index.html files respectively.Please make sure to update whats needs to be done in your firebase-config.js file.

If you notice in firebase-config.js, the config object has 4 keys:

1. apiKey -> Which is required, And it's being autogenerated for you by google, just visit https://console.developers.google.com/apis/credentials and get the browser key for this tutorial.
2. authDomain -> Optional for use if you are using firebase authentication, you have to add the domain name to the google Api Credentials via the link above.
3. databaseURL -> Realtime database (they say it’s optional but well……. :D) Oh and now you can use multiple databases for a single application.
4. storageBucket -> Now look at this….you can now upload/download files to google cloud storage regardless of the file size. One interesting thing i saw in this feature,
maxOperationRetryTime: The maximum time to retry operations
maxUploadRetryTime: The maximum time to retry uploads

Imagine you have to write the code to handle this for you, you would probable have to introduce some external module again into your code.

Based on those four hot keys listed, Firebase has splited the `firebase.js` file into separate modules and you can then include the files you want.

For example, you want to make use of just firebase database, all you need to do is include files

<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>

Moving on………….

create a new-file, i called mine auth.js now add it in your index.html, where we would write our custom authentication logic.

Run this in your browser, you can run this static page by going into your terminal then

$ cd into your project directory && python -m SimpleHTTPServer

Then visit localhost:8000, this only works if you have python installed on your PC, it comes installed by default for MAC users and can be download here https://www.python.org/downloads/

Now if you have that running, look at this, look at this….open up your developer console, type in an invalid email and enter a password, now click the submit button, and tell me what you SEEEEE….yeah that’s right, firebase just handled your validations for you, try entering a password less than 6 digits….tell me what you see again :D ……

Okay now to create a user Firebase has this, once a user is created they are automatically signed in, according to firebase

firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) {
console.log(error)
}

Awesome init? Firebase now has promises. No need to use Promisify.

firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
      console.log(user);
    } else {
      console.error("No user signed in");
    }
  })
}

Up there, is an observable that checks the authentication state of your user, if the user is signed in or not…..then you can perform whatever actions as redirecting to another view…etc

Now let’s enter the right details like we should….And we should be succesfully registered, you can visit https://console.firebase.google.com/project/YOUR_FIREBASE_PROJECT_ID/authentication/users to see your users or go to your console and click the Auth section.

To sign users in, is almost same as creating users

firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
    var errorCode = error.code;
    var errorMessage = error.message;
    console.error({ ErrorCode: errorCode, ErrorMessage: errorMessage });
});

And thats’ all there is to it on a basic custom registration, you should note that firebase handles the password for each user on their end, so you don’t need to worry about securing passwords.

You can find the full code to this bit on here https://github.com/jihdeh/firebase30CustomAuth

And the demo on here https://umbrella77-3bf3e.firebaseapp.com (and this is being hosted with firebase hosting).You can only host static webpages on firebase hosting.

However this maybe awesome, but as for database querying on firebase, i’d love if they have many more queries like using mongo, asides that, firebase is killing it in every other area and they help you bring all your apps together, both mobile and web.

I’ve only scratched the surface on this, to learn more visit https://firebase.google.com/docs/auth/web/password-auth.

More to come on Firebase….