Using ember-simple-auth and torii, modal never closes and session never updates despite successful server response

Question

I'm attempting to allow multiple oauth providers using ember-cli, ember-simple-auth, torii and devise on my rails backend. Everything seems to work, but the modal never closes and the session in the client is never updated.

Steps to repro:

Click the link to login via google-oauth2 provider
Observe modal open with list of account login options
Select account and login
Observe modal redirect to local rails server for token exchange (http://localhost:3000/login_profiles/auth/google_oauth2/callback?state=STATE&code=string)
Observe modal window populated with json response issued by local rails server

{ "access_token": "8gmvGfHsUx_1mrEAG1Vu", "login_profile_id": 1 }
Observe modal remains open. If manually closed the browser reports the error:

Error: Popup was closed, authorization was denied, or a authentication message otherwise not received before the window closed.
Observe no updates to client session object

Included below are my lib versions and the relevant bits of my application code. Any help would be greatly appreciated.

DEBUG: Ember : 1.13.3

DEBUG: Ember Data : 1.13.5

DEBUG: jQuery : 2.1.4

DEBUG: Ember Simple Auth : 0.8.0

DEBUG: Ember Simple Auth Torii : 0.8.0

Server:

class LoginProfiles::OmniauthCallbacksController < Devise::OmniauthCallbacksController

def google_oauth2
  login_profile = LoginProfile.find_or_create_by_google_oauth2(request.env['omniauth.auth'])

  render json: { access_token: login_profile.authentication_token, login_profile_id: login_profile.id }
end

def facebook
  login_profile = LoginProfile.find_or_create_by_facebook_oauth2(request.env['omniauth.auth'])

  render json: { access_token: login_profile.authentication_token, login_profile_id: login_profile.id }
end

end

Client:

config/environment.js

torii: {
  providers: {
    'google-oauth2': {
      clientId: 'string',
      redirectUri: 'http://localhost:3000/login_profiles/auth/google_oauth2/callback'
    },
    'facebook-oauth2': {
      clientId: 'string',
      redirectUri: 'http://localhost:3000/login_profiles/auth/facebook/callback'
    }

  }
},

'simple-auth': {
  authenticationRoute: 'sign-in',
  routeAfterAuthentication: 'index',
  authorizer: 'authorizer:application',
  crossOriginWhitelist: ['http://localhost:3000', 'http://localhost:4200']
},

routes/application.coffee

`import Ember from 'ember'`
`import ApplicationRouteMixin from 'simple-auth/mixins/application-route-mixin'`

ApplicationRoute = Ember.Route.extend ApplicationRouteMixin,
  actions:

    authenticateWithFacebook: ->      
      @get('session').authenticate('simple-auth-authenticator:torii', 'facebook-oauth2')

    authenticateWithGooglePlus: ->
      @get('session').authenticate('simple-auth-authenticator:torii', 'google-oauth2')

`export default ApplicationRoute`

templates/application.hbs

<p>
  Sign in with
   <a {{action "authenticateWithGooglePlus"}}>Google</a>
    or
   <a {{action "authenticateWithFacebook"}}>Facebook</a>
   or
   {{#link-to 'register' id="register"}}register a new account.{{/link-to}}
 </p>

bower.json

{
  "name": "brand-management-client",
  "dependencies": {
    "ember": "1.13.3",
    "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
    "ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
    "ember-data": "1.13.5",
    "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.5",
    "ember-qunit": "0.4.1",
    "ember-qunit-notifications": "0.0.7",
    "ember-resolver": "~0.1.18",
    "jquery": "^2.1.4",
    "loader.js": "ember-cli/loader.js#3.2.0",
    "qunit": "~1.17.1",
    "foundation": "~5.5.0",
    "ember-simple-auth": "0.8.0"
  }
}

package.json

{
  "name": "brand-management-client",
  "version": "0.0.0",
  "description": "Small description for brand-management-client goes here",
  "private": true,
  "directories": {
    "doc": "doc",
    "test": "tests"
  },
  "scripts": {
    "start": "ember server",
    "build": "ember build",
    "test": "ember test"
  },
  "repository": "",
  "engines": {
    "node": ">= 0.10.0"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "broccoli-asset-rev": "^2.0.2",
    "broccoli-clean-css": "1.0.0",
    "ember-cli": "1.13.1",
    "ember-cli-app-version": "0.4.0",
    "ember-cli-babel": "^5.0.0",
    "ember-cli-coffeescript": "0.11.0",
    "ember-cli-dependency-checker": "^1.0.0",
    "ember-cli-foundation-sass": "1.1.1",
    "ember-cli-htmlbars": "0.7.9",
    "ember-cli-htmlbars-inline-precompile": "^0.1.1",
    "ember-cli-ic-ajax": "^0.2.1",
    "ember-cli-inject-live-reload": "^1.3.0",
    "ember-cli-qunit": "0.3.15",
    "ember-cli-release": "0.2.3",
    "ember-cli-sass": "3.1.0",
    "ember-cli-simple-auth": "0.8.0",
    "ember-cli-simple-auth-torii": "0.8.0",
    "ember-cli-uglify": "^1.0.1",
    "ember-data": "1.13.5",
    "ember-disable-proxy-controllers": "^1.0.0",
    "ember-export-application-global": "^1.0.2",
    "torii": "^0.5.1"
  }
}

marcoow marcoow · Accepted Answer · 2015-08-05T16:38:54

The redirect should actually not be handled by the Rails app but by torii which will read the auth code from the query string and post that back to the parent window (where you might use it in a custom authenticator to exchange it for an access token for your API) - check the source of torii's Oauth 2.0 provider's open method for reference: https://github.com/Vestorly/torii/blob/master/lib/torii/providers/oauth2-code.js#L118

Using ember-simple-auth and torii, modal never closes and session never updates despite successful server response

1 Answers