Session Invalidated After Page Reload - Devise Authenticator

[strukturedkaos]

Upgraded from ember-simple-auth 0.7.2 to 1.1.0-beta.2, using the devise authenticator and able to authenticate initially. Everything goes smoothly until I refresh the page. My session appears to be invalidated, and I'm kicked out to the login page. There are no error messages in the console. I tried adding a debugger to the restore() function in the devise authenticator class, but the debugger is not being hit.

In Local Storage, the ember_simple_auth:session looks like the following before and after page reload:

{"authenticated":{"authenticator":"authenticator:devise","user_id":1086,"account_id":1068,"store_id":1070,"token":"sM66AhtvIeNTVaUt7RfRuw","email":"strukturedkaos@email.com"}}``

Ember version details:

DEBUG: Ember             : 1.13.10
ember.debug.js: Ember Data        : 1.13.15
ember.debug.js: jQuery            : 1.11.3
ember.debug.js: Model Fragments   : 1.13.1
ember.debug.js: Ember Simple Auth : 1.1.0-beta.2

Could there be an issue with the session data causing the restore() function not to be called?

[marcoow]

The key in the session data that is used for storing authentication data (that is all data acquired by the authenticator when it authenticates the session) was renamed from secure to authenticated in 1.0.0, making all existing session invalid (as it doesn't find any authentication data when restoring the session).

I would assume that when you login again everything would be working just fine.

[strukturedkaos]

@marcoow - I'm seeing only authenticated key when logged in and logged out.

When I log out using the session invalidate, the ember_simple_auth_session is set to {"authenticated":{}}.

When logged in:

{"authenticated":{"authenticator":"authenticator:devise","user_id":1040,"account_id":1023,"store_id":1025,
"token":"M-nim93FgC1hG_RAoK6w9w","email":"strukturedkaos@email.com"}}

When I click around the app, all of the API requests are authenticated as I expected. When I refresh the page, I get kicked out to the login page, but the session data does not get cleared:

{"authenticated":{"authenticator":"authenticator:devise","user_id":1040,"account_id":1023,"store_id":1025,"token":"M-nim93FgC1hG_RAoK6w9w","email":"strukturedkaos@email.com"}}

Attempting to get to any routes that require authentication redirects me back to the login page with 401 unauthorized.

[strukturedkaos]

@marcoow - I placed debuggers in the restore() functions of the session-stores/adaptive.js and session-stores/local-storage.js, and neither debugger is hit when refreshing the page. Is that expected?

[marcoow]

Can you share your authenticator's code, the authorizer as well as the configuration?

[marcoow]

Also please share your package.json and bower.json.

[strukturedkaos]

@marcoow

app/authenticators/devise.js:

import DeviseAuthenticator from 'ember-simple-auth/authenticators/devise';
import config from ".././config/environment";

export default DeviseAuthenticator.extend({
  serverTokenEndpoint: config.API_HOST + '/api/sessions'
});

bower.json:

{
  "name": "kemp",
  "dependencies": {
    "jquery": "^1.11.1",
    "ember": "1.13.10",
    "ember-data": "1.13.15",
    "ember-resolver": "~0.1.11",
    "loader.js": "ember-cli/loader.js#1.0.1",
    "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
    "ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
    "ember-load-initializers": "ember-cli/ember-load-initializers#0.0.2",
    "ember-qunit": "0.2.8",
    "ember-qunit-notifications": "0.0.7",
    "qunit": "~1.17.1",
    "jquery-cookie": "latest",
    "bootstrap-css": "~3.1.1",
    "moment": "latest",
    "chartkick": "latest",
    "spin.js": "~2.0.2",
    "pretender": "0.1.0",
    "summernote": "0.6.16",
    "ember-uploader": "git@github.com:kevy/ember-uploader.git#master",
    "DataTables": "latest",
    "select2": "3.5.2",
    "ckeditor": "~4.5.3",
    "papaparse": "~4.1.2",
    "dropzone": "^4.0.1",
    "intro.js": "~1.0.0",
    "sinon-chai": "~2.6.0",
    "ember-data-model-fragments": "1.13.1"
  },
  "devDependencies": {
    "file-saver-saveas-js": "~1.20150507.2"
  }
}

package.json

{
  "name": "kemp",
  "version": "0.0.1",
  "description": "Kevy Ecommerce Marketing Platform",
  "private": true,
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "start": "ember server",
    "build": "ember build",
    "test": "ember test"
  },
  "repository": "",
  "engines": {
    "node": ">= 0.12.2"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "active-model-adapter": "2.0.3",
    "broccoli-asset-rev": "^2.0.0",
    "broccoli-funnel": "^0.2.3",
    "connect-restreamer": "^1.0.1",
    "ember-ckeditor": "git://github.com/strukturedkaos/ember-ckeditor",
    "ember-cli": "1.13.8",
    "ember-cli-app-version": "0.3.1",
    "ember-cli-babel": "^4.0.0",
    "ember-cli-content-security-policy": "0.3.0",
    "ember-cli-dependency-checker": "0.0.7",
    "ember-cli-deploy": "0.5.1",
    "ember-cli-deploy-aws-pack": "0.1.1",
    "ember-cli-deploy-revision-data": "0.1.0",
    "ember-cli-deploy-s3-index": "0.1.0",
    "ember-cli-dropzonejs": "0.7.0",
    "ember-cli-flash": "git://github.com/strukturedkaos/ember-cli-flash",
    "ember-cli-google-analytics": "^1.3.1",
    "ember-cli-htmlbars": "^0.7.4",
    "ember-cli-ic-ajax": "0.1.1",
    "ember-cli-inject-live-reload": "^1.3.0",
    "ember-cli-intercom": "0.1.0",
    "ember-cli-pretender": "0.3.1",
    "ember-cli-qunit": "0.3.8",
    "ember-cli-uglify": "1.0.1",
    "ember-cli-uploader": "^0.3.9",
    "ember-data": "1.13.15",
    "ember-data-model-fragments": "1.13.1",
    "ember-export-application-global": "^1.0.2",
    "ember-highcharts": "0.1.3",
    "ember-idx-forms": "^0.5.1",
    "ember-introjs": "git+https://github.com/xymbol/ember-introjs.git#a2103f815044407417bdaac7c8ce53cb8095c354",
    "ember-lodash": "0.0.6",
    "ember-papaparse": "0.0.3",
    "ember-select-2": "1.3.0",
    "ember-simple-auth": "1.1.0-beta.2",
    "ember-spin-spinner": "0.0.2",
    "ember-truth-helpers": "1.2.0",
    "ember-validations": "^2.0.0-alpha.2",
    "express": "^4.8.5",
    "glob": "^4.0.5",
    "morgan": "^1.5.1"
  },
  "dependencies": {
    "rails-csrf": "^1.0.1",
    "rimraf": "2.2.8"
  }
}

