Ember, Ember ClI, Emberfire, Firbase, Simple Login Example

1intro.md

#Hello!

##I wanted to throw out an example of using Ember, Ember CLI, Emberfire, Firebase, Firebase Simple Login to set up authenticiation, and redirecting.

A couple of setup tasks:

1. Assuming you already have Ember CLI and have basic knowledge of Ember and Firebase
2. npm install --save emberfire
3. bower install --save emberfire
4. bower install --save-dev firebase-simple-login
   And add "app.import('vendor/firebase-simple-login/firebase-simple-login.js'); " to your Brocfile.js

###There may be a better way but this is my initial stab let me know what I can improve on...

P.S. I needed to rename the titles of these gist files because I can have subdirectories and couldn't have duplicate names so I included the actual file location in the code itself (usually the first line)

applicationadapter.js

// adapters/application.js
// this is the ember data connection to Firebase

import DS from 'ember-data';

export default DS.FirebaseAdapter.extend({
	firebase: new window.Firebase('https://<< INSERT YOUR FIREBASE CONNECTION HERE >>firebaseio.com')
});

auth.js

// initializers/auth.js
// This is where most of the magic happens in the authentication!!!

import Ember from 'ember';

// We are creating an auth object that will handle communication between our Ember app and Firebase
var auth = Ember.Object.extend({  
	
  init: function(route) {
    this.authClient = new window.FirebaseSimpleLogin(new window.Firebase("https://gFIREBASE CONNECTION HERE), function(error, user) {
      if (error) {
        alert('Authentication failed: ' + error);
      } else if (user) {
      	// if already a user redirect to the secret resource
      	route.transitionTo('secret')
      } else if (route.routeName !== 'login'){
      	// if the route is anything but the login route and there is not a user than redirect to the login resource
      	route.transitionTo('login')
      }
    }.bind(this));
  },

// this is an action that will be call from our other routes and will be passed a few different params
// email and password are set on the login template and passed through the controller action that calls this object
// I'm also passing in the login Controller object so that I can automatically transition after login

  login: function(email, password, loginController) {
  	this.authClient.login('password', {
		email: email,
		password: password
		// rememberMe: remember
	}).then(function(){
		loginController.transitionToRoute('secret')
	});	
  },

// this is an action that will we want to call anywhere in the application that a logged in user can be
// because of this I put I set up this action in the secret Route so that every logout action will bubble up to that action
// I'm also passing in the secretRoute object so that I can automatically transition after logout
  logout: function(secretRoute) {
    	this.authClient.logout().then(function(){
    		secretRoute.transitionTo('login')
    	});	
  },
});

// this is where this auth initializer gets added to every router and controller in our app and container
// without this we would not have access to this auth object
export default {
  name: 'Auth',

  initialize: function(container, app) {
    app.register('auth:main', auth, {singleton: true});
    app.inject('controller', 'auth', 'auth:main');
    app.inject('route', 'auth', 'auth:main');
  }
};

login.hbs

{{!-- templates/login.hbs --}}
<h1>Hello from login template</h1>

{{!-- this is where the login function calls the login controller login action which passes
the email and password variables collected here to the auth object --}}
{{!-- this should be basic handlebars and ember actions and there are great tutorials on the ember website --}}
<form>
	{{input value=email}}
	{{input value=password}}
	<button {{ action 'login'}}>login</button>  
</form>  

{{#link-to 'login.resetPassword'}}forgot password?{{/link-to}}

{{outlet}}

logincontroller.js

// controller/login.js
// This is the login controller

import Ember from 'ember';

export default Ember.Controller.extend({
	actions: {
		login: function() {
			// here is where I'm calling the global auth object and calling the login method while passing through the email 
			// and password from the template and passing the controller object (this) so that I can redirect
      			this.get('auth').login(this.email, this.password, this)
    		}
	}
});

loginroute.js

// routes/login.js
// This is the login router

import Ember from 'ember';

export default Ember.Route.extend({
	// This is how I check to see if there is a current user
	// I'm passing in this route for redirect purposes
	// I run it in the beforeModel hook to reduce API calls since this hook will happen first
	beforeModel: function(){
		this.get('auth').init(this)
	}
});

router.js

// router.js

import Ember from 'ember';

var Router = Ember.Router.extend({
  location: MyAppENV.locationType
});

Router.map(function() {  
//this is a siple login route that will have a template with form to submit a login action
  this.resource('login', function(){
	  this.route('resetPassword');
  });
// All resources and route nested under secret will automatically check the auth client to see 
// if there is a use and if there isn't then they will be redirected back to the login resource
  this.resources('secret');  	
});

export default Router;

secret.hbs

{{!-- templates/secret.hbs --}}
{{!-- this should be basic handlebars and ember actions and there are great tutorials on the ember website --}}
<h1>Hello from a secret place</h1>
<button {{ action 'logout'}}>logout</button>  

secretroute.js

// This the secret Route file
// routes/secret.js
import Ember from 'ember';

export default Ember.Route.extend({
	// This is how I check to see if there is a current user
	// I'm passing in this route for redirect purposes
	// I run it in the beforeModel hook to reduce API calls since this hook will happen first
	beforeModel: function() {
		this.get('auth').init(this)
	},

	// Again this calls the Auth object and runs the logout function with (this) router object for redirecting
	actions: {    
	    	logout: function() {
	      		this.get('auth').logout(this);
		}
  	}
});