Ember simple auth doesn't send auth header to api - ember.js

Question

I'm trying make authorization in my ember application.
Its working on client side, but ember doesn't attach Bearer token to api request.
My adapter
import DS from 'ember-data';
import DataAdapterMixin from 'ember-simple-auth/mixins/data-adapter-mixin';
export default DS.JSONAPIAdapter.extend(DataAdapterMixin, {
host: 'http://localhost/money-app-api/web/app_dev.php/api',
authorizer: 'authorizer:application'
});
My authorizer:
import Ember from 'ember';
import OAuth2Bearer from 'ember-simple-auth/authorizers/oauth2-bearer';
const { isEmpty } = Ember;
export default OAuth2Bearer.extend({
authorize(data, block) {
const accessToken = data['access_token'];
if (!isEmpty(accessToken)) {
block('Authorization', `Bearer ${accessToken}`);
}
accessToken in authorizer is exists and is correct.
My api is correct too, i tested it by Postman.

Answer 1

I am writing you a full tutorial please just follow that hope it works for you.
//folders and files tree
adapters
--- application.js
authenticators
--- oauth2.js
authorizers
---- oauth2-bearer.js
Adapters/application.js
import DS from 'ember-data';
import DataAdapterMixin from 'ember-simple-auth/mixins/data-adapter-mixin';
export default DS.JSONAPIAdapter.extend(DataAdapterMixin,{
authorizer: 'authorizer:oauth2-bearer',
host: 'http://localhost/money-app-api/web/app_dev.php',
namespace: 'api'
});
authenticators/oauth2.js
import OAuth2PasswordGrant from 'ember-simple-auth/authenticators/oauth2-password-grant';
export default OAuth2PasswordGrant.extend({
serverTokenEndpoint: 'http://localhost/money-app-api/web/app_dev.php/token'
});
authorizers/oauth2-bearer.js
export { default } from 'ember-simple-auth/authorizers/oauth2-bearer';
so now in your route, application.js, you are able to use the following code: this is just for demo purpose you need to modify as you need.
this.get('session').authorize('authorizer:oauth2-bearer', (headerName, headerValue) => {
headers[headerName] = headerValue;
});
I am writing an authentication in route/application.js to clarify more. in this example I am getting Account and User information based on session which has already authenticated .
import Ember from 'ember';
import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';
import config from '../config/environment';
export default Ember.Route.extend(ApplicationRouteMixin, {
model() {
return Ember.RSVP.hash({
account: new Ember.RSVP.Promise((resolve, reject) => {
if (!this.get('session.isAuthenticated')) {
resolve({});
return;
}
let store = this.store,
session = this.get('session');
let headers = {};
this.get('session').authorize('authorizer:oauth2-bearer', (headerName, headerValue) => {
headers[headerName] = headerValue;
});
return Ember.$.ajax(config.apiUrl + '/api/account', {
headers: headers
}).then(data => {
if (data) {
store.pushPayload(data);
resolve(store.peekRecord('user', data.data.id));
} else {
reject({});
session.invalidate();
}
}).fail(() => {
session.invalidate();
});
})
});
},
sessionAuthenticated() {
this.refresh();
this._super();
}
});
I hope, this can solve your problem.
an important tip:
The REST adapter allows your store to communicate with an HTTP server by
transmitting JSON via XHR. Most Ember.js apps that consume a JSON API
should use the REST adapter.
### Headers customization
Some APIs require HTTP headers, e.g. to provide an API key. Arbitrary
headers can be set as key/value pairs on the `RESTAdapter`'s `headers`
object and Ember Data will send them along with each ajax request.
```app/adapters/application.js
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
headers: {
"API_KEY": "secret key",
"ANOTHER_HEADER": "Some header value"
}
});
```
`headers` can also be used as a computed property to support dynamic
headers. In the example below, the `session` object has been
injected into an adapter by Ember's container.
```app/adapters/application.js
import DS from 'ember-data';
export default DS.RESTAdapter.extend({
headers: Ember.computed('session.authToken', function() {
return {
"API_KEY": this.get("session.authToken"),
"ANOTHER_HEADER": "Some header value"
};
})
});
```
Source

Answer 2

My only problem was that i have not authorization in my accept headers in api
allow_headers: ['origin', 'X-Custom-Auth', 'Content-Type', 'Authorization']
That is strange, because when tested by Postman all was working.