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+3Share 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

And add the below code to /nwk-fb-auth/js-auth/public/js/app.js

Save all files and run the app, you should see the new login form with sign up and sign in animations. Screen Shot 2014-08-15 at 7.19.11 pm

Configure Firebase Simple Login

Navigate to your Firebase app and open the Forge. Once you are in the forge, you will see a Simple Login tab/link on the left hand side of the page. Click on it and you will see the main content area on the right hand side refresh.

Here, we will select all the authentication providers we need. You need to enable Facebook, Twitter, Google and Email & Password. To get the API key,

  • Facebook : Follow this
  • Twitter : Follow this
  • Google : Follow this

If you are facing any issues while following the above, do not hesitate to drop a comment.

Once the Firebase login configuration is done, we will configure Firebase in  /nwk-fb-auth/js-auth/public/js/app.js. To set up a Firebase reference, add

Next, we will configure the FirebaseSimpleLogin. Add the below code

As you can see from the above, FirebaseSimpleLogin()  takes in the Firebase reference and returns the state of the user.

Line 3 – Handles authentication issues. This is fired when the user enters incorrect/invalid credentials.

Line 12 – On page load, the   FirebaseSimpleLogin() is fired and the user’s current logged in status is returned. If the user has already logged in the current browser and the session is active, this block of code will be executed. Here we are redirecting the user to the homepage of our application (which we will create in a while).

Line 27 – This block of code will get fired when the user is not logged in. If the user is not on the home page when this happens, we will redirect the user to the same.

Next, we will add the  signup() to the app.js

When the user submits the Signup form, we will validate the same. Once if everything is in place, we will call the  auth.createUser() passing in the email, password of the user. If there are any errors, we will handle the same on line 17. Once the user creation is successful, we will trigger a login. This will take care of redirecting the user to the appropriate page.

Sign in is also pretty similar to Sign up

Line 6 is responsible for firing the request. The success and error of this operation will be handle in the   FirebaseSimpleLogin(), and the corresponding action will be taken.

To login with a provider, all we need to do is call  auth.login()  and pass in the provider like

And finally logout

The completed   /nwk-fb-auth/js-auth/public/js/app.js would be

Now, for the home page. We will create a new view named home.ejs inside the views folder and update it as

And then we will add this page to our routes. Open  /nwk-fb-auth/js-auth/routes/index.js and update it as

And then open  /nwk-fb-auth/js-auth/app.js  and add the below code on line 21

Save all files and run the app and you should see the expected output. You can try Sign up and Sign In, which is based on email. And you can also login using Twitter, Facebook and Google.

Rolling out installers

You run the below commands to generate OS specific installers

Mac

gulp build-osx

Windows

gulp build-win

Linux

gulp build-linux

The above tasks will take care of downloading the required libraries and build the installer. Once all the above tasks are completed, you should see the updated folder structure as

Screen Shot 2014-08-15 at 8.16.50 pm

Simple and easy right? This concludes how to integrate Firebase Simple Authentication and node-webkit using pure Javascript.

Authentication with Angularjs

If you have jumped to this section directly, I would recommend completing the Pure Javascript section before continuing, as I would be covering only the difference in Angularjs integration.

Create a new folder named ng-auth  inside the nwk-fb-auth folder. We will be using a slush generator named slush-wean to scaffold a node-webkit/express/angular app. Open terminal/prompt inside the ng-auth folder and run

