Authenticating with Ember-Simple-Auth

Recently I’ve setup an ember project and I needed authentication. There is an excellent library / cli plug-in called ember-simple-auth. While the guides are great, the most recent version of Ember(1.13 / 2) doesn’t play nicely with the latest ember-simple-auth.

Ember-Simple-Auth, provides a special branch called jjAbrams (PR 602). While it is an awesome library, getting it to work can be somewhat tricky as not everything is as documented and requires some tweaks here and there. I’m trying to outline what I did, in the hopes it will save time for many others. And help prevent other devs from banging their heads against their keyboards, posting issues on git repositories or irc channels, or reading simple-auth source code to understand why things don’t work they way they are suppose to (as I did) in the hopes of understanding why things don’t work. Especially if you’re running against a custom server, like I did.

Here are the steps to get it working.

<

ul class=”regular”>

  • First create an ember app using ember-cli

  • Then follow the instructions on ember-simple-auth, how to get this specials build. It’s rather simple but still you need to make sure you don’t have any of the ember-simple-auth / simple-auth packages in your package.json / bower.json and also delete them from your node_modules / bower_components directories. Here is the pull request for it (make sure to read it as it explain how to get setup). https://github.com/simplabs/ember-simple-auth/pull/602
  • Next add a Login page and login controller and a protected page (notice I’m not using the LoginMixin as in many of Ember-Auth examples as it states it’s deprecated and I’ve also chosen not to use the Unauthenticated mixin (just because I’d rather leave that always accessible).

  • edit the login controller file:

    and the protected page route

    then edit the login template (I have some bootstrap styling here)

  • Next create an authenticators directory and an custom.js (authenticates login requests and restores session on refresh)
    Notice I use the same name everywhere (access_token) as once you resolve when authenticating it stores all the info in the session.

  • Then add an initializer for the authenticator

    and the file itself:

  • And now create an authorizers directory and a custom authorizer
    Notice that the info is is accessible via that.get(‘session.authentication’) (not session.secure as in other documentation!)..

  • Then an an initializer for the custom authorizer:

  • Here is a Git Repo with a working example https://github.com/DoryZi/SimpleAuth

    This hopefully will get you up and running! enjoy 🙂

    5 Comments

    1. Chris

      @doryz – Thanks so much for these examples, really good stuff 🙂

      I managed to fill in two github issues, small things, maybe you can have a look since i really am playing with ember for the first time so it might be just me screwing things 😀

    2. Dory Zidon

      I will look chris, but there have been some changes to the git repos recently so I would suggest to check with the guys that have created the package, as they can prob help you a lot more than me right now 🙂

    Leave a Reply