EmberJS 2

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.

Seed Project

Download a sample project. You will need to login for the sample to be preconfigured.

System Requirements

This tutorial and seed project have been tested with the following:

  • Bower 1.7.7
  • NodeJS 5.11.0
  • Ember 2.5.0
  • jQuery 1.11.3
  • Ember Simple Auth 1.0.0

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:


Note: This quickstart and seed project are for Ember >= 2.x.x.

1. Install the add-on

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

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

ember install ember-simple-auth
ember install auth0/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['ember-simple-auth'] = {
  authenticationRoute: 'index',
  routeAfterAuthentication: 'protected',
  routeIfAlreadyAuthenticated: 'protected'

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",
  '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 'ember-simple-auth/mixins/application-route-mixin';

export default Ember.Route.extend(ApplicationRouteMixin, {

  actions: {
    login () {
      var lockOptions = {
        auth: {
          params: { scope: 'openid' }
      this.get('session').authenticate('simple-auth-authenticator:lock', lockOptions);

    logout () {

Add a route for signing in:

// app/routes/login.js
import Ember from 'ember';
import UnauthenticatedRouteMixin from 'ember-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 'ember-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 'logout' }}>Logout</a>
  <a {{ action 'login' }}>Login</a>

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.data.authenticated}}. 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.data.authenticated.profile.picture}}">
  <span class="user-info__name">{{session.data.authenticated.profile.name}}</span>

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.data.authenticated.jwt}'
}).then(function (response) {
  // use response

Additional Information

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

Try Auth0 for FREECreate free Account