ESA - mock with Mirage when using implicit grant authentication

Testing
1

I’m stuck with a way to mock the authentication with ESA (ember-simple-auth) when using implicit grant authentication. Is there any docs or examples ? Thank you.

2

Obviously you don’t want to actually do a redirect so basically my strategy was to intercept ESA before it starts all of the authentication business, then give the app a fake token and let ESA process it like usual. I did something like this in my custom AuthenticatedRouteMixin:

...
  // override the triggerAuthentication method so if we're in 'mirage' environment we can
  // just fake our auth token, essentially always faking implicit grant auth
  triggerAuthentication() {
    if(ENV.environment === "mirage") {
      let redirectHash = encodeURIComponent(window.location.hash.slice(1).split('?')[0]);
      if(redirectHash === "") {redirectHash = "/";}
      window.location.hash = `#/callback#access_token=junk.access.token&token_type=bearer&id_token=junk.id.token&state=${redirectHash}`;
    }
    let authenticationRoute = this.get('authenticationRoute');

    this.transitionTo(authenticationRoute);
  },
...

I defined a “mirage” environment in my environment/config.js (custom environments aren’t really condoned and may not even work in the future but…) that uses mirage as the backend because we have a development API which we wanted to use with the development environment. You could take this basic idea and change it to fit your situation though.

1 Like
3

Thanks a lot, Dan. This is definitely what I’m looking for. I’ll take a try.

4

Did you mean <my-app>/config/environment.js ? if so, I could add an additional environment there like that:

...
if (environment === 'development') {
....
}
if (environment === 'mirage') {
 ...// what comes here ?

or like that:

#config/environment.js

ENV['ember-cli-mirage'] = {
      enabled: true,
      autostart: true
... some other stuff ?
    };

I did something like this in my custom AuthenticatedRouteMixin

Where did you define this mixin ?

When you set location hash in case if it is mirage env:

window.location.hash = `#/callback#access_token=junk.access.token&token_type=bearer&id_token=junk.id.token&state=${redirectHash}`;

where the below values come from ? Or are they just to be replaced by some fake values ?

junk.access.token
junk.id.token

Thank you

5

Did you mean /config/environment.js ?

Yup sorry, typo. Would look something like this:

if (environment === 'mirage') {
  // enable mirage
  ENV['ember-cli-mirage'].enabled = true;
}

Just need to enable mirage. Could also turn on mirage logging (ENV['ember-cli-mirage'].logging = true) or whatever else you wanted.

Where did you define this mixin ?

See “Create authenticated route mixin” in my answer here

Or are they just to be replaced by some fake values ?

Exactly, they can be anything since it’s all fake and mirage won’t be checking your token

6

Thank you for your response. A question about AuthenticatedRouteMixin(that was discussed in the thread you posted the URL to). I have all my routes to be authenticated, have it already imported like that:

import Route from '@ember/routing/route';
import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
import { inject as service } from '@ember/service';

export default Route.extend(AuthenticatedRouteMixin, {
  currentUser: service('current-user'),
  currentShop: service('current-shop'),

  model() {
    return this.store.findAll('shop');
  }
});

So, I don’t really see how to do that …

7

So if you had a custom mixin defined as specified in the other thread, to use it you’d just do this instead:

import Route from '@ember/routing/route';
import AuthenticatedRouteMixin from '<your-app-name>/mixins/authenticated-route-mixin';
import { inject as service } from '@ember/service';

export default Route.extend(AuthenticatedRouteMixin, {
  currentUser: service('current-user'),
  currentShop: service('current-shop'),

  model() {
    return this.store.findAll('shop');
  }
});

meaning all you have to change is this line:

import AuthenticatedRouteMixin from '<your-app-name>/mixins/authenticated-route-mixin';

so instead of importing the default ember-simple-auth mixin, you’re extending it in your own project, and then using your custom extended one instead.