In my Ember app, I have an action for login.
login: function(emailAddress, password) {
this.get('session').authenticate('authenticator:jwt', {
'identification': emailAddress,
'password': password
}).catch((reason) => {
console.log('Reason: ' + JSON.stringify(reason));
this.set('errorMessage', 'Login failed.');
});
}
When I test with my server (http://127.0.0.1:8091), it works fine. When the response is 200, I'm logged in. If it's 401, my error message is set.
The problem happens with ember-cli-mirage. I have this code for testing:
this.post('http://127.0.0.1:8091', function(db, req) {
let body = JSON.parse(req.requestBody);
if (body.handler === '[email protected]!' && body.password === 'secretpassword') {
return {
token: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6ImFiYzEyMyJ9.X0O3xMVikn-5l9gXBU5a2XF6vlMmTzm4mCqUNA68e-A',
id: 'abc123'
};
} else {
return new Response(401, {}, {});
}
});
I just send a testing token and it works when the credentials are correct. I can log in into my app. But if I try with wrong credentials, then I get this error in my JS console:
Uncaught TypeError: Cannot read property 'split' of undefined
After a little bit of investigation, it seems the error happens inside the function getTokenData which is called in this piece of code:
authenticate: function authenticate(credentials, headers) {
var _this2 = this;
return new _ember['default'].RSVP.Promise(function (resolve, reject) {
var data = _this2.getAuthenticateData(credentials);
_this2.makeRequest(_this2.serverTokenEndpoint, data, headers).then(function (response) {
_ember['default'].run(function () {
var token = _ember['default'].get(response, _this2.tokenPropertyName);
var tokenData = _this2.getTokenData(token);
var expiresAt = _ember['default'].get(tokenData, _this2.tokenExpireName);
var tokenExpireData = {};
_this2.scheduleAccessTokenRefresh(expiresAt, token);
tokenExpireData[_this2.tokenExpireName] = expiresAt;
response = _ember['default'].merge(response, tokenExpireData);
resolve(_this2.getResponseData(response));
});
}, function (xhr) {
_ember['default'].run(function () {
reject(xhr.responseJSON || xhr.responseText);
});
});
});
},
See the line where it says var tokenData = _this2.getTokenData(token);. Shouldn't the second function (rejected promise) be called since the request was rejected?
It looks like ember-simple-auth-token is trying to work with a token that doesn't exist since the response was an empty 401. I tried including a token even in the rejected request, but I still get the same error.
Remember that when the response comes from my local server (and even my real server), it works fine.
I couldn't find a way to debug mirage. How can I see the details about the responses? Requests don't appear under the Network tab in my Developer Tools from my browser.
What next should I look into to fix this?
