ga-wdi-boston / ember-auth

Authentication in Ember

This training will involve a lot of following code and and exploring the Chrome Inspector and utilizing Ember Inspector. It is recommended that you comment code or take notes.

Prerequisites

• Ember Resources

Objectives

By the end of this, developers should be able to:

• Implement token authentication in an Ember application.
• Enforce authentication in protected routes.

Preparation

1. Fork and clone this repository.
2. Install dependencies with npm install and bower install.
3. Start any API based on a recent version of the Rails API Template or the Express API Template.
4. Start the front-end server with ember server.

From end to end

Watch as I sign up for a new account on our demo app.

Other than the flash messages on the page, did anything change? What about in the Chrome Developer Tools?

Take some time and sign in on your own, and check to see if anything in the Chrome Dev Tools has changed.

Now that we have added a key tool to our personal developer toolkit lets look at how it's implemented.

Follow Along

Let's walk through file by file to see what's happening. I will ask developers to guide me through the files while correcting any misunderstandings.

First let's start down the template and component trail, then we'll work our way up with actions.

Remember: Data down, actions up.

While going up the Ember hierarchy we may need to stop a some point to discuss services.

Additional Resources

• Implementing Authentication with Ember Services - Ember Igniter
• jpadilla/ember-simple-auth-token: Ember Simple Auth extension that is compatible with token-based authentication like JWT.
• simplabs/ember-simple-auth: A library for implementing authentication/authorization in Ember.js applications.
• Create your first Ember 2.0 app: From authentication to calling an API

License

1. All content is licensed under a CC­BY­NC­SA 4.0 license.
2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].

ember-auth's Issues

Form fields not clearing

Brought up by @coffeeisamazing (and confirmed by me):
the change password and sign-up input fields aren't being cleared after use for the ember auth template.

Clear store cache on sign-out

If two users have access to different data (say, through ownership), a developer may think there is a bug in the backend when the other users' data is displayed. That's because the in-memory data store is not being reset.

Add this somewhere after the sign-out action, probably in a then().

this.store.unloadAll();

Thanks http://emberigniter.com/clear-ember-data-store/

Fix sign-out action

Broke when switching from a sign-out route to a simple link.

Turns out, I should have just deleted the template and kept the route.

Custom error handler for page flow swallows errors

ember.debug.js:32096 TypeError: Cannot read property 'some' of undefined
    at Class.error (route.js:21)
    at Object.triggerEvent (ember.debug.js:28580)
    at Object.trigger (ember.debug.js:53473)
    at Object.trigger (ember.debug.js:53287)
    at ember.debug.js:53107
    at tryCatch (ember.debug.js:53806)
    at invokeCallback (ember.debug.js:53821)
    at publish (ember.debug.js:53789)
    at publishRejection (ember.debug.js:53724)
    at ember.debug.js:32054

Many developers in 012 got this error when starting to work with Ember. Some of them even gave up using Ember because they couldn't Google for help. Why couldn't they Google for help? Because I wrote the code that's causing it: https://github.com/ga-wdi-boston/ember-auth/blob/master/app/application/route.js#L21

So far the solution has to been to comment out the error handler.

In the future, we need to make a decision about how we handle these errors. Do I re-throw? Do I handle more error cases? This will block inclusion of ember-auth in ember-template.

Don't use `ember-auth-api` with this.

Use listr-api
https://github.com/ga-wdi-boston/listr-api

Can not open Ember Serve

Hi,

I updated the app and test files from the front end to mirror the Ember Auth app and test files. In addition, I also updated bower.json and package.json. I npm installed and bower installed and tried to run ember server --proxy http://localhost:3000 . But an error messaged appeared and cut off the connection

Package.json

