Setting up Client Credentials OAuth2 with ember-cli and ember-simple-auth - ember.js

Question

I have been trying to setup OAuth2 client credentials flow with ember-cli and Rails API back-end and have hit a dead-end. Maybe because I'm new to ember. What I'm trying to do currently is this:
bower.json
{
"ember-simple-auth": "*"
}
Brocfile.js
app.import('vendor/ember-simple-auth/simple-auth.amd.js')
app.import('vendor/ember-simple-auth/simple-auth-oauth2.amd.js')
initializers/login.js
App.initializer({
name: 'Register Components',
initialize: function(container, application) {
registerComponents(container);
Ember.SimpleAuth.setup(application);
}
});
controllers/login.js
import LoginControllerMixin from 'simple-auth/mixins/login-controller-mixin';
export default Ember.Controller.extend(SimpleAuth.LoginControllerMixin, {
authenticatorFactory: 'simple-auth-authenticator:oauth2-password-grant'
});
templates/login.hbs
<form {{action authenticate on='submit'}}>
<label for="identification">Login</label>
{{view Ember.TextField id='identification' valueBinding='identification' placeholder='Enter Login'}}
<label for="password">Password</label>
{{view Ember.TextField id='password' type='password' valueBinding='password' placeholder='Enter Password'}}
<button type="submit">Login</button>
</form>
Any guides, tutorials or corrections in this regard is appreciated.

Answer 1

The latest release of Ember Simple Auth dropped the need for defining an initializer and added Ember CLI Addons for the library which make setting up everything a lot easier. Also the README and API docs now focus on using the library with Ember CLI which should help you a lot.
Checkout the README: https://github.com/simplabs/ember-simple-auth#readme

Answer 2

I recently discussed this on GitHub. This is what I ended up doing to authenticate the client using HTTP Basic Authentication (in app/app.js):
import OAuth2Authenticator from 'simple-auth-oauth2/authenticators/oauth2';
OAuth2Authenticator.reopen({
makeRequest: function(data) {
var clientId = MyProjectENV.APP.apiClientId;
var clientSecret = MyProjectENV.APP.apiClientSecret;
return Ember.$.ajax({
url: this.serverTokenEndpoint,
type: 'POST',
data: data,
dataType: 'json',
contentType: 'application/x-www-form-urlencoded',
headers: { "Authorization": "Basic " + btoa(clientId + ":" + clientSecret) }
});
}
});
and in config/environment.js:
var ENV = {
// ...
APP: {
apiClientId: "12345",
apiClientSecret: "abcdefg987654"
}

Answer 3

You can include the client id by setting the OAuth 2.0 authenticator's clientId property (see API docs: http://ember-simple-auth.com/api/classes/OAuth2PasswordGrantAuthenticator.html#property_clientId). Contrary to what other answer suggest here you should never ever include a client secret. As soon as you use a secret anywhere in your Ember app it's not a secret anymore as it is included in the source and visible for everyone who has access to the source (which usually is everybody on the whole internet).
Web clients are public clients in terms of OAuth that cannot be trusted, thus cannot use a client secret. You can use the client id for analytics etc. but you shouldn't even trust that on the server side as it could easily be manipulated and of course also used by other clients as it can simply be looked up from the app source.
So please everybody remember:
Never ever use a client secret in an Ember app!!!1!1!

Answer 4

Thanks to the huge effort of marcoow Ember-Simple-Auth supports an easy way of adding a client_it by now!
The value of clientId is set to null in the default authenticator by ESA (see file node_modules/e-s-a/addon/authenticator/oauth2-password-grant.js)
You can override the value in your custom authenticator in the same way you would override your custom server token endpoint.
// app/authenticators/oauth2.js
import OAuth2PasswordGrant from 'ember-simple-auth/authenticators/oauth2-password-grant';
import ENV from '../config/environment';
export default OAuth2PasswordGrant.extend({
serverTokenEndpoint: `${ENV.api.host}/oauth/token`,
clientId: `${ENV.APP.apiClientId}`,
});
You might consider the authors opinion on setting the client_id in this github discussion on esa.
UPDATE:
I updated the source code and deleted the client secret since you should not include it an ember app.