[marcoow]

Hm, don't really see anything wrong with that. Do you define a session store maybe? Also how do you authorizer backend requests? Are you using the DataAdapterMixin? Also please share config/environment.js.

I assume the app doesn't happen to be open source so I could access it?

[strukturedkaos]

@marcoow - It's not open source, but I've added you as a collaborator to the repo.

Yes, I'm using the DataAdapterMixin

adapters/application.js:

import DS from "ember-data";
import config from ".././config/environment";
import DataAdapterMixin from 'ember-simple-auth/mixins/data-adapter-mixin'

var ApplicationAdapter = DS.ActiveModelAdapter.extend(DataAdapterMixin, {
  namespace: 'api',
  authorizer: 'authorizer:application',
  host: config.API_HOST,
  headers: {
    "Accept": "application/json, text/javascript; q=0.01"
  }
});

export default ApplicationAdapter;

I created services to extend the session store. Here is an example of one:

import Ember from 'ember';
import DS from 'ember-data';

const { service } = Ember.inject;

export default Ember.Service.extend({
  session: service('session'),
  store: service(),

  currentStore: Ember.computed('session.data.authenticated.store_id', function() {
    const storeId = this.get('session.data.authenticated.store_id');
    if (!Ember.isEmpty(storeId)) {
      return DS.PromiseObject.create({
        promise: this.get('store').find('store', storeId)
      });
    }
  })
});

[marcoow]

Great - will investigate tomorrow!

[strukturedkaos]

Great, thank you.

[marcoow]

@strukturedkaos: I'm seeing a bunch of errors when running the project:

[strukturedkaos]

@marcoow - The errors in your screenshot appear to be related to packages not being installed. Are you on the strukturedkaos/shopify-connector-redirect-108720330 branch? Did you bootstrap with npm install & bower install??

[strukturedkaos]

@marcoow - I'd be happy to jump on a screenshare session with you to help troubleshoot.

[marcoow]

Yes, I was on that branch. I think you'll see the same errors after a git clean -dfx && npm install && bower install.

[cs3b]

I've similar problem with session storage, I'm loosing part of the information after page reload, it's something removing it from localStorage. I'm currently using ember-simple-auth 1.1.0.beta.3 + torii 0.6.1 + emberfire 1.6.6 (on ember-simple-auth 1.0 - the same problem)

when I'm checking storage (just after sign in) i've got:

