Ember

You can get started by either downloading the seed project or if you would like to add Auth0 to an existing application you can follow the tutorial steps.

Sample Project

Download this sample project configured with your Auth0 API Keys.

System Requirements
  • NodeJS 0.12.7
  • Ember 1.12.0
  • jQuery 1.11.1
  • Ember Simple Auth 1.1.0
Show requirements

Before Starting

Please remember that for security purposes, you have to register the URL of your app in the Application Settings section as the callbackURL.

Right now, that callback is set to the following:

https://YOUR_APP/callback

1. Install the Add-On

Auth0 Ember simple-auth is an add-on for the simple-auth library, and is installed via ember-cli.

To install this add-on and its dependencies, cd to your project directory and execute the following commands:

ember install auth0-ember-simple-auth
ember generate scaffold-auth0

Note: If you are not already using ember-cli, see ember-cli migration.

2. Configure the Add-On

// config/environment.js

ENV['simple-auth'] = {
  authorizer: 'simple-auth-authorizer:jwt',
  authenticationRoute: 'sign_in',
  routeAfterAuthentication: 'home',
  routeIfAlreadyAuthenticated: 'home'
}

ENV['auth0-ember-simple-auth'] = {
  clientID: "YOUR_CLIENT_ID",
  domain: "YOUR_AUTH0_DOMAIN"
}

If using a content security policy, add https://cdn.auth0.com to both the font-src and script-src contentSecurityPolicy entries and YOUR_AUTH0_DOMAIN to the connect-src entry:

// config/environment.js
ENV['contentSecurityPolicy'] = {
  'font-src': "'self' data: https://cdn.auth0.com",
  'style-src': "'self' 'unsafe-inline'",
  'script-src': "'self' 'unsafe-eval' 'unsafe-inline' https://cdn.auth0.com YOUR_AUTH0_DOMAIN",
  'connect-src': "'self' http://localhost:* YOUR_AUTH0_DOMAIN"
};

3. Extend Routes

Extend a route and set user-configurable options:

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

export default Ember.Route.extend(ApplicationRouteMixin, {
  actions: {
    sessionRequiresAuthentication: function(){
      // For a list of user-configurable options, see:
      // https:///libraries/lock/customization

      // This will launch lock.js in popup mode
      var lockOptions = {
        auth: {
          params: { scope: 'openid' }
        }
      };

      this.get('session').authenticate('simple-auth-authenticator:lock', lockOptions);
    }
  }
});

Add a route for signing in:

// app/routes/sign_in.js

import Ember from 'ember';
import UnauthenticatedRouteMixin from 'simple-auth/mixins/unauthenticated-route-mixin';

export default Ember.Route.extend(UnauthenticatedRouteMixin);

and add a route for authenticated users:

// app/routes/home.js

import Ember from 'ember';
import AuthenticatedRouteMixin from 'simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin);

4. Login and Logout

Add login and logout links. These routes are handled according to the simple-auth configuration settings.

{{#if session.isAuthenticated}}
  <a {{ action 'invalidateSession' }}>Logout</a>
{{else}}
  <a {{ action 'sessionRequiresAuthentication' }}>Login</a>
{{/if}}

5. Authenticated User Session Data

Once a user is authenticated, session data received from the popup window will be stored in localStorage under the ember_simple_auth:session key. This session object is a JSON object that contains user profile data, a JWT token and an access token.

You can access this session information in the ember templates by using {{session.secure}}. For example, to say "Hi" and show the user's associated avatar:

<div class="user-info">
  <span class="user-info__leader">Hi,</span>
  <img class="user-info__avatar" src="{{session.secure.profile.picture}}">
  <span class="user-info__name">{{session.secure.profile.name}}</span>
</div>

6. Using a JWT Token to Make API Requests

To make an API request, add the user's JWT token to an Authorization HTTP header:

fetch('/api/foo', {
  method: 'GET',
  cache: false,
  headers: {
    'Authorization': 'Bearer ${session.secure.jwt}'
  }
}).then(function (response) {
  // use response
});

Persisting Application State

Lock uses redirect mode by default, meaning that a full page refresh will occur when users go through the authentication process in your application. This can be undesirable in single page apps, especially if the application contains state that should be displayed to the user again after they authenticate. For example, it may be the case that your users can initiate authentication from an arbitrary route within your single page app and you may want to return them to that location (along with any relevant state) after authentication is complete.

The recommended solution for this is to persist any necessary application state in local storage or a cookie before the user logs in or signs up. With this data, you can provide some custom post-authentication logic in the listener for the authenticated event to allow the user to pick up from where they left off.

In cases where storing application state is not possible, Lock's popup mode can be used. Please note that popup mode is not recommended. Known bugs in certain browsers prevent popup mode from functioning as expected under some circumstances.

Additional information

For Additional information on how to use this SDK, see Auth0 Ember simple auth.

Use Auth0 for FREECreate free Account