Recently I’ve setup an ember project and I needed authentication. There is an excellent library / cli plug-in called ember-simple-auth. While the guides are great, the most recent version of Ember(1.13 / 2) doesn’t play nicely with the latest ember-simple-auth.
Ember-Simple-Auth, provides a special branch called jjAbrams (PR 602). While it is an awesome library, getting it to work can be somewhat tricky as not everything is as documented and requires some tweaks here and there. I’m trying to outline what I did, in the hopes it will save time for many others. And help prevent other devs from banging their heads against their keyboards, posting issues on git repositories or irc channels, or reading simple-auth source code to understand why things don’t work they way they are suppose to (as I did) in the hopes of understanding why things don’t work. Especially if you’re running against a custom server, like I did.
Here are the steps to get it working.
First create an ember app using ember-cli
ember new app-name
Then follow the instructions on ember-simple-auth, how to get this specials build. It’s rather simple but still you need to make sure you don’t have any of the ember-simple-auth / simple-auth packages in your package.json / bower.json and also delete them from your node_modules / bower_components directories. Here is the pull request for it (make sure to read it as it explain how to get setup).
<li>Next create an application route (if you don't have one). open the command prompt and type:
ember g route application
<li>Then add the application route mixin to the route:
// app/routes/application.js
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';
export default Ember.Route.extend(ApplicationRouteMixin,{
... rest of application route code
});
Next add a Login page and login controller and a protected page (notice I’m not using the LoginMixin as in many of Ember-Auth examples as it states it’s deprecated and I’ve also chosen not to use the Unauthenticated mixin (just because I’d rather leave that always accessible).
ember g route login
ember g controller login
ember g route protected
edit the login controller file:
import Ember from 'ember';
// app/controllers/login.js
export default Ember.Controller.extend({
session: Ember.inject.service('session'),
actions: {
// called when the login button is pressed
// will authenticate agains the ember-simple-auth authentication infrastructur
authenticate: function() {
this.set('errorText',null); //in case your want to display an error
var creditionals = {};
var that = this;
creditionals.identification = this.get('model.identification');
creditionals.password = this.get('model.password');
new Ember.RSVP.Promise(function (resolve,reject) {
return (that.get('session.isAuthenticated')) ? that.get('session').invalidate() : resolve(true);
})
//first invalidate, so we clear past data.
.then (function () {
return that.get('session').authenticate('authenticator:custom',creditionals);
})
.then(function authSuccess() {
// this hook is not automatically called, and seemed to have change, so I just trigger the action myself.
that.send('sessionAuthenticationSucceeded');
},function authFailed() {
that.set('errorText','Login Failed!');
});
}
}
});
and the protected page route
// app/routes/protected.js
import Ember from 'ember';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
export default Ember.Route.extend(AuthenticatedRouteMixin,{
});
then edit the login template (I have some bootstrap styling here)
Next create an authenticators directory and an custom.js (authenticates login requests and restores session on refresh) Notice I use the same name everywhere (access_token) as once you resolve when authenticating it stores all the info in the session.
//app/authentiactors/custom.js
import Ember from 'ember';
import Base from 'ember-simple-auth/authenticators/base';
export default Base.extend({
restore: function(data) {
return new Ember.RSVP.Promise(function(resolve, reject) {
if (!Ember.isEmpty(data.access_token)) {
resolve(data);
} else {
reject();
}
});
},
authenticate: function(credentials) {
return new Ember.RSVP.Promise(function (resolve, reject) {
// make the request to authenticate the user at /authpath endpoint.
Ember.$.ajax({
url: '/authpath',
type: 'POST',
contentType : 'application/json',
dataType : 'json',
data: JSON.stringify({"email":credentials.identification,"password":credentials.password}),
}).then(function (response) {
resolve({ access_token: response.token, account_id: response.id }); //saving to the session.
}, function (xhr, status, error) {
reject(xhr.responseText);
});
});
},
invalidate: function(data) {
return new Ember.RSVP.resolve(true); //does nothing for now, you should add code for this to work. (clear the session, send a logout to the server)
}
});
And now create an authorizers directory and a custom authorizer Notice that the info is is accessible via that.get(‘session.authentication’) (not session.secure as in other documentation!)..
// app/authorizers/custom.js
import Ember from 'ember';
import Base from 'ember-simple-auth/authorizers/base';
export default Base.extend({
//notice the change, it will add an authorization header, in this case I'm using basic http authentication.
authorize: function(addHeaderFunction, requestOptions) {
if (this.get('session.isAuthenticated') && !Ember.isEmpty(this.get('session.authenticated.access_token'))) {
var basicHTTPToken = btoa(this.get('session.authenticated.account_id') + ":" + this.get('session.authenticated.access_token'));
addHeaderFunction('Authorization', 'Basic ' + basicHTTPToken);
}
}
});
