Ember simple auth with custom server authentication (credentials undefined) - ember.js

Question

I am newbie with Ember and trying to implement a basic auth (username + password in the 'authentication' header) with a custom server using ember simple auth and ember-cli. The problem is that the credentials object is undefined when it is received within the 'authenticate' method defined in the CustomAuthenticator.
What's wrong with this code?
app/initializers/login.js
import Ember from 'ember';
import BaseAuthenticator from 'simple-auth/authenticators/base';
import BaseAuthorizer from 'simple-auth/authorizers/base';
window.ENV = window.ENV || {};
window.ENV['simple-auth'] = {
authorizer: 'authorizer:custom',
session: 'session:withCurrentUser'
};
export default {
name: 'authentication',
before: 'simple-auth',
initialize: function(container/*, application*/) {
container.register('authorizer:custom', CustomAuthorizer);
container.register('authenticator:custom', CustomAuthenticator);
}
};
var CustomAuthorizer = BaseAuthorizer.extend({
authorize: function(jqXHR/*, requestOptions*/) {
if (this.get('session.isAuthenticated') && !Ember.isEmpty(this.get('session.token'))) {
jqXHR.setRequestHeader('Authorization', 'Token: ' + this.get('session.token'));
}
}
});
var CustomAuthenticator = BaseAuthenticator.extend({
tokenEndpoint: '/v1/login',
restore: function(data) {
return new Ember.RSVP.Promise(function(resolve, reject) {
if (!Ember.isEmpty(data.token)) {
resolve(data);
} else {
reject();
}
});
},
authenticate: function(credentials) {
//*** HERE THE CREDENTIALS OBJECT IS NULL ***
var _this = this;
if(!Ember.isEmpty(credentials.identification)) {
return this._super(credentials);
} else {
return new Ember.RSVP.Promise(function(resolve, reject) {
Ember.$.ajax({
url: _this.tokenEndpoint,
type: 'POST',
data: JSON.stringify({ session: { identification: credentials.identification, password: credentials.password } }),
contentType: 'application/json'
}).then(function(response) {
Ember.run(function() {
resolve({ token: response.session.token });
});
}, function(xhr/*, status, error*/) {
var response = JSON.parse(xhr.responseText);
Ember.run(function() {
reject(response.error);
});
});
});
}
},
invalidate: function() {
var _this = this;
return new Ember.RSVP.Promise(function(resolve) {
Ember.$.ajax({ url: _this.tokenEndpoint, type: 'DELETE' }).always(function() {
resolve();
});
});
},
});
app/pods/login/controller.js
import AuthenticationControllerMixin from 'simple-auth/mixins/authentication-controller-mixin';
import Ember from 'ember';
export default Ember.Controller.extend(AuthenticationControllerMixin, {
authenticator: 'authenticator:custom'
});
app/pods/login/template.hbs
<div class='container'>
<form {{action 'authenticate' on='submit'}}>
<label for="identification">Login</label>
{{input value=identification placeholder='Enter Login'}}
<label for="password">Password</label>
{{input value=password placeholder='Enter Password' type='password'}}
<button type="submit">Login</button>
</form>
{{#if errorMessage}}
<div class="alert alert-danger">
<p>
<strong>Login failed:</strong> <code>{{errorMessage}}</code>
</p>
</div>
{{/if}}
</div>

Answer 1

import LoginControllerMixin from 'simple-auth/mixins/login-controller-mixin';
instead of
import AuthenticationControllerMixin from 'simple-auth/mixins/authentication-controller-mixin';