Ember-Simple-Auth OAuth 2.0 not sending the right parameters

Question

So I am setting up ember-simple-auth using the OAuth 2.0 extension. The issue is whenever I try to login and look at what's being sent as form data, it's only sending the grant_type and password parameter. However, the password parameter is always empty, and sometimes it doesn't even show up. The username parameter is always missing, I haven't seen it thus far.

Here is my login.hbs code (btw I am using ember-cli)

<form {{action 'authenticate' on='submit'}}>
  <label for="identification">Login</label>
  {{input class="form-control" id='identification' placeholder='Enter Login' value=identification}}
  <label for="password">Password</label>
  {{input class="form-control" id='password' placeholder='Enter Password' type='password' value=password}}
  <button type="submit">Login</button>
</form>

My login.js code in controllers

import Ember from 'ember';
import LoginControllerMixin from 'simple-auth/mixins/login-controller-mixin';

export default Ember.Controller.extend(LoginControllerMixin, {
  authenticator: 'simple-auth-authenticator:oauth2-password-grant'
});

My application.js code in controllers

// app/routes/application.js
import Ember from 'ember';
import ApplicationRouteMixin from 'simple-auth/mixins/application-route-mixin';

export default Ember.Route.extend(ApplicationRouteMixin);

In my config/environment.js file

if (environment === 'development') {
  …
  ENV['simple-auth-oauth2'] = {
    serverTokenEndpoint: '/api/v1/oauth/token'
  }
  …
}

It's making the call to the right url after this change

In my initializers folder

// app/initializers/simple-auth-config.js
export default {
  name:       'simple-auth-config',
  before:     'simple-auth',
  initialize: function() {
    window.ENV = FrontENV;
  }
};

It's pretty easy to notice that most of this code is copied from the tutorial on simplelabs with some customizations. However, I can't figure out why the parameters aren't being sent correctly. Any help would be appreciated!

Answer 1

The missing parameters are client_id and client_secret. Ember-Simple-Auth OAuth 2.0 doesn't include these, as they are not secret when used in an ember app. You need to create a custom authenticator like this to include both parameters:

//app/authenticators/mine.js
import Authenticator from 'simple-auth-oauth2/authenticators/oauth2';

export default Authenticator.extend({
    makeRequest: function(url, data) {
        data.client_id = '…';
        data.client_secret = '…';
        return this._super(url, data);
    }
});

You can use it like the OAuth 2.0 Authenticator by replacing simple-auth-authenticator:oauth2-password-grant with authenticator:mine.

In the following are the rest of the files for a working example.

//app/controllers/login.js
import Ember from 'ember';
import LoginControllerMixin from 'simple-auth/mixins/login-controller-mixin';

export default Ember.Controller.extend(LoginControllerMixin, {
    authenticator: 'authenticator:mine'
});

 

//app/routes/application.js
import Ember from 'ember';
import ApplicationRouteMixin from 'simple-auth/mixins/application-route-mixin';

export default Ember.Route.extend(
    ApplicationRouteMixin
);

 

//app/routes/index.js
import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(
    AuthenticatedRouteMixin
);

 

//app/routes/login.js
import Ember from 'ember';
import UnauthenticatedRouteMixin from 'simple-auth/mixins/unauthenticated-route-mixin';

export default Ember.Route.extend(
    UnauthenticatedRouteMixin
);

 

<!-- app/templates/application.hbs -->
{{#if session.isAuthenticated}}
  <h2 id="title">Welcome to Ember.js</h2>
  <a {{ action 'invalidateSession' }}>Logout</a>
{{/if}}

{{outlet}}

 

<!-- app/templates/index.hbs -->
<p>Private page</p>

 

<!-- app/templates/login.hbs -->
<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>

 

//config/environment.js
(…)

ENV['simple-auth'] = {
    authorizer: 'simple-auth-authorizer:oauth2-bearer'
}

ENV['simple-auth-oauth2'] = {
    serverTokenEndpoint: '/api/v1/oauth/token'
}

(…)

This answer is derived from the comments on the mentioned question on the Ember Simple Auth issue tracker.