Unable to access emberOauth2 as a service

Learning Team
1

I’m using the ember-oauth2 library v2.0.2-beta, having installed it using the command: npm install --save-dev ember-oauth2

I have configured my config/environment.js file as follows, per the suggestion at the site referenced above:

    EmberENV: {
      FEATURES: {
        // Here you can enable experimental features on an ember canary build
        // e.g. 'with-controller': true
      },
      EXTEND_PROTOTYPES: {
        // Prevent Ember Data from overriding Date.parse.
        Date: false
      },
      'ember-oauth2': {
        slack: {
          clientId: "28957355378.299482941425",
          authBaseUri: 'https://slack.com/oauth/authorize',
          redirectUri: 'https://localhost:4200/app/search',
          scope: 'public write'
        }
      }

I have configured a login route that displays the ‘Sign in with Slack’ button.

I have configured routes/login.js as follows, per the suggestions at the aforementioned site:

import Ember from 'ember';

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

  actions: {
    authenticate(providerId) {
      debugger;
      emberOauth2.setProvider(providerId);
      return emberOauth2.authorize().then(function(response) {
        debugger;
        emberOauth2.get('auth').trigger('redirect', response.location.hash);
      }, function(error) {
        debugger;
        emberOauth2.get('auth').trigger('error', error);
      });
    }
  }
});

But when I fire up my server I get the following errors:

routes/login.js: line 9, col 7, 'emberOauth2' is not defined.
routes/login.js: line 10, col 14, 'emberOauth2' is not defined.
routes/login.js: line 12, col 9, 'emberOauth2' is not defined.
routes/login.js: line 15, col 9, 'emberOauth2' is not defined.

And when I hit my first debug statement in the login route, sure enough, there is no such object emberOauth2.

Please help.

2

The way you are trying to use emberOauth2 would only work if it was a local variable. To use service injections, you need to use get like shown in the Service guide:

import Ember from 'ember';

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

  actions: {
    authenticate(providerId) {
      debugger;
      this.get('emberOauth2').setProvider(providerId);
      return this.get('emberOauth2').authorize().then(function(response) {
        debugger;
        this.get('emberOauth2').get('auth').trigger('redirect', response.location.hash);
      }, function(error) {
        debugger;
        this.get('emberOauth2').get('auth').trigger('error', error);
      });
    }
  }
});

I’ve also sent a Pull Request to ember-oauth2 to correct the README :slight_smile:

3

Thanks very much. That got me farther.

I did notice that some additional corrections were needed for the closures to work properly, though (note the use of ‘that’ below):

    authenticate(providerId) {
      this.get('emberOauth2').setProvider(providerId);
      var that = this;
      return this.get('emberOauth2').authorize().then(function(response) {
        that.get('emberOauth2').get('auth').trigger('redirect', response.location.hash);
      }, function(error) {
        that.get('emberOauth2').get('auth').trigger('error', error);
      });
    }

My next road block is understanding how to handle the redirect as mentioned in the ember-oauth2 documentation. This is a regular html file, not an .hbs file. All the tutorials I’ve encountered have only dealt with .hbs and never raw .html files. I tried inserting the <script> tag but that’s not allowed.

Can you explain how this is supposed to work?

I’m an ember newbie and really want to use the framework for my next project, so your help is greatly appreciated and super valuable.