Ionic 2 App Integration with Auth0 and Firebase

Problem Statement: Ionic 2 App authenticates using Auth0 and then using Auth0 token to firebase API as backend without using firebase authentication.

Solution: I have created base version of this project in GitHub. You can clone it from here.

1. Clone the project
2. npm install ionic cordova typescript -g
3. After cloning project, run npm install for all local packages to install.

Step 1:

I am using facebook authentication with Auth0, so first we need to create facebook app in developer console.

Once you got application Id and App Secret then add the following Auth0 callback url on successful authentication. Fore new Apps, you need to add facebook login by clicking on “Add product” and then go to “Settings” to add callback Url.

Step 2:

Create Firebase app in console.
Now we need to get Api key to integrate to Auth0. Click on seetings icon.

Now go to Service Accounts and then click “Generate Private Key” downloads JSON. we will use this information in Auth0 Configuration.

Next need to get firebase config, for this go to Overview-> Add to web. this configuration is used in appmodule.ts

Step 3:

Create Auth0 Account
Now go to social connection and select facebook. Enter application id,app secret, scope you need for your application.

Create new application with type “Native”. Change callback url if needed.

Now go to Addons tab and enable firebase. Fill information in settings from the json file got from firebase.

Now go to connections tab in your app, go and enable facebook. if you remember we enabled facebook in social connection and then we add facebook for each and every app we work.

Step 4:

Now we will go through some of the code.

src/auth0-variables.ts: You will set Auth0 App details in this file before you run the application.
src/app/app.module.ts: We will configure angular fire module with firebase configuration info as shown above.
login() method shows Auth0 screen.
constructor() This has authentication callback where we get Auth0 token and then we can get firebase access token.

Angular ui-grid without using scope

I started using Angular ui-grid in my application. I could found only documentation with $scope usage.

ui-grid version: 3.1.1

Link to ui-grid selection docs

Reason: one of the main reason why i want to avoid scope, our Angular 2 migration will be lot easy.

Created sample project in Plunker: Sample Project

1. In this ui-grid version both cell navigation and grid row selection will not work together
2. You can pass null value for scope parameter. you can refer to event registration in controller code.

gridApi.selection.on.rowSelectionChanged(null, _self.onSelectRow);
var GridController = (function () {
    function GridController() {
        this.gridOptions = this.getGridOptions(); = [{name: "test1", gender: "male", company: "com1"},
        {name: "test2", gender: "male", company: "com2"},
        {name: "test3", gender: "female", company: "com3"}]
    GridController.prototype.getGridOptions = function () {
        var _self = this;
        return {
            enableRowSelection: true,
            enableRowHeaderSelection: false,
            columnDefs: [
                { field: 'name' },
      { field: 'gender' },
      { field: 'company' }
            appScopeProvider: _self,
            multiSelect: false,
            modifierKeysToMultiSelect: false,
            noUnselect: true,
            enableFiltering: true,
            enableSorting: true,
            onRegisterApi: function (gridApi) {
                _self.gridApi = gridApi;
                gridApi.selection.on.rowSelectionChanged(null, _self.onSelectRow);
    GridController.prototype.onSelectRow = function (selectedRow) {
    return GridController;


Note: This has code for modules and directives. Directive uses controller as syntax

// Code goes here
(function() {
  var appControllers = angular.module("app.Controllers", []);
  appControllers.controller("GridController", GridController);

  var appDirectives = angular.module("app.Directives", ["ui.grid", "ui.grid.selection", 'ui.grid.cellNav', 'ui.grid.pinning']);

  appDirectives.directive("demoGrid", function() {
    return ({
      restrict: 'E',
      templateUrl: "grid.html",
      controller: "GridController as gc",

  var app = angular.module("app", ["app.Controllers", "app.Directives"]);


Happy Coding!

AngularJS setup with TypeScript

Recently I started building web applications with Angular and TypeScript. I thought it will good one to create a seed project to myself.

This project is created using
MVC 6, TypeScript and AngularJS 1.5
npm managing packages and running tasks

gulp: for running tasks
Reason:Tasks are written in JavaScript, so it’s much more easy to debug incase of errors.

typings: Since tsd is deprecated, I have used to install typescript definition files. Most of the editors are capable of providing IntelliSense based on these definition files.

browserify: This helps bundle packaging modules written in CommonJS.
Reason: This is much more closer to server side development like NodeJS.

template cache: This creates angular module with all the html templates in project.

sass: compiles all scss files to css
Reason: I chose scss because syntax is much closer to css.

normalize.css: This resets default styling in all major browsers. this helps us getting consisting look across all browsers.

Project can be downloaded from: download from github

Run the following commands from root folder where are config files are present (WebApp folder).

npm install typescript gulp -g

npm install

typings install

Happy Coding!