{
  "name": "taste-or-waste-template",
  "version": "0.0.0",
  "description": "Small description for taste-or-waste-template goes here",
  "private": true,
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "build": "ember build",
    "start": "ember server",
    "test": "ember test"
  },
  "repository": "",
  "engines": {
    "node": ">= 0.10.0"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "active-model-adapter": "2.1.1",
    "broccoli-asset-rev": "^2.2.0",
    "ember-ajax": "0.7.1",
    "ember-cli": "2.4.2",
    "ember-cli-app-version": "^1.0.0",
    "ember-cli-autoprefixer": "0.6.0",
    "ember-cli-babel": "^5.1.5",
    "ember-cli-dependency-checker": "^1.2.0",
    "ember-cli-flash": "1.3.14",
    "ember-cli-htmlbars": "^1.0.1",
    "ember-cli-htmlbars-inline-precompile": "^0.3.1",
    "ember-cli-inject-live-reload": "^1.3.1",
    "ember-cli-qunit": "^1.2.1",
    "ember-cli-release": "0.2.8",
    "ember-cli-sass": "5.3.0",
    "ember-cli-sri": "^2.1.0",
    "ember-cli-uglify": "^1.2.0",
    "ember-data": "^2.4.0",
    "ember-disable-proxy-controllers": "^1.0.1",
    "ember-export-application-global": "^1.0.4",
    "ember-load-initializers": "^0.5.0",
    "ember-local-storage": "1.1.0",
    "ember-resolver": "^2.0.3",
    "grunt": "^0.4.5",
    "grunt-concurrent": "^2.1.0",
    "grunt-contrib-jshint": "^0.12.0",
    "grunt-jscs": "^2.6.0",
    "grunt-jsonlint": "^1.0.7",
    "load-grunt-config": "^0.19.1",
    "loader.js": "^4.0.0",
    "time-grunt": "^1.3.0"
  }
}

bower.json

{
  "name": "taste-or-waste-template",
  "dependencies": {
    "ember": "~2.4.1",
    "ember-cli-shims": "0.1.0",
    "ember-cli-test-loader": "0.2.2",
    "ember-qunit-notifications": "0.1.0",
    "bootstrap-sass": "^3.3.6",
    "blob-polyfill": "^1.0.20150320"
  }
}

Ember-cli-build.js

var EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  var app = new EmberApp(defaults, {
    sassOptions: {
      includePaths: [
        'bower_components/bootstrap-sass/assets/stylesheets'
      ]
    }
  });

  app.import('bower_components/bootstrap-sass/assets/javascripts/bootstrap.js');

  return app.toTree();
};

Change default branch to master

After you add content to master

Sign Up Form Clearing Issue (#572 from

I found a bug where if a user signs up, signs out, then goes back to the sign up form the prior input is still there. Technically, they couldn't do anything with it since the new account already exists but as a user it isn't ideal to see previously submitted input still there.

routes/sign-up.js

import Ember from 'ember';

export default Ember.Route.extend({
  auth: Ember.inject.service(),
  flashMessages: Ember.inject.service(),

  actions: {
    signUp (credentials) {
      this.get('auth').signUp(credentials)
      .then(() => this.get('auth').signIn(credentials))
      .then(() => this.transitionTo('application'))
      .then(() => {
        this.get('flashMessages')
        .success('Successfully signed-up! You have also been signed-in.');
      })
      .catch(() => {
        this.get('flashMessages')
        .danger('There was a problem. Please try again.');
      });
    },
  },
});

After some trial and error I found a solution.

In the same file route/sign-up.js update the signUp action:

I have tested locally and deployed and it works!

  actions: {
    signUp (credentials) {
      this.get('auth').signUp(credentials)
      .then(() => this.get('auth').signIn(credentials))
      .then(() => {
        credentials.password = null;
        credentials.email = null;
        credentials.passwordConfirmation = null;
        this.transitionTo('application');
      })

@akgoode and I both implemented this with no known side effects so far however @jrhorn424 commented:

Hm. This isn't a great workaround. Would you mind filing an issue on ember-auth @cathyob? I think it's something we need to address. Thanks!

ga-wdi-boston/ember-auth

Fix for broken Ember Store API requests on deployment

Some modification is needed for this app to work when deployed. See the steps in the final comment in this issue: Ember Auth template deployment