Error when using torii with ember-simple-auth

1

Hi guys,

Trying to learn ember and more specifically how ember implements oauth2, e.g. (‘Sign in with X’) functionality.

I’ve played around with ember-simple-auth, torii, and ember-oauth2.

My current attempt is to implement a ‘Sign in with Slack’ button on my login page. I’ve followed the documentation on how a torii provider should be set up. The resulting code appears as follows in my config/environment.js file:

var ENV = {
...
    torii: {
      providers: {
        'slack': {
          clientId: "28748355378.284728941425",
          authBaseUri: 'https://slack.com/oauth/authorize',
          redirectUri: 'https://localhost:4200/app/search',
          scope: 'channels:read'
        }
      }
    },
...
}

I’ve implemented the steps shown here for my authenticators/torii.js file, which results in the following:

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

const { service } = Ember.inject;

export default Torii.extend({
  torii: service('torii'),
  authenticate(options) {
    debugger;
    return this._super(...arguments).then(function(data) {
      alert(`authorizationCode:\n${data.authorizationCode}\nprovider: ${data.provider}\nredirectUri: ${data.redirectUri}`);
    });
  }
});

My login route looks like this:

import Ember from 'ember';

export default Ember.Route.extend({
  emberOauth2: Ember.inject.service(),
  session: Ember.inject.service('session'),

  actions: {
    authenticate() {
      this.get('session').authenticate('authenticator:torii', 'slack');
    },
    invalidateSession() {
      this.get('session').invalidate();
    }
  }
});

My sign in with Slack button looks like this:

<a {{action "authenticate"}}
  href="https://slack.com/oauth/authorize?scope=identity.basic,identity.email,identity.team,identity.avatar&client_id=28748355378.284728941425&redirect_uri=https%3A%2F%2Flocalhost%3A4200%2Fapp%2Fsearch%2F&state=loginFromabc">
  <img alt="Sign in with Slack" height="40" width="172" src="https://platform.slack-edge.com/img/sign_in_with_slack.png" srcset="https://platform.slack-edge.com/img/sign_in_with_slack.png 1x, https://platform.slack-edge.com/img/sign_in_with_slack@2x.png 2x"/>
</a>

However, when I click on the ‘Sign in with Slack’ button, my console shows the following error:

Error: Expected a provider named 'slack' , did you forget to register it?

As far as I can tell, I have registered it correctly in my config/environment.js file. Can someone help me understand what I’m missing here?

Also, an explanation of what needs to be in the redirectURI to properly handle the returned token would also be very helpful.

Thanks.

2

I ended up using default torii style:

app/torii-providers/slack-oauth2.js

import Oauth2 from 'torii/providers/oauth2-code';

export default Oauth2.extend({
  name:       'slack-oauth2',
  baseUrl:    'https://slack.com/oauth/authorize',
  redirectUri: 'http://localhost:4200/auth/sign_in_with_slack/callback',
  responseParams: ['code', 'state']
});

Note: My provider was named slack-oauth2, not slack.