node-webkit and Firebase – Simple and Social Authentication

This post is part 4 of 7 in the series Node Webkit Apps
Tweet about this on TwitterShare on LinkedIn0Share on Google+0Share on Reddit5Buffer this pageFlattr the authorEmail this to someonePrint this page

node-webkit and Firebase – Simple and Social Authentication

In this post, we will take a look at the Integration between Firebase Simple Authentication and node-webkit. We are going to use slush generators to scaffold basic apps for us. Then we will create and configure a Firebase account to manage Simple Authentication i.e. Email and Password and Social Authentication using Twitter, Google and Facebook services.

The final product would look like

Screen Shot 2014-08-15 at 6.20.04 pm Screen Shot 2014-08-15 at 6.20.25 pm Screen Shot 2014-08-15 at 6.21.04 pm

We are going to implement the same using pure Javascript as well as Angularjs.  You can find the completed code here.

So, let us get started.

Prerequisites

If you are new to node-webkit refer

If you are new to Firebase refer

if you are new to Angularjs refer

I would recommend using Sublime text while working with node webkit apps. Refer here for more info.

Authentication with pure Javascript

First, we will build the app using pure javascript. Create a new folder named nwk-fb-auth. Inside this folder create a folder named js-auth and open a terminal/prompt here.

We are going to use a slush generator named slush-nwk-xprs. First we will setup gulp, slush and slush-nwk-xprs modules globally. Run

Windows Mac/*nix
npm i -g gulp slush slush-nwk-xprs    sudo npm i -g gulp slush slush-nwk-xprs

Then we will scaffold the app run

slush nwk-xprs

And provide the app name as js-auth. Slush will take a couple of minutes to setup the project and download the required dependencies. Once that is done, we will run the app for the first time. Execute

gulp run

node-webkit builder will download the required libs for your OS to run the node-webkit app. This may take upto 5 mins depending on your network connection. This is a one time thing. Once the app launches, you will see a loading screen/splash screen for 3 seconds and then you will see the main application, which will look something like

Screen Shot 2014-08-15 at 6.48.09 pm

You can test drive the minimize, maximize and close buttons.

The project folder would look like

To get the understanding of the basic flow, the file listed under main attribute – index.html in package.json will be launched. Inside index.html, we will require app.js, which is our express server. Then we will redirect to the homepage after 3 seconds, making the initial page look like a splash screen. The home page – views/index.ejs is then served from express server.

We need to load the page using the express server because Firebase does not allow SimpleForm Authentication with file:/// protocol. You can checkout this issue for more info.

First thing and optional is to update the splash screen. Open index.html in your favorite editor and update it as

Save the file, re-run the app and you should see

Screen Shot 2014-08-15 at 6.20.04 pm

Next, we will use a theme from Bootswatch named Flatly. You can pick any of the available themes. You can download the Flatly theme CSS from the download button on top and selecting the minified version. Copy this CSS and replace it with  /nwk-fb-auth/js-auth/public/css/bootstrap.css. And you can delete the contents of  /nwk-fb-auth/js-auth/public/css/app.css as we are not going to use these styles.

Next, we will download the required Firebase files. We need Firebase.js and Firebase-simple-login.js. Download the files and dump it inside the public/lib folder.

Next, we will build the login form. I am a very very bad designer and a very very very lazy developer. For a guy like me to build a good login form would take ages. Thanks to Bootsnipp, they have ready made snippets for occasions like these. I will be using this login form snippet, customize it as per our needs and build the Login page.

Now, open views/index.ejs and update it as