At Echobind, we get our client apps up and running quickly. One of the best tools we use in our toolkit is ember-simple-auth developed by simplabs. It helps you implement authentication in your Ember application that is lightweight and easy to integrate. I’m going to show you how to get started quickly. So let’s get started.

Installing ember-simple-auth

To get started, let’s create a new ember app:

When you run this, you should see something like this:

Yes, I’m using NPM. Don’t judge me — it works!

Ok, so let’s cd into our new application:

We’ll start out by installing ember-simple-auth:

When you run that, you should see:

Cool! We’re all set with installation. Let’s now move to configuring our application.

Adapter Setup

First, we’ll start out by creating our application adapter:

Here, we’re using a generator to create our default application adapter. This will generate this file:

We’ll need to do a couple things here, but essentially our file will be transformed to this:

Here’s what’s happening:

We’re utilizing JSONAPIAdapter DataAdapterMixin will be extended into the adapter The environment config will be used to determine the host and namespace

Let’s define these values in config/environment.js :

let ENV = {

... apiNamespace: 'api',

apiUrl: null

};

This essentially means the following:

We’ll be defining our apiUrl via the proxy option in ember-cli (e.g. ember s --proxy http://localhost:4000 The api is namespaced to api (e.g. http://localhost:4000/api/users )

Authenticator Setup

What is an authenticator?

The authenticator authenticates the session. The actual mechanism used to do this might, e.g., post a set of credentials to a server and in exchange retrieve an access token, initiating authentication against an external provider

The TL;DR is that the authenticator is used to authenticate a session with the credentials passed in. For the purposes of this article, we’ll be using OAuth2PasswordGrantAuthenticator — giving us the ability to authenticate with an identifier (username, email, etc…) with a password.

To generate the authenticator we can run:

This should output the following:

And it should create the following:

Now, we need to define serverTokenEndpoint . What does this property do?

The endpoint on the server that authentication and token refresh requests are sent to.

Let’s define it:

The code above generates a serverTokenEndpoint by joining the host , namespace with the string token . So if we had the following:

host = 'http://localhost:4000'

namespace = 'api'

token = 'token'

We would get the following as the value for serverTokenEndpoint :

http://localhost:4000/api/token

Authorizer Setup

What is an authorizer?

Authorizers use the session data acquired by an authenticator when authenticating the session to construct authorization data that can, e.g., be injected into outgoing network requests.

The TL;DR here is that, once authenticated, the authorizer uses the session data to construct the authorization data for your requests. In our example, this will generate the following header:

Authorization: Bearer s0m3tok3n1

Lucky for us, ember-simple-auth makes this easy to setup. We’ll be utilizing OAuth2BearerAuthorizer, as it gives us the functionality we need out of the box to generate the header above.

All we need to do is run the following command:

This should output:

And it should create the following:

Hooking Up Ember Simple Auth

We need to hook up the plumbing now that we’re done with configuration.

Creating The Sign Up Route

The first thing we need to do here is create our sign-up route.

You should get this output:

Let’s open up the generated sign-up template and put the following in there:

We’re creating a very simple form with email and password fields. When the user clicks “Sign Up” — we’ll call the onSignUp action, passing it the email and password values. Let’s define that action.

The above is just adding an onSignUp action to our route. If you’re not familiar with how events work in Ember, essentially the onSignUp action, triggered in the template will hit the controller and then the route. Since we didn’t define the action on the controller, the route will handle it for us.

In the onSignUp action we’re getting the email and password , so we’ll use these to create a user record. We then save that record and retrieve the session service. What is the session service? Well that comes from ember-simple-auth, and it’s defined as:

The session service provides access to the current session as well as methods to authenticate it, invalidate it, etc. It is the main interface for the application to Ember Simple Auth’s functionality.

With that in mind, we then call authenticate. Passing the function call the authenticator we’d like to use, in our case authenticator:oauth2 , and the email/password as separate arguments.

Note that if you haven’t used async/await for your actions, that’s alright. You can easily remove async/await from above and use then/catch/finally to resolve your promises. If you’re interested in setting this up for your project, check out Robert Jackson’s article “An async/await Configuration Adventure”.

There is one last thing we need to do, and that’s define the user model. If we don’t do that, we’ll get a gnarly error like:

TypeError: this.store.modelFactoryFor(...) is undefined

And that just makes us 😢 — so let’s do that next.

Defining our User model

Our user model is going to be simple, it’s just going to contain an email and password. So let’s get to it.

Run the following generator:

The output of that command should be something like:

And the generated user model file should be:

Ok cool, let’s test this out!

Testing out our Implementation

So what does this all look like? Let’s start up our app.

But before we do, we need to remove the welcome page. To do that, open package.json and remove the following:

"ember-welcome-page": "^3.0.0",

Start the server:

ember s

You should then be able to visit http://localhost:4200/sign-up

You should experience this if everything worked well:

Yup, that’s right — we’re on our path to success!

Where do we go from here?

We’ll you may be thinking to yourself “Is this is it”? And the answer is yes.

We did a bunch of setup work to get authentication going on the front-end. What we now need to do is actually hook this up to an API. Alternatively, we could mock out our endpoints in ember-cli-mirage . But we’re going to do something a bit different.

In my next article, I’m going to continue from this point and build out authentication in Elixir/Phoenix and Guardian with you. In the mean time, feel free to ping me on twitter or leave comments below. We’re going to build out a rad authentication feature with Ember and Elixir/Phoenix with Guardian. Stay tuned!

Oh yeah — and if you want to see this app put together, check it out here: https://github.com/alvincrespo/auth-example-frontend

References