# Help with JWT Auth with Ember Simple Auth, Ember Simple Auth Token, and Knock on Rails Backend

**URL:** https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292
**Category:** Questions
**Created:** [March 10, 2019, 4:26pm UTC](https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292 "2019-03-10T16:26:16Z")
**Posts on this page:** 18
**Page:** 1

<div class="post-metadata">

### Author: ![johnnyicon](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/johnnyicon/32/13390_2.png) [@johnnyicon](https://discuss.emberjs.com/u/johnnyicon)
#### Post date: [March 10, 2019, 4:26pm UTC](https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292/1 "2019-03-10T16:26:16Z")

</div>

Hi there,

I am having trouble with setting up JWT authentication with Ember Simple Auth, Ember Simple Auth Token, and Knock on a Rails Backend.

The only part that doesn’t seem to be working is that the user does seem to be loaded into the session after being authenticated.

In summary, here’s what I have:

1. Ember: login form sends email and password to Rails Backend
  1. Login form is using [Ember Simple Auth Token’s JWT authenticator](https://github.com/jpadilla/ember-simple-auth-token/blob/master/addon/authenticators/jwt.js)

2. Rails + Knock: authenticates the credentials and returns a JWT token
3. Ember: receives the JWT token and says it’s been authenticated

However, when I look at the Ember Data Store, there is no user loaded. Am I missing something here?

---

<div class="post-metadata">

### Author: ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)
#### Post date: [March 11, 2019, 3:47pm UTC](https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292/2 "2019-03-11T15:47:02Z")

</div>

Not sure what you mean by “user” in this context, assuming it’s a model with some user data for the currently logged-in user, but ESA and the authentication system don’t really have anything to do with fetching a user record. The function of ESA is to use some method of authentication to fetch some sort of authorization information (usually a token, in this case a JWT). Fetching user data isn’t really included in this domain of concern. Many apps may not want to do that and even if they did the API/model formats would vary greatly.

So all that to say, it sounds like your authentication setup is working great and the user fetching is just a roll your own kinda thing. One API I worked with in the past had an endpoint that was something like `/users/me` for fetching your own user record, but you could also get it via ID or email or whatever. Really depends on your backend. I think in some implementations you could include the user id in the JWT that you get, and then once you have the JWT you could look up the user record.

---

<div class="post-metadata">

### Author: ![johnnyicon](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/johnnyicon/32/13390_2.png) [@johnnyicon](https://discuss.emberjs.com/u/johnnyicon)
#### Post date: [March 11, 2019, 6:50pm UTC](https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292/3 "2019-03-11T18:50:34Z")

</div>

Thanks!

To your question, by `user`, I’m referring to both the Ember model and Rails model that is used for authentication and authorization.

When I log in with the credentials for a user (e.g., email and password), I expect the Rails backend to authenticate the credentials and return a JWT token, and then for Ember/ESA/ESAT to use that token for future requests. In addition, I was expecting ESA/ESAT to automatically load the `user` with whom’s credentials I used to be loaded into the Ember Data Store.

As you mentioned, loading the currently logged in user into the Ember Data Store is not an automatic thing but rather “roll your own.” Fortunately, ESA documentation provided an example of how to do this here: [Managing a Current User](https://github.com/simplabs/ember-simple-auth/blob/master/guides/managing-current-user.md).

This example loads and manages the current user using an Ember service. It also provides two different ways for loading the current user’s data:

1. via a dedicated API endpoint; and
2. using the user’s ID and using `findRecord`.

I opted to use the first approach: a dedicated API endpoint. However, it still doesn’t seem to work.

For reference, here’s what I did.

#### Created a `/users/me` endpoint in my Rails app

```auto
# routes.rb
...
resources :users do
  get "me", on: :collection
...

```

```auto
# controllers/users_controller.rb
class User < ApplicationRecord
  ...
  def me
    render json: current_user #current_user is provided by Knock
  end
  ...
end

```

#### Created Ember service as per ESA guide

```auto
// app/services/current-user.js
import Ember from 'ember';

const { inject: { service }, RSVP } = Ember;

export default Ember.Service.extend({
  session: service('session'),
  store: service(),

  load() {
    if (this.get('session.isAuthenticated')) {
      return this.get('store').queryRecord('user', { me: true }).then((user) => {
        this.set('user', user);
      });
    } else {
      return RSVP.resolve();
    }
  }
});

```

#### Created user adapter as ESA guide

```auto
// app/adapters/user.js
import ApplicationAdapter from './application';

export default ApplicationAdapter.extend({
  urlForQueryRecord(query) {
    if (query.me) {
      delete query.me;
      return `${this._super(...arguments)}/me`;
    }

    return this._super(...arguments);
  }
});

```

#### Modified `routes/appplication.js` to load the the current user as per [the ESA guide](https://github.com/simplabs/ember-simple-auth/blob/master/guides/managing-current-user.md#loading-the-current-user)

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

const { service } = Ember.inject;

export default Ember.Route.extend(ApplicationRouteMixin, {
  currentUser: service(),

  beforeModel() {
    return this._loadCurrentUser();
  },

  sessionAuthenticated() {
    this._super(...arguments);
    this._loadCurrentUser();
  },

  _loadCurrentUser() {
    return this.get('currentUser').load().catch(() => this.get('session').invalidate());
  }
});

```

However, this doesn’t seem to work. The code within `_loadCurrentUser` of `routes/application.js` constantly fails and then invalidates the session after each authentication.

If I remove calls to `_loadCurrentUser()` with `routes/application.js`, then the session remains authenticated. However, as a result, no user is loaded into the Ember Data Store.

The guide makes it seem all pretty straight forward, so I’m not sure what I’m doing wrong.

---

<div class="post-metadata">

### Author: ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)
#### Post date: [March 11, 2019, 8:11pm UTC](https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292/4 "2019-03-11T20:11:00Z")

</div>

Ah gotcha. Didn’t know they added that to the ESA docs, that’s great. At a glance all your Ember code looks fine. I can’t speak to the Rails stuff as it’s been a while but that also seems pretty straightforward.

So you said this:

> The code within `_loadCurrentUser` of `routes/application.js` constantly fails and then invalidates the session after each authentication.

Any idea why it fails? If it is invalidating the session it sound like your API might be returning an error response code like 401 or something.

---

<div class="post-metadata">

### Author: ![johnnyicon](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/johnnyicon/32/13390_2.png) [@johnnyicon](https://discuss.emberjs.com/u/johnnyicon)
#### Post date: [March 11, 2019, 9:01pm UTC](https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292/5 "2019-03-11T21:01:45Z")

</div>

The API seems to be working fine. I can see it returning the proper JSON object with the User data in it.

I’m still pretty new to RSVP/Promises, but it seems like there’s a weird race condition going on. While I can see the API returning the appropriate JSON, it seems to be, somehow, too late and the `catch` block which invalidates the session inside `_loadCurrentUser()` runs.

---

<div class="post-metadata">

### Author: ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)
#### Post date: [March 11, 2019, 9:09pm UTC](https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292/6 "2019-03-11T21:09:23Z")

</div>

Ok maybe try replacing the \_loadCurrentUser method with this:

```auto
  _loadCurrentUser() {
    return this.get('currentUser').load().catch((error) => {
      // put a breakpoint and maybe a console.log here and see what "error" is and where it's coming from
      return this.get('session').invalidate();
    });
  }

```

And put a breakpoint in there to try and figure out where the error is coming from. AFAIK catch should only be triggered if there is a runtime error or if the request fails so my guess is either there’s an issue happening in the “load” method or there’s some other problem caused by the function call stack which results from making the request.

---

<div class="post-metadata">

### Author: ![johnnyicon](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/johnnyicon/32/13390_2.png) [@johnnyicon](https://discuss.emberjs.com/u/johnnyicon)
#### Post date: [March 11, 2019, 9:49pm UTC](https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292/7 "2019-03-11T21:49:19Z")

</div>

This is the error I’m getting:

```auto
TypeError: (0 , _private.getOwner) is not a function
    at Class.serializerFor (ext.js:81)
    at Class.superWrapper [as serializerFor] (utils.js:350)
    at serializerForAdapter (-private.js:7097)
    at -private.js:7453
    at tryCatcher (rsvp.js:334)
    at invokeCallback (rsvp.js:507)
    at publish (rsvp.js:493)
    at rsvp.js:17
    at invoke (backburner.js:331)
    at Queue.flush (backburner.js:223)

```

---

<div class="post-metadata">

### Author: ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)
#### Post date: [March 12, 2019, 1:10am UTC](https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292/8 "2019-03-12T01:10:05Z")

</div>

Hmmmm ok well that’s something but that is kinda weird. It looks like it’s failing when trying to serialize the server response at the step where it looks up which serializer to use…

You aren’t customizing the store are you? And do you have a serializer for “user” also? And what does your application serializer look like? If you don’t have a user serializer maybe try defining one that re-exports the application serializer…

---

<div class="post-metadata">

### Author: ![johnnyicon](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/johnnyicon/32/13390_2.png) [@johnnyicon](https://discuss.emberjs.com/u/johnnyicon)
#### Post date: [March 12, 2019, 1:25am UTC](https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292/9 "2019-03-12T01:25:43Z")

</div>

I’m not modiying the store within this set of code from what I can tell. I’ve inherited this app, so I haven’t had a chance to look through it thoroughly. From a surface level search, the app has:

- adapters/user.js
- models/user.js

There is no serializer/user.js. I’ll try creating one now.

---

<div class="post-metadata">

### Author: ![johnnyicon](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/johnnyicon/32/13390_2.png) [@johnnyicon](https://discuss.emberjs.com/u/johnnyicon)
#### Post date: [March 12, 2019, 1:52am UTC](https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292/10 "2019-03-12T01:52:24Z")

</div>

I followed this guide to create the serializer: [Customizing Serializers](https://guides.emberjs.com/release/models/customizing-serializers/#toc_customizing-serializers).

This is what my `user` serializer looks like:

```auto
import DS from 'ember-data';

export default DS.JSONAPISerializer.extend({
});

```

Not much to it. It is the same code as what would have been in the `serializers/application.js` if the app had one – which it doesn’t.

---

<div class="post-metadata">

### Author: ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)
#### Post date: [March 12, 2019, 2:19am UTC](https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292/11 "2019-03-12T02:19:11Z")

</div>

Ok… and that didn’t change anything? Is your application adapter extending JSONAPIAdapter? If not what does that look like?

---

<div class="post-metadata">

### Author: ![johnnyicon](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/johnnyicon/32/13390_2.png) [@johnnyicon](https://discuss.emberjs.com/u/johnnyicon)
#### Post date: [March 12, 2019, 2:34am UTC](https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292/12 "2019-03-12T02:34:57Z")

</div>

The user adapter is extending `ApplicationAdapter`. I copied the implementation from the ESA guide. Here’s what it looks like:

```auto
import ApplicationAdapter from './application';

export default ApplicationAdapter.extend({
  urlForQueryRecord(query) {
    if (query.me) {
      delete query.me;
      return `${this._super(...arguments)}/me`;
    }

    return this._super(...arguments);
  }
});

```

---

<div class="post-metadata">

### Author: ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)
#### Post date: [March 12, 2019, 2:47am UTC](https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292/13 "2019-03-12T02:47:44Z")

</div>

Yeah but I mean if it’s extending your application adapter what does that look like? The first line:

```auto
import ApplicationAdapter from './application';

```

Is trying to import and extend the adapter in `app/adapters/application.js`. So if the application adapter is a custom one it may be choking on that somewhere, if not that’s a dead end. If you don’t have an application adapter defined I’d expect that import to fail, i think during build time, so that would be strange…

---

<div class="post-metadata">

### Author: ![johnnyicon](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/johnnyicon/32/13390_2.png) [@johnnyicon](https://discuss.emberjs.com/u/johnnyicon)
#### Post date: [March 12, 2019, 3:01am UTC](https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292/14 "2019-03-12T03:01:55Z")

</div>

Here’s the `ApplicationAdapter`. It’s using a mixin from Ember Simple Auth Token.

```auto
import ActiveModelAdapter from 'active-model-adapter';
import TokenAuthorizerMixin from 'ember-simple-auth-token/mixins/token-authorizer';
import config from '../config/environment';

export default ActiveModelAdapter.extend(TokenAuthorizerMixin, {
  host: `${config.host}`,
});

```

---

<div class="post-metadata">

### Author: ![dknutsen](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/dknutsen/32/16471_2.png) [@dknutsen](https://discuss.emberjs.com/u/dknutsen)
#### Post date: [March 12, 2019, 2:16pm UTC](https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292/15 "2019-03-12T14:16:39Z")

</div>

Ok… that’s one of the things I was guessing. I’d think you’d need to use the active model serializer also (unless your API is emitting JSONAPI format?). So try making an application serializer that looks like this (from active model adapter docs):

```auto
// app/serializers/application.js
import { ActiveModelSerializer } from 'active-model-adapter';

export default ActiveModelSerializer.extend();

```

and then either delete the user serializer or change it to:

```auto
// app/serializers/user.js
import ApplicationSerializer from './application';

export default ApplicationSerializer.extend();

```

I’m not sure that will fix anything but it will at least mean you have the correct adapter/serializer pair worked out. The active model adapter has the following:

```auto
defaultSerializer: '-active-model'

```

So I’d think it would correctly infer the serializer type but it’s worth ruling that out…

---

<div class="post-metadata">

### Author: ![johnnyicon](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/johnnyicon/32/13390_2.png) [@johnnyicon](https://discuss.emberjs.com/u/johnnyicon)
#### Post date: [March 12, 2019, 3:15pm UTC](https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292/16 "2019-03-12T15:15:45Z")

</div>

First of all, thanks so much for continuing to help! I really appreciate it!

I’ve made the changes you’ve suggested. Unfortunately, the error is still occurring.

From what I can tell, the API is using the `active-model-adapter` syntax. This is the JSON response for requesting the current user from `/users/me`

```auto
{"user":{"id":1,"email":"john@test.com","first_name":"J","last_name":"G","title":null,"created_at":"2019-02-20T05:35:55.376+13:00","updated_at":"2019-02-20T05:35:55.376+13:00","initials":"JG","organisational_unit_id":1}}

```

From what I understand, `active-model-adapter` simple changes the naming conventions to use underscores instead of camelCase. So that looks right.

What is interesting, however, is that my Rails API isn’t using the `ember-rails` or `active-model-adapter-source` gem. It is, instead, using [`active-model-serializers`](https://github.com/rails-api/active_model_serializers) which seems to be no longer active but also seems to be doing the right thing.

---

<div class="post-metadata">

### Author: ![rustyshackleford](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/rustyshackleford/32/13290_2.png) [@rustyshackleford](https://discuss.emberjs.com/u/rustyshackleford)
#### Post date: [March 15, 2019, 6:43pm UTC](https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292/17 "2019-03-15T18:43:20Z")

</div>

Hi,

I can’t speak much to the specific issue you are having, but I figured I’d chime in with my side project which used the same libraries you are trying to use.

[Frontend Code](https://github.com/mattmcquinn/dg-scorecard-frontend)

[Backend Code](https://github.com/mattmcquinn/dg-scorecard)

[This blog series](https://www.thegreatcodeadventure.com/jwt-authentication-with-rails-ember-part-ii-custom-ember-simple-auth/) was a great help when I got this working initially.

Feel free to dig around either repo and I can try to answer any questions you may have.

Hope that helps.

Matt

---

<div class="post-metadata">

### Author: ![johnnyicon](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/johnnyicon/32/13390_2.png) [@johnnyicon](https://discuss.emberjs.com/u/johnnyicon)
#### Post date: [April 9, 2019, 11:36pm UTC](https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292/18 "2019-04-09T23:36:55Z")

</div>

I thought I would follow up to let everyone know that I have resovled this issue. After a lot of debugging and help with members form the Discord community, what it boiled down to was an out of date module that was being used for managing model data.

The culprit was `ember-data-model-fragments` was out of date. This is why I was getting the following error: `TypeError: (0 , _private.getOwner) is not a function` (I mentioned this error [above](https://discuss.emberjs.com/t/help-with-jwt-auth-with-ember-simple-auth-ember-simple-auth-token-and-knock-on-rails-backend/16292/7))

After updating the module, it all worked. I should mention that I also did a lot of other work updating the auth code to follow best practices, as the previous implementation wasn’t up to scratch. However, updating this module seemed to be the missing piece to making JWT/ESA/ESAT work with Knock/RoR.

Hope this helps others!
