Handling oauth2 redirect from within a component


I’m using ember-simple-auth with the torii library to implement oauth2 authentication into my app. My ‘sign in with google’ button is wrapped in a component on my login page. I have defined an action within the component that initiates the oauth2 dance when the button is clicked, e.g.

actions: {  
  authenticate_google: function() {
    this.get('session').authenticate('authenticator:torii', 'google-oauth2');`

Everything works except the redirect step. I get two popup windows that close immediately and I am left sitting at the login page when it should be sitting at the redirectURI that I registered with Google and in my config/environment.js file.

Do I need to perform the redirect step manually, using the redirectURI value available at this.get('session').get('data').authenticated.redirectUri ? It doesn’t seem correct to attempt a route transition from within a component.

Does it sound like something else is broken? Should the redirect be handled automatically by ember-simple-auth or torii? Do I need to place my authenticate_google() function somewhere else? In the router? I want to have multiple buttons like this for different providers on the same page. Is it still OK to have these actions handled in the router?



The issue ended up being a couple of things.

  1. the authenticate actions needed to be moved out into the router

  2. the ember-simple-auth mixin ApplicationRouteMixin needed to be added to the application route in order for the automatic redirect to occur successfully

  3. the sign-in button provided by google had to be dropped in place of a branding image; this prevents the second popup from appearing, gets rid of strange layout issues, and decreases load time