Windows Mac/*nix
npm i -g slush-wean    sudo npm i -g slush-wean

This will install the generator globally. To scaffold a new app, run

slush wean

And you can provide the project name as ng-auth. Slush will download and setup the required dependencies. To run the app, execute

gulp run

This is the same app as what we developed above, except the Javascript layer is coded on Angularjs. The project structure

[update] : Since version 0.1.8, the folder structure has changed to

To integrate Firebase authentication, we need Firebase.jsFirebase-simple-login.js and AngularFire.js. Download the resources and dump them inside the public/lib folder.

Update the nwk-fb-auth/ng-auth/index.html, as we did above to reflect the new splash screen. If you open /nwk-fb-auth/ng-auth/public/js/app.js, you will see complete Angular code is cramped up into one file. We will split this code across files to keep our code more organized. Inside the public/js folder, create 3 new files

  1. public/js/controllers.js
  2. public/js/directive.js
  3. public/js/factory.js

The updated /nwk-fb-auth/ng-auth/public/js/app.js would be

We create a new module named ng-auth, inject the required dependencies and we configure the routes. We have 2 main routes, one for Login page and one for the Home page, after successful login.

Next, open factory.js and update it as below

We will be exposing node-webkit’s gui and window objects as services. Next, open controllers.js and add the main controller

This will be our base controller. Here, we instantiate Firebase and $firebaseSimpleLogin.   We add a utility method to manage redirects for us, which will be used upon authentication.

Next, we have the Toolbar controller, that performs the minimize, toggle full screen and close functions. In continuation to above code, add

PS : The Window dependency above is from the GUI factory.

Next, the main Authentication logic

Line 3 – Create an empty user model

Line 16 – The signup logic. If the user has entered valid credentials, we call the $createUser()  to create a new account. If the user creation is successful, we redirect the user to the home page, else we show the appropriate message.

Line 40 – The sign in logic. If the user has entered valid credentials, we call the  $login()  to authenticate the user. If the user is successfully authenticated, we redirect the user to the home page, else we show the appropriate message.

Line 59 : The authentication logic for provider based login.

And finally the Home Controller, which has the logout method

Now, we have all the required controllers. If you did notice the Sign In, Sign Up panels, they switch between each other with a jQuery toggle. This is DOM manipulation and as per Angular philosophy, we need to convert this to a directive. So open directives.js and add the below code

Now, we will add the required partials. Inside public/partials create 2 new files named auth.html and home.html. Open auth.html and update it as

Do notice the directive on line nos 33, 72. Open home.html and update it as

Now, remove all contents of public/css/app.css and update public/css/bootstrap.css with Bootswatch’s Flatly theme.

Finally the updated views/index.ejs

Save all files and run the app and you should see the same output as above.

Hope you got a decent understanding on how to integrate Firebase Simple and Social authentication with node-webkit.


Thanks for reading! Do comment.
@arvindr21

Series Navigation<< Node webkit and Angularjs – A MovieStub AppNode-Webkit File Player – A File player for your desktop >>
Tweet about this on TwitterShare on LinkedIn0Share on Google+3Share on Reddit5Buffer this pageFlattr the authorEmail this to someonePrint this page
  • Dhana Shekar

    Hi Arvind….Firstly Thank you for the great tutorials…i am getting below error..Module name “nw.gui” has not been loaded yet for context: _. Use require([])
    http://requirejs.org/docs/errors.html#notloaded ,,, can you please suggest..?

    Thank you

  • Mayank Kalbhor

    Its been late but when i am trying this tutorial i am getting an error on gulp run

    $ gulp run

    [22:10:52] Using gulpfile e:fireAppgulpFile.js

    [22:10:52] Starting ‘run’…

    Using v0.10.1

    Create cache folder in e:fireAppnode_modulesnode-webkit-buildercache.10.1

    Downloading: http://dl.node-webkit.org/v0.10.1/node-webkit-v0.10.1-win-ia32.zip

    undefined

    Unable to download nodewebkit.

    [22:10:55] Finished ‘run’ after 2.63 s

    I am on
    $ node -v

    v4.2.2

    What is wrong?

  • soil

    Hi, Arvind, It’s an awesome tutorial. One thing I encountered in the beginning of the steps is that when I run gulp run, the downloading of nodewebkit fails everytime. In the end, I had to manually download nodewebkit and unzip it under node-webkit-builder -> cache directory for it to work. Any idea is appreciated!

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks Soil. Fixed the slush-wean generator. Updated the nwk builder that fixed the download path to the new nwjs.io location. Do test and let me know (npm install [email protected]).

      Thanks.

      • soil

        Thanks for the quick reply Arvind. The new slush-wean works awesome. A little thing I noticed on Mac, I’m not sure if mine is a special case, but I need to give ‘slush wean’ command the admin permission for scaffolding.

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          Hello Soil. Great!

          Yes, while installing the generator, you need to install it globally and you may not have access to the npm folder ( https://coderwall.com/p/wm62yg/install-global-node-modules-without-sudo?p=1&q=author%3Aarvindr21 ) . That is why, you are running as sudo. But the command $ slush wean does not need sudo. Or may be the folder you are scaffolding does not have appropriate permission. Please cross check that.

          Thanks.

  • 9ine

    gulp run is not working for ubuntu 13.0.*.. please refer this article for fixing this issue on ubuntu 13.0.*
    https://www.exponential.io/blog/install-node-webkit-on-ubuntu-linux

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      Thanks for sharing 9ine.

      • 9ine

        My Pleasure Arvind, I really enjoy your articles and tutorials..keep up the good work

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          Thanks! Appreciate your support.

  • lcat

    hello`head on over to the Simple Login section in your Firebase Dashboard. Enable Google authentication and then copy your Google application credentials (Client ID and Client Secret) into the appropriate inputs.

    I dont find this(Google authentication)?

    • http://thejackalofjavascript.com/ Arvind Ravulavaru

      You can checkout the below screenshot :

      • lcat

        Solved, thanks ~ really like your article

        • http://thejackalofjavascript.com/ Arvind Ravulavaru

          Thanks