Ember-cli-clickfunnels-auth NPM

Ember-cli-clickfunnels-auth

Installation

First you need to install torii, so run:

npm install torii --save-dev

TODO : Figure out why torii is not being picked up autmoatically based on it's dependency in the addon.

To install this addon run:

  npm install ember-cli-clickfunnels-auth --save-dev

Configuration

First you should install the ember-cli-dotenv addon to allow you to manage config vars through environment variables instead of through hard coding. (Please don't commit authentication information into a repo.)

npm install --save-dev ember-cli-dotenv

Now create a file in the root of your project called .env with this content:

AUTH_ENDPOINT=http://localhost:3000
AUTH_API_KEY=abcd1234

Be sure to add .env to your .gitignore to prevent this file from being checked in to source control. You might also want to create a file called dotenv.sample.env which documents a sample configuration. Please be sure not to commit anything sensitive in that file.

See the 'API Keys' section for details on obtaining api keys.

Now you need to configure your app to look for these variables. Edit ember-cli-build.js (or Brocfile) and add a dotEnv object to the app creation config.

  var app = new EmberApp(defaults, {
    dotEnv: {
      clientAllowedKeys: ['AUTH_ENDPOINT','AUTH_API_KEY']
    }
  });

Finally you should edit config/environment.js and add configs for authEndpoint and torii.

module.exports = function(environment) {
  var ENV = {
    /* ... */
    authEndpoint: process.env.AUTH_ENDPOINT,
    torii: {
      // a 'session' property will be injected on routes and controllers
      sessionServiceName: 'session',
      providers : {
        'clickfunnels-oauth2-bearer' : {
          apiKey : process.env.AUTH_API_KEY
        }
      }
    }
  };

  return ENV;
};

Content Security Policy

To allow ajax requests to the auth endpoint you should update the content security policy in config/environment.js.

The connect-src attribute should be updated to include the AUTH_ENDPOINT set in the environment variables.

  var ENV = {
    /* ... */

    contentSecurityPolicy: {
      'default-src': "'none'",
      'script-src': "'self'",
      'font-src': "'self'",
      'connect-src': "'self' " + process.env.AUTH_ENDPOINT,
      'img-src': "'self'",
      'style-src': "'self'",
      'media-src': "'self'"
    }
  };

API Keys

API Keys are assigned by the auth provider on a per application basis. In production app.clickfunnels.com is the auth provider, and for local development it may be either your local machine or the clickfunnels staging server (TODO: URL for staging?).

To obtain a key go to the path /oauth/applications on the provider site. Click 'New Appliation' and then enter a name for your app. The redirect URI should probably be either http://localhost:4200/ for development, or https://APPNAME.clickfunnels.com/ for production. After clicking 'Submit' you'll see an Appliation ID and Secret. Copy the Application ID and paste it into the config/environment.js as the value for the apiKey attribute.

Update `ApplicationRouter`

This gem provides a mixin that will modify a router in three ways:

Validates and sets up the current session in a beforeModel hook.
Provides a signIn action.
Provides a logout action.

If you don't already have a file in app/routes/application.js you should run:

ember g route application

First you should:

import ClickfunnelsAuthRouter from 'ember-cli-clickfunnels-auth/mixins/clickfunnels-auth-router';

And then your router can extend ClickfunnelsAuthRouter.

A minimal router would be:

import Ember from 'ember';
import ClickfunnelsAuthRouter from 'ember-cli-clickfunnels-auth/mixins/clickfunnels-auth-router';
export default Ember.Route.extend(ClickfunnelsAuthRouter,{

});

It's usually easiest to include this mixin in app/routes/application.js so that session handling is available for the entire app.

Checking Authentication

Once this add-on is installed and configured you'll want to check the value of session.isAuthenticated to find out if the user is authenticated or not.

For instance a template might contain:

{{#if session.isAuthenticated}}
  <a {{action "logout"}} href='#'>Logout</a>
  {{outlet}}
{{else}}
  <button {{action "signIn"}}>Sign in with clickfunnels-auth</button>
{{/if}}

The session object will be injected onto Controllers and Routes, so there you can just do:

let session = this.get('session');

Accessing the `currentUser`

The when a session is valid it will contain a currentUser object which holds info about the currently logged in user.

Test Helpers

This addon comes with a test helper that makes it easy to stub an authenticated session.

First import the helper:

import stubAuth from 'your-app/tests/helpers/authentication';

Note: The helper is mixed in with the helpers that live in your app, so you have to import it via the namespace of your own app.

Then you can call it in a test, passing in the application object that you are testing.

stubAuth(application);

A basic acceptance test to verify integration might look like this:

import Ember from 'ember';
import { module, test } from 'qunit';
import startApp from 'your-app/tests/helpers/start-app';
import stubAuth from 'your-app/tests/helpers/authentication';

var application;

module('Acceptance | force signin', {
  beforeEach: function() {
    application = startApp();
  },

  afterEach: function() {
    Ember.run(application, 'destroy');
  }
});

test('visiting /', function(assert) {
  visit('/');

  andThen(function() {
    assert.equal(currentURL(), '/');
    assert.equal(find('button:contains(Sign in with clickfunnels-auth)').length, 1);
  });
});

test('visiting /', function(assert) {
  stubAuth(application);
  visit('/');

  andThen(function() {
    assert.equal(currentURL(), '/');
    assert.equal(find('button:contains(Sign in with clickfunnels-auth)').length, 0);
  });
});