Handling oauth2 redirect from within a component

1

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?

Thanks.

2

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