redirect step not firing using ember-simple-auth with torii and google-oauth2

Question

Very new to ember and still wrapping my head around the framework. Using ember-cli 2.9.1.

I am trying to perform authentication using ember-simple-auth and its torii/google-oauth2 authenticator. At this point, everything works except the final step, the redirect after authentication succeeds. Seems like there are no tutorials or descriptions out there that describe this part in full.

I see that the authentication is performed successfully, I receive back an auth code and it gets stored in local storage. It persists across refreshes and all that. However, after the popup window dance happens, the redirect never occurs. I am still left sitting at the login page when I should be taken to the redirectUri that I registered with both my app and with Google.

Additionally, during the popup dance, two popup windows appear - the first being the one with content from Google, the second being the one that shows my redirectUrl in the address bar. However, both windows close quickly and the redirect does not happen on my main login page. There must be something I am not handling correctly in my main login page that is being provided in that second popup.

Here's the relevant code. Many thanks for your help!

config/environment.js:

// config/environment.js
var ENV = {
...
    torii: {
      providers: {
        'google-oauth2': {
          apiKey: '189573826905-p886jmjpam371fjoitktoec8hretkoo8.apps.googleusercontent.com',
          redirectUri: 'https://localhost:4200/app/search',
        }
      }
    },
...
};

app/components/google-signin-button.js

// app/components/google-signin-button.js
import Ember from 'ember';

export default Ember.Component.extend({
  session: Ember.inject.service(),

  didInsertElement() {
    Ember.$.getScript('https://apis.google.com/js/platform.js');
  },

  actions: {
    authenticate_google() {
      this.get('session').authenticate('authenticator:torii', 'google-oauth2');
    },
    invalidateSession() {
      this.get('session').invalidate();
    }
  }

});

app/templates/components/google-signin-button.hbs

// app/templates/components/google-signin-button.hbs
<meta name="google-signin-client_id" content="755937126905-p886jmjpam371fjoitktoec8hretkoo8.apps.googleusercontent.com">

<div {{action 'authenticate_google'}}>
  <h2 id="title">google oauth2 test</h2>
  <div google-signin-button class="g-signin2"/>
</div>

{{#if session.isAuthenticated}}
  <a {{action 'invalidateSession'}}>Logout</a>
{{else}}
  {{#link-to 'login'}}Login{{/link-to}}
{{/if}}


{{yield}}

mlehmeher mlehmeher · Accepted Answer · 2016-11-23T12:43:59

The issue turns out to be threefold.

1) the actions need to be moved out into the router

2) the ApplicationRouteMixin needs to be mixed in to the application route in order for ember-simple-auth to perform the redirect automatically, per the API documentation:

// app/routes/application.js
import Ember from 'ember';

export default Ember.Component.extend(ApplicationRouteMixin, {
  session: Ember.inject.service(),
...

3) the Google sign-in button needs to be removed in order to avoid the second popup; I ended up removing the entire thing and just used a branding image from Google - linking to the button source and its associated JS created issues with my layout as well, so going generic ended up being much simpler; load time is also much faster doing it this way

redirect step not firing using ember-simple-auth with torii and google-oauth2

1 Answers