$E.session.store._store._lastData.authenticated
Object { authenticator: "authenticator:torii", provider: "firebase", uid: "google:xxxx", google: Object, token: "yyy", auth: Object, expires: 1459185987 }

after refresh, when the method restore on ember-simple-auth/authenticators/torii is call - then data that is passed to the function, have all the information (so they were stored, and restored properly).

Unfortunately when I'm checking the session storage after that, information is pretty limited (see below).

$E.session.store._store._lastData.authenticated
Object { authenticator: "authenticator:torii", provider: "firebase" }

So after next refresh restore method will get only this subset of data - from the starting from 3rd refresh behavior is stable. Could you help me, point me how should I debug it further?

From what I notice function _setup is called always twice (not sure why).

[marcoow]

@cs3b: please provide the source of your torii provider.

[cs3b]

@marcoow as torii provider I'm using one that comes with emberfire.

and here is my authenticator

import Ember from 'ember';
import Torii from 'ember-simple-auth/authenticators/torii';

export default Torii.extend({
  torii: Ember.inject.service(),
  store: Ember.inject.service(),

  restore(data) {
    console.log("= restore = " + JSON.stringify(data));
    return this._super(data);
  },

  authenticate(provider, options) {
    console.log("= authenticate = " + JSON.stringify(options));
    return this._super(provider, options);
  },

  _authenticateWithProvider(provider, data) {
    if (data.hasOwnProperty('provider') && data.hasOwnProperty(data.provider)) {
      console.log(JSON.stringify(data.uid));
      console.log(JSON.stringify(data[data.provider]));
      this._findOrCreateUser(data.uid, data[data.provider]);
    }

    this._super(provider, data);
  },

  _findOrCreateUser(uid, {displayName: name, profileImageURL: imageUrl}) {
    let store = this.get('store');

    return store.findRecord('user', uid)
      .then(function (user) {
        user.set('name', name);
        user.set('imageUrl', imageUrl);
        return user.save();
      })
      .catch(function () {
        let user = store.createRecord('user', {id: uid, name: name, imageUrl: imageUrl});
        return user.save();
      });
  }
});

[marcoow]

@cs3b: you need to extend that provider and implement the fetch method - see this for reference: https://github.com/simplabs/ember-simple-auth/blob/master/tests/dummy/app/torii-providers/facebook.js

[cs3b]

@marcoow thx - now it is working properly. My bad, sorry, I've just started with ember-simply-auth last weekend.

One more thing that I've spotted is about name collision - provider in data object have two meanings, one as provider for torii (e.g.: firebase), and as provider for firebase (e.g.: 'google'), below is my authenticator that works for me.

import Ember from 'ember';
import Torii from 'ember-simple-auth/authenticators/torii';

export default Torii.extend({
  torii: Ember.inject.service(),
  store: Ember.inject.service(),
  session: Ember.inject.service(),

  _authenticateWithProvider(provider, data) {
    // hack as provider mean more then one thing, one, as torii provider (e.g. firebase)
    //   firebase has it's own providers (e.g.: google / facebook / github / twitter)
    //   to avoid name collision will make copy
    if (provider === 'firebase' && provider !== data.provider) {
      data['firebaseProvider'] = data.provider;
    }

    this._findOrCreateUser(data.uid, data[data.firebaseProvider])
      .then(user => this.get('session').set('currentUser', user))
      .catch(error => console.log('something went wrong with user loading' + error));

    this._super(provider, data);
  },

  _findOrCreateUser(uid, {displayName: name, profileImageURL: imageUrl}) {
    let store = this.get('store');

    return store.findRecord('user', uid)
      .then(function (user) {
        user.set('name', name);
        user.set('imageUrl', imageUrl);
        return user.save();
      })
      .catch(function () {
        let user = store.createRecord('user', {id: uid, name: name, imageUrl: imageUrl});
        return user.save();
      });
  }
});

[strukturedkaos]

@marcoow - Sorry for the delay in responding. I've fixed the Ember jQuery error you were seeing. I've mentioned you in the PR again, so you can easily find it. Please let me know if you find anything. Thank you.

[marcoow]

@strukturedkaos: can you check again with the latest 1.1 beta release? That might already have fixed it. With the introduction of async session stores there were a few edge-case-bugs introduced as well.

[strukturedkaos]

@marcoow - I upgraded to 1.1.0-beta-4, and I'm still logged out once I refresh the page. Anything else I should try to pinpoint the cause of this issue?

[marcoow]

Application uses an outdated version of ember-load-initializers that doesn't know about instance initializers so that session restoration never gets triggered.

[strukturedkaos]

Upgraded ember-load-initializers and ember-resolver, and I remained logged in after refresh. Thank you @marcoow!