From f9693ec365c4109bd70a4a1ce5fd5c47eeb84c4d Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 12 Nov 2020 13:22:16 -0500
Subject: [PATCH 1/2] =?UTF-8?q?chore:=20=F0=9F=A4=96=20initial=20ember-sim?=
 =?UTF-8?q?ple-auth=20installation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/desktop/app/authenticators/password.js     | 98 +++++++++++++++++++
 ui/desktop/app/routes/application.js          | 57 +++++++++++
 ui/desktop/app/session-stores/application.js  |  3 +
 ui/desktop/package.json                       |  1 +
 .../unit/authenticators/password-test.js      | 50 ++++++++++
 .../tests/unit/routes/application-test.js     | 11 +++
 yarn.lock                                     | 29 ++++--
 7 files changed, 243 insertions(+), 6 deletions(-)
 create mode 100644 ui/desktop/app/authenticators/password.js
 create mode 100644 ui/desktop/app/routes/application.js
 create mode 100644 ui/desktop/app/session-stores/application.js
 create mode 100644 ui/desktop/tests/unit/authenticators/password-test.js
 create mode 100644 ui/desktop/tests/unit/routes/application-test.js

diff --git a/ui/desktop/app/authenticators/password.js b/ui/desktop/app/authenticators/password.js
new file mode 100644
index 000000000..f9d97033e
--- /dev/null
+++ b/ui/desktop/app/authenticators/password.js
@@ -0,0 +1,98 @@
+import BasePasswordAuthenticator from 'auth/authenticators/password';
+import { inject as service } from '@ember/service';
+
+/**
+ * A username/password authenticator that authenticates with
+ * a scope/auth-method endpoint.  Authentication occurs on an auth method
+ * endpoint, while deauthentication occurs on a scope endpoint.
+ */
+export default class PasswordAuthenticator extends BasePasswordAuthenticator {
+  // =services
+
+  @service store;
+
+  // =attributes
+
+  /**
+   * Generates an auth method URL with which to authenticate.
+   * @override
+   * @param {object} options
+   * @param {string} options.scope.scope_id
+   * @param {string} options.authMethod.id
+   * @return {string}
+   */
+  buildAuthEndpointURL({
+    scope: { id: scopeID },
+    authMethod: { id: authMethodID },
+  }) {
+    const adapter = this.store.adapterFor('application');
+    const options = { adapterOptions: { scopeID, method: 'authenticate' } };
+    return adapter.buildURL('auth-method', authMethodID, options, 'findRecord');
+  }
+
+  /**
+   * Generates a scope URL with which to deauthenticate.
+   * @override
+   * @param {object} options
+   * @param {string} scopeID
+   * @return {string}
+   */
+  buildDeauthEndpointURL({ scope: { id: scopeID } }) {
+    const adapter = this.store.adapterFor('application');
+    const options = { adapterOptions: { method: 'deauthenticate' } };
+    return adapter.buildURL('scope', scopeID, options, 'findRecord');
+  }
+
+  /**
+   * Generates an auth token validation URL used to check tokens on restoration.
+   * @override
+   * @param {string} tokenID
+   * @return {string}
+   */
+  buildTokenValidationEndpointURL(tokenID) {
+    const adapter = this.store.adapterFor('auth-token');
+    return adapter.buildURL('auth-token', tokenID, {}, 'findRecord');
+  }
+
+  /**
+   * Intercepts the authenticate response, if any, and assigns the returned
+   * token to all future requests via `addTokenToAuthorization`.
+   * Returns the response data as normal.
+   * @override
+   */
+  authenticate() {
+    return super.authenticate(...arguments).then((data) => {
+      const token = data?.token;
+      this.addTokenToAuthorization(token);
+      return data;
+    });
+  }
+
+  /**
+   * When restoring the session (say, on load), assigns the session token
+   * to all future requests via `addTokenToAuthorization`.
+   * @override
+   * @param {object} data
+   * @return {object}
+   */
+  restore(data) {
+    const token = data?.token;
+    this.addTokenToAuthorization(token);
+    return super.restore(data);
+  }
+
+  /**
+   * Assigns a token string all future requests via the `Authorization` header
+   * on the application adapter prototype.  Only application and adapters that
+   * extend the application adapter receive this header (which is most).
+   * @param {string} token
+   */
+  addTokenToAuthorization(token) {
+    const adapterPrototype = this.store.adapterFor('application').constructor
+      .prototype;
+    const headers = adapterPrototype?.headers;
+    if (!headers) adapterPrototype.headers = {};
+    adapterPrototype.headers.Authorization = null;
+    adapterPrototype.headers.Authorization = `Bearer ${token}`;
+  }
+}
diff --git a/ui/desktop/app/routes/application.js b/ui/desktop/app/routes/application.js
new file mode 100644
index 000000000..bdf072037
--- /dev/null
+++ b/ui/desktop/app/routes/application.js
@@ -0,0 +1,57 @@
+import Route from '@ember/routing/route';
+/* eslint-disable-next-line ember/no-mixins */
+import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+
+export default class ApplicationRoute extends Route.extend(
+  ApplicationRouteMixin
+) {
+
+  // =services
+
+  @service session;
+
+  // =attributes
+
+  routeIfUnauthenticated = 'index';
+
+  /**
+   * After becoming authenticated, does nothing.  This overrides the default
+   * behavior of the ApplicationRouteMixin, which is to redirect after auth.
+   * We'll handle this redirect manually in sub routes.
+   * @override
+   */
+  sessionAuthenticated() {
+    // no op
+  }
+
+  /**
+   * When the session ends, redirect to authenticate and reload the page to
+   * purge any in-memory state.
+   */
+  async sessionInvalidated() {
+    // Catch error in this transition, since it will be aborted by the
+    // scope auth route when it redirects to the first auth method.
+    await this.transitionTo(this.routeIfUnauthenticated).catch(() => {});
+    // The Ember way of accessing globals...
+    const document = getOwner(this).lookup('service:-document').documentElement;
+    // defaultView === window, but without using globals directly
+    const { location } = document.parentNode.defaultView;
+    // Wait a beat, then reload the page...
+    // This is mostly to give the deauth request a chance to fire.
+    /* istanbul ignore if */
+    if (!Ember.testing) later(location, location.reload, 150);
+  }
+
+  // =actions
+
+  /**
+   * Delegates invalidation to the session service.
+   */
+  @action
+  invalidateSession() {
+    this.session.invalidate();
+  }
+
+}
diff --git a/ui/desktop/app/session-stores/application.js b/ui/desktop/app/session-stores/application.js
new file mode 100644
index 000000000..b796add00
--- /dev/null
+++ b/ui/desktop/app/session-stores/application.js
@@ -0,0 +1,3 @@
+import LocalStorageSessionStore from 'auth/session-stores/local-storage';
+
+export default class ApplicationSessionStore extends LocalStorageSessionStore {}
diff --git a/ui/desktop/package.json b/ui/desktop/package.json
index 793d4a132..6876e906f 100644
--- a/ui/desktop/package.json
+++ b/ui/desktop/package.json
@@ -66,6 +66,7 @@
     "ember-page-title": "^6.0.3",
     "ember-qunit": "^4.6.0",
     "ember-resolver": "^8.0.0",
+    "ember-simple-auth": "^3.0.1",
     "ember-source": "~3.20.2",
     "ember-template-lint": "^2.9.1",
     "ember-welcome-page": "^4.0.0",
diff --git a/ui/desktop/tests/unit/authenticators/password-test.js b/ui/desktop/tests/unit/authenticators/password-test.js
new file mode 100644
index 000000000..0314aed17
--- /dev/null
+++ b/ui/desktop/tests/unit/authenticators/password-test.js
@@ -0,0 +1,50 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
+import { Response } from 'miragejs';
+
+module('Unit | Authenticator | password', function (hooks) {
+  setupTest(hooks);
+  setupMirage(hooks);
+
+  let store;
+  let applicationAdapter;
+  let session;
+  let authenticator;
+
+  hooks.beforeEach(function () {
+    store = this.owner.lookup('service:store');
+    applicationAdapter = store.adapterFor('application');
+    session = this.owner.lookup('service:session');
+    authenticator = this.owner.lookup('authenticator:password');
+    session.invalidate();
+  });
+
+  hooks.afterEach(function () {
+    session.invalidate();
+  });
+
+  test('it adds an authorization header to application adapter on restore', async function (assert) {
+    assert.expect(1);
+    const mockData = { id: 'token1234', token: 'token1234' };
+    this.server.get(authenticator.buildTokenValidationEndpointURL(mockData.id), () => {
+      return new Response(200);
+    });
+    authenticator.restore(mockData);
+    assert.equal(applicationAdapter.headers.Authorization, 'Bearer token1234');
+  });
+
+  test('it adds an authorization header to application adapter on authenticate', async function (assert) {
+    assert.expect(1);
+    const creds = { identification: 'foo', password: 'bar' };
+    const scope = { id: 'global' };
+    const authMethod = { id: 'paum_1234' };
+    this.server.create('scope', { id: 'global', type: 'global' });
+    this.server.create('auth-method', { id: authMethod.id, scopeId: 'global' });
+    await authenticator.authenticate(creds, null, { scope, authMethod });
+    assert.equal(
+      applicationAdapter.headers.Authorization,
+      'Bearer thetokenstring'
+    );
+  });
+});
diff --git a/ui/desktop/tests/unit/routes/application-test.js b/ui/desktop/tests/unit/routes/application-test.js
new file mode 100644
index 000000000..21e9fb300
--- /dev/null
+++ b/ui/desktop/tests/unit/routes/application-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | application', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:application');
+    assert.ok(route);
+  });
+});
diff --git a/yarn.lock b/yarn.lock
index 2f648ed98..0b34487e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7523,7 +7523,7 @@ debug@~4.1.0:
   dependencies:
     ms "^2.1.1"
 
-debuglog@^1.0.1:
+debuglog@*, debuglog@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
   integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
@@ -9157,7 +9157,7 @@ ember-router-generator@^2.0.0:
     "@babel/traverse" "^7.4.5"
     recast "^0.18.1"
 
-ember-simple-auth@^3.0.0:
+ember-simple-auth@^3.0.0, ember-simple-auth@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/ember-simple-auth/-/ember-simple-auth-3.0.1.tgz#78bcd8e3d04da43154cf105931c0d3620a9f0694"
   integrity sha512-7D5s23nA5Nsonf37CyeQtksadV6Rgiz2rgCgRDnUObp3xnV71ljPtaUcZuq6kqqaZANYJi3uM8i4zVzmAHlKFQ==
@@ -12229,7 +12229,7 @@ import-lazy@^2.1.0:
   resolved "https://registry.yarnpkg.com/import-lazy/-/import-lazy-2.1.0.tgz#05698e3d45c88e8d7e9d92cb0584e77f096f3e43"
   integrity sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=
 
-imurmurhash@^0.1.4:
+imurmurhash@*, imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
@@ -13931,6 +13931,11 @@ lodash._baseflatten@^3.0.0:
     lodash.isarguments "^3.0.0"
     lodash.isarray "^3.0.0"
 
+lodash._baseindexof@*:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/lodash._baseindexof/-/lodash._baseindexof-3.1.0.tgz#fe52b53a1c6761e42618d654e4a25789ed61822c"
+  integrity sha1-/lK1OhxnYeQmGNZU5KJXie1hgiw=
+
 lodash._baseuniq@~4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash._baseuniq/-/lodash._baseuniq-4.6.0.tgz#0ebb44e456814af7905c6212fa2c9b2d51b841e8"
@@ -13939,11 +13944,16 @@ lodash._baseuniq@~4.6.0:
     lodash._createset "~4.0.0"
     lodash._root "~3.0.0"
 
-lodash._bindcallback@^3.0.0:
+lodash._bindcallback@*, lodash._bindcallback@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz#e531c27644cf8b57a99e17ed95b35c748789392e"
   integrity sha1-5THCdkTPi1epnhftlbNcdIeJOS4=
 
+lodash._cacheindexof@*:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/lodash._cacheindexof/-/lodash._cacheindexof-3.0.2.tgz#3dc69ac82498d2ee5e3ce56091bafd2adc7bde92"
+  integrity sha1-PcaayCSY0u5ePOVgkbr9Ktx73pI=
+
 lodash._createassigner@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/lodash._createassigner/-/lodash._createassigner-3.1.1.tgz#838a5bae2fdaca63ac22dee8e19fa4e6d6970b11"
@@ -13953,12 +13963,19 @@ lodash._createassigner@^3.0.0:
     lodash._isiterateecall "^3.0.0"
     lodash.restparam "^3.0.0"
 
+lodash._createcache@*:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/lodash._createcache/-/lodash._createcache-3.1.2.tgz#56d6a064017625e79ebca6b8018e17440bdcf093"
+  integrity sha1-VtagZAF2JeeevKa4AY4XRAvc8JM=
+  dependencies:
+    lodash._getnative "^3.0.0"
+
 lodash._createset@~4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/lodash._createset/-/lodash._createset-4.0.3.tgz#0f4659fbb09d75194fa9e2b88a6644d363c9fe26"
   integrity sha1-D0ZZ+7CddRlPqeK4imZE02PJ/iY=
 
-lodash._getnative@^3.0.0:
+lodash._getnative@*, lodash._getnative@^3.0.0:
   version "3.9.1"
   resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
   integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=
@@ -14171,7 +14188,7 @@ lodash.pick@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
   integrity sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM=
 
-lodash.restparam@^3.0.0:
+lodash.restparam@*, lodash.restparam@^3.0.0:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/lodash.restparam/-/lodash.restparam-3.6.1.tgz#936a4e309ef330a7645ed4145986c85ae5b20805"
   integrity sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=

From 5ecf0eaad81ed9b2b5b7f87d8c79a5a23aae6b32 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Thu, 12 Nov 2020 15:13:28 -0500
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20add=20initial=20auth?=
 =?UTF-8?q?=20flow?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/desktop/app/helpers/is-loading.js          |  24 +++
 ui/desktop/app/router.js                      |   3 +
 ui/desktop/app/routes/application.js          |  29 +++
 ui/desktop/app/routes/index.js                |  17 +-
 ui/desktop/app/routes/scopes/index.js         |  29 +++
 ui/desktop/app/routes/scopes/scope.js         |  24 ++-
 .../app/routes/scopes/scope/authenticate.js   |  29 +++
 .../routes/scopes/scope/authenticate/index.js |  18 ++
 .../scopes/scope/authenticate/method.js       |  62 +++++++
 ui/desktop/app/routes/scopes/scope/index.js   |  17 +-
 ui/desktop/app/routes/scopes/scope/targets.js |  12 +-
 ui/desktop/app/services/scope.js              |   2 +-
 ui/desktop/app/styles/_notify.scss            |  96 ++++++++++
 ui/desktop/app/styles/app.scss                | 174 ++++++++++++++++++
 ui/desktop/app/templates/application.hbs      |   2 +-
 .../templates/scopes/scope/authenticate.hbs   |   1 +
 .../scopes/scope/authenticate/index.hbs       |   1 +
 .../scopes/scope/authenticate/method.hbs      |  27 +++
 ui/desktop/ember-cli-build.js                 |   3 +
 ui/desktop/package.json                       |   4 +
 .../tests/unit/routes/scopes/index-test.js    |  11 ++
 .../routes/scopes/scope/authenticate-test.js  |  11 ++
 .../scopes/scope/authenticate/index-test.js   |  11 ++
 .../scopes/scope/authenticate/method-test.js  |  11 ++
 24 files changed, 588 insertions(+), 30 deletions(-)
 create mode 100644 ui/desktop/app/helpers/is-loading.js
 create mode 100644 ui/desktop/app/routes/scopes/index.js
 create mode 100644 ui/desktop/app/routes/scopes/scope/authenticate.js
 create mode 100644 ui/desktop/app/routes/scopes/scope/authenticate/index.js
 create mode 100644 ui/desktop/app/routes/scopes/scope/authenticate/method.js
 create mode 100644 ui/desktop/app/styles/_notify.scss
 create mode 100644 ui/desktop/app/templates/scopes/scope/authenticate.hbs
 create mode 100644 ui/desktop/app/templates/scopes/scope/authenticate/index.hbs
 create mode 100644 ui/desktop/app/templates/scopes/scope/authenticate/method.hbs
 create mode 100644 ui/desktop/tests/unit/routes/scopes/index-test.js
 create mode 100644 ui/desktop/tests/unit/routes/scopes/scope/authenticate-test.js
 create mode 100644 ui/desktop/tests/unit/routes/scopes/scope/authenticate/index-test.js
 create mode 100644 ui/desktop/tests/unit/routes/scopes/scope/authenticate/method-test.js

diff --git a/ui/desktop/app/helpers/is-loading.js b/ui/desktop/app/helpers/is-loading.js
new file mode 100644
index 000000000..ca34b363a
--- /dev/null
+++ b/ui/desktop/app/helpers/is-loading.js
@@ -0,0 +1,24 @@
+import Helper from '@ember/component/helper';
+import { inject as service } from '@ember/service';
+
+/**
+ * This helper returns true or false based on the state of the ember-loading
+ * service's `isLoading` attribute.
+ */
+export default class extends Helper {
+
+  // =services
+
+  @service loading;
+
+  // =methods
+
+  /**
+   * Returns true if "something" is loading according to ember-loading.
+   * @return {boolean}
+   */
+  compute() {
+    return this.loading.isLoading;
+  }
+
+}
diff --git a/ui/desktop/app/router.js b/ui/desktop/app/router.js
index 3d7c64eb5..5dd439482 100644
--- a/ui/desktop/app/router.js
+++ b/ui/desktop/app/router.js
@@ -10,6 +10,9 @@ Router.map(function () {
   this.route('scopes', function() {
     this.route('scope', { path: ':scope_id' }, function() {
       this.route('targets');
+      this.route('authenticate', function() {
+        this.route('method', { path: ':auth_method_id' });
+      });
     });
   });
 });
diff --git a/ui/desktop/app/routes/application.js b/ui/desktop/app/routes/application.js
index bdf072037..9ed5376e7 100644
--- a/ui/desktop/app/routes/application.js
+++ b/ui/desktop/app/routes/application.js
@@ -3,6 +3,7 @@ import Route from '@ember/routing/route';
 import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
+import loading from 'ember-loading/decorator';
 
 export default class ApplicationRoute extends Route.extend(
   ApplicationRouteMixin
@@ -54,4 +55,32 @@ export default class ApplicationRoute extends Route.extend(
     this.session.invalidate();
   }
 
+  /**
+   * Hooks into ember-loading to kick off loading indicator in the
+   * application template.
+   * @return {boolean} always returns true
+   */
+  @action
+  @loading
+  loading() {
+    return true;
+  }
+
+  /**
+   * Invalidates the session if a 401 error occurs and returns false to
+   * prevent further error handling.
+   * Returns true in all other cases, allowing error handling to occur (such
+   * as displaying the `error.hbs` template, if one exists).
+   * @param {Error} e
+   */
+  @action
+  error(e) {
+    const isUnauthenticated = A(e?.errors)?.firstObject?.isUnauthenticated;
+    if (isUnauthenticated) {
+      this.session.invalidate();
+      return false;
+    }
+    return true;
+  }
+
 }
diff --git a/ui/desktop/app/routes/index.js b/ui/desktop/app/routes/index.js
index 22fa97d16..3ce2a42e1 100644
--- a/ui/desktop/app/routes/index.js
+++ b/ui/desktop/app/routes/index.js
@@ -1,27 +1,12 @@
 import Route from '@ember/routing/route';
-import { inject as service } from '@ember/service';
 
 export default class IndexRoute extends Route {
-  // =services
-
-  @service ipc;
-
   // =methods
 
-  /**
-   * Invokes an IPC method and returns the result.
-   * @return {Promise}
-   */
-  model() {
-    return this.ipc.invoke('getFoobars', {
-      id: '1'
-    });
-  }
-
   /**
    * Redirects to scopes route for further processing.
    */
   redirect() {
-    this.transitionTo('scopes');
+    this.replaceWith('scopes');
   }
 }
diff --git a/ui/desktop/app/routes/scopes/index.js b/ui/desktop/app/routes/scopes/index.js
new file mode 100644
index 000000000..08660d8d2
--- /dev/null
+++ b/ui/desktop/app/routes/scopes/index.js
@@ -0,0 +1,29 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { get } from '@ember/object';
+
+export default class ScopesIndexRoute extends Route {
+  // =services
+
+  @service session;
+
+  // =methods
+
+  /**
+   * If authenticated, redirects to the scope route of the authenticted scope.
+   * If unauthenticated, redirects to the first scope that was loaded (if any).
+   * @param {[ScopeModel]} model
+   * @param {?ScopeModel} model.firstObject
+   */
+  redirect() {
+    const authenticatedScopeID = get(
+      this.session,
+      'data.authenticated.scope.id'
+    );
+    if (authenticatedScopeID) {
+      this.replaceWith('scopes.scope', authenticatedScopeID);
+    } else {
+      this.replaceWith('scopes.scope', 'global');
+    }
+  }
+}
diff --git a/ui/desktop/app/routes/scopes/scope.js b/ui/desktop/app/routes/scopes/scope.js
index 54d771123..69cda7896 100644
--- a/ui/desktop/app/routes/scopes/scope.js
+++ b/ui/desktop/app/routes/scopes/scope.js
@@ -5,6 +5,7 @@ import { A } from '@ember/array';
 export default class ScopesScopeRoute extends Route {
   // =services
 
+  @service session;
   @service scope;
 
   // =methods
@@ -45,24 +46,33 @@ export default class ScopesScopeRoute extends Route {
     let orgs;
     orgs = await this.store.query('scope', { scope_id: 'global' })
       .catch(() => A([]));
-    // Then pull out the "selected" scopes, if relevant
+
+    // Then pull out the "selected" org, if relevant
     let selectedOrg;
     if (model.isGlobal || model.isOrg) selectedOrg = model;
 
     let projects;
-    if(model.isGlobal) {
-      projects = orgs.map((id) => this.store.query('scope', { scope_id: id }));
-    }
-    if(model.isOrg) {
-      projects = this.store.query('scope', { scope_id: model.id });
+    if (model.isOrg) {
+      projects = await this.store.query('scope', { scope_id: model.id });
     }
 
     // Update the scope service with the current scope(s);
     this.scope.org = selectedOrg;
-    this.scope.projects = await projects;
+    this.scope.projects = projects;
     this.scopes = { orgs, selectedOrg };
   }
 
+  /**
+   *
+   */
+  redirect(model) {
+    const { isAuthenticated } = this.session;
+    const { isGlobal } = model;
+    if (isAuthenticated && isGlobal && this.scopes.orgs?.length) {
+      this.replaceWith('scopes.scope', this.scopes.orgs.firstObject.id);
+    }
+  }
+
   /**
    * Adds the scopes hash to the controller context (see `afterModel`).
    * @param {Controller} controller
diff --git a/ui/desktop/app/routes/scopes/scope/authenticate.js b/ui/desktop/app/routes/scopes/scope/authenticate.js
new file mode 100644
index 000000000..8a803e790
--- /dev/null
+++ b/ui/desktop/app/routes/scopes/scope/authenticate.js
@@ -0,0 +1,29 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { hash } from 'rsvp';
+
+export default class ScopesScopeAuthenticateRoute extends Route {
+  // =services
+
+  @service session;
+
+  // =methods
+
+  beforeModel() {
+    if (this.session.isAuthenticated) this.replaceWith('scopes.scope.index');
+  }
+
+  /**
+   * Returns all auth methods for the current scope, along with the current
+   * scope and all scopes (for org navigation).
+   * @return {Promise} `{scope, scopes, authMethods}`
+   */
+  model() {
+    const { id: scope_id } = this.modelFor('scopes.scope');
+    return hash({
+      scope: this.modelFor('scopes.scope'),
+      scopes: this.modelFor('scopes').filter(scope => scope.isOrg),
+      authMethods: this.store.query('auth-method', { scope_id })
+    });
+  }
+}
diff --git a/ui/desktop/app/routes/scopes/scope/authenticate/index.js b/ui/desktop/app/routes/scopes/scope/authenticate/index.js
new file mode 100644
index 000000000..392c5cd24
--- /dev/null
+++ b/ui/desktop/app/routes/scopes/scope/authenticate/index.js
@@ -0,0 +1,18 @@
+import Route from '@ember/routing/route';
+
+export default class ScopesScopeAuthenticateIndexRoute extends Route {
+  // =methods
+
+  /**
+   * This index route exists solely to redirect the user on to the
+   * first auth method.
+   * @param {object} model
+   * @param {[AuthMethodModel]} model.authMethods
+   */
+  redirect({ authMethods }) {
+    const firstAuthMethod = authMethods.firstObject;
+    if (firstAuthMethod) {
+      this.replaceWith('scopes.scope.authenticate.method', firstAuthMethod);
+    }
+  }
+}
diff --git a/ui/desktop/app/routes/scopes/scope/authenticate/method.js b/ui/desktop/app/routes/scopes/scope/authenticate/method.js
new file mode 100644
index 000000000..c9a6adacd
--- /dev/null
+++ b/ui/desktop/app/routes/scopes/scope/authenticate/method.js
@@ -0,0 +1,62 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { action } from '@ember/object';
+import loading from 'ember-loading/decorator';
+
+export default class ScopesScopeAuthenticateMethodRoute extends Route {
+  // =services
+
+  @service session;
+  @service notify;
+  @service intl;
+
+  // =methods
+
+  /**
+   * Returns an auth method by id.
+   * @param {object} params
+   * @return {Promise{AuthMethodModel}}
+   */
+  model({ auth_method_id: id }) {
+    const adapterOptions = { scopeID: this.modelFor('scopes.scope').id };
+    return this.store.findRecord('auth-method', id, adapterOptions);
+  }
+
+  /**
+   * Resets the password field on the controller so it is not
+   * inadvertantly retained in memory.
+   */
+  resetCredentials() {
+    this.controller.setProperties({
+      password: null,
+    });
+  }
+
+  // =actions
+
+  /**
+   * Delegates authentication to the `password` authenticator.
+   * If authentication fails, notifies with an alert.
+   */
+  @action
+  @loading
+  async authenticate(creds) {
+    this.resetCredentials();
+    const authenticatorName = 'authenticator:password';
+    const scope = this.modelFor('scopes.scope');
+    const authMethod = this.currentModel;
+    const requestCookies = false;
+    try {
+      await this.session.authenticate(
+        authenticatorName,
+        creds,
+        requestCookies,
+        { scope, authMethod }
+      );
+      this.replaceWith('index');
+    } catch (e) {
+      const errorMessage = this.intl.t('errors.authentication-failed.title');
+      this.notify.error(errorMessage, { closeAfter: null });
+    }
+  }
+}
diff --git a/ui/desktop/app/routes/scopes/scope/index.js b/ui/desktop/app/routes/scopes/scope/index.js
index 249d7f85a..f6da63026 100644
--- a/ui/desktop/app/routes/scopes/scope/index.js
+++ b/ui/desktop/app/routes/scopes/scope/index.js
@@ -1,12 +1,23 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
 export default class ScopesScopeIndexRoute extends Route {
+  // =services
+
+  @service session;
+
   // =methods
 
   /**
-   * Redirects to scopes route for further processing.
+   * Redirects to scopes/scope/authenticate for further processing.
+   * If already authenticated, redirects to scopes/scope/scopes to display
+   * list of sub scopes.
    */
-  redirect() {
-    this.transitionTo('scopes.scope.targets');
+  redirect(model) {
+    if (!this.session.isAuthenticated) {
+      this.replaceWith('scopes.scope.authenticate');
+    } else {
+      this.replaceWith('scopes.scope.targets');
+    }
   }
 }
diff --git a/ui/desktop/app/routes/scopes/scope/targets.js b/ui/desktop/app/routes/scopes/scope/targets.js
index aefdb89e9..eefcfe26e 100644
--- a/ui/desktop/app/routes/scopes/scope/targets.js
+++ b/ui/desktop/app/routes/scopes/scope/targets.js
@@ -1,20 +1,28 @@
 import Route from '@ember/routing/route';
-import { all } from 'rsvp';
 import { inject as service } from '@ember/service';
+import { all } from 'rsvp';
 
 export default class ScopesScopeTargetsRoute extends Route {
   // =services
 
+  @service session;
   @service scope;
 
   // =methods
 
+  /**
+   * If arriving here unauthenticated, redirect to index for further processing.
+   */
+  beforeModel() {
+    if (!this.session.isAuthenticated) this.transitionTo('index');
+  }
+
   /**
    * Loads all targets under current scope.
    * @return {Promise{[TargetModel]}}
    */
   async model() {
-    let projectTargets = await all(this.scope.projects.map(({ id: scope_id }) => 
+    let projectTargets = await all(this.scope.projects.map(({ id: scope_id }) =>
       this.store.query('target', { scope_id })
     ))
 
diff --git a/ui/desktop/app/services/scope.js b/ui/desktop/app/services/scope.js
index a6b59db24..5827b64d2 100644
--- a/ui/desktop/app/services/scope.js
+++ b/ui/desktop/app/services/scope.js
@@ -14,7 +14,7 @@ export default class ScopeService extends Service {
    */
   @tracked org;
 
-    /**
+  /**
    * @type {[ScopeModel]}
    */
   @tracked projects;
diff --git a/ui/desktop/app/styles/_notify.scss b/ui/desktop/app/styles/_notify.scss
new file mode 100644
index 000000000..784bc746f
--- /dev/null
+++ b/ui/desktop/app/styles/_notify.scss
@@ -0,0 +1,96 @@
+// This file is essentially a rip of the default ember notify styles with some minor tweaks for positioning.
+
+// sass-lint:disable no-vendor-prefixes
+@-webkit-keyframes 'ember-notify-show' {
+  from {
+    left: -310px;
+  }
+
+  to {
+    left: 0;
+  }
+}
+@keyframes 'ember-notify-show' {
+  from {
+    left: -310px;
+  }
+
+  to {
+    left: 0;
+  }
+}
+@-webkit-keyframes 'ember-notify-hide' {
+  from {
+    left: 0;
+  }
+
+  to {
+    left: -310px;
+  }
+}
+@keyframes 'ember-notify-hide' {
+  from {
+    left: 0;
+  }
+
+  to {
+    left: -310px;
+  }
+}
+
+.ember-notify-cn {
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  z-index: 5000;
+}
+
+.ember-notify {
+  box-sizing: border-box;
+  display: block;
+  margin: 10px;
+  position: relative;
+  width: 300px;
+
+  .close {
+    cursor: pointer;
+    float: right;
+  }
+}
+
+.ember-notify-show {
+  -webkit-animation-duration: 500ms;
+  -webkit-animation-name: ember-notify-show;
+  -webkit-animation-timing-function: cubic-bezier(.175, .885, .32, 1.275);
+  animation-duration: 500ms;
+  animation-name: ember-notify-show;
+  animation-timing-function: cubic-bezier(.175, .885, .32, 1.275);
+}
+
+.ember-notify-hide {
+  -webkit-animation-duration: 250ms;
+  -webkit-animation-name: ember-notify-hide;
+  -webkit-animation-timing-function: cubic-bezier(.6, -.28, .735, .045);
+  animation-duration: 250ms;
+  animation-name: ember-notify-hide;
+  animation-timing-function: cubic-bezier(.6, -.28, .735, .045);
+
+  &:hover {
+    -moz-animation-play-state: paused;
+    -webkit-animation-play-state: paused;
+    animation-play-state: paused;
+  }
+}
+
+@media only screen and (max-width: 680px) {
+  .ember-notify-cn {
+    box-sizing: border-box;
+    padding-left: 20px;
+    width: 100%;
+  }
+
+  .ember-notify {
+    float: right;
+    width: 100%;
+  }
+}
diff --git a/ui/desktop/app/styles/app.scss b/ui/desktop/app/styles/app.scss
index 72d055984..a41d1236f 100644
--- a/ui/desktop/app/styles/app.scss
+++ b/ui/desktop/app/styles/app.scss
@@ -1 +1,175 @@
+@use 'rose/variables/sizing';
+@use 'rose/variables/media';
+
 @import 'rose';
+@import 'notify';
+
+.rose-layout-centered {
+  > .rose-layout-page {
+    width: sizing.rems(l) * 18;
+  }
+
+  @media (max-width: media.width(small)) {
+    display: block;
+
+    > .rose-layout-page {
+      width: auto;
+    }
+  }
+}
+
+.rose-nav-sidebar {
+  margin-top: sizing.rems(xxl);
+
+  & + .rose-nav-sidebar {
+    margin-top: 0;
+  }
+
+  .rose-icon {
+    margin-right: sizing.rems(xs);
+  }
+}
+
+.rose-form {
+  &:not(.full-width) {
+    width: 66%;
+  }
+
+  .rose-form-input {
+    width: 100%;
+
+    .rose-form-input-field {
+      width: 100%;
+    }
+  }
+
+  .rose-dropdown {
+    $iconWidth: sizing.rems(m) + sizing.rems(s);
+    $indent:  $iconWidth + sizing.rems(xs);
+
+    .rose-form-radio-label {
+      display: flex;
+
+      .rose-icon {
+        padding-right: sizing.rems(xxs);
+      }
+    }
+
+    .indent-label-1 {
+      .rose-form-radio-label {
+        padding-left: $indent;
+      }
+    }
+
+    .indent-label-2 {
+      .rose-form-radio-label {
+        padding-left: $indent + $iconWidth;
+      }
+    }
+
+    .is-project {
+      .rose-icon {
+        visibility: hidden;
+      }
+    }
+  }
+
+  fieldset {
+    margin-bottom: sizing.rems(m);
+
+    legend {
+      @extend .rose-form-label;
+    }
+  }
+}
+
+.rose-table {
+  p {
+    margin-bottom: 0;
+  }
+
+  .rose-form-checkbox {
+    margin-bottom: 0;
+
+    .rose-form-checkbox-label-text {
+      color: var(--stark);
+      text-decoration: underline;
+    }
+  }
+}
+
+.rose-header {
+  position: relative;
+
+  .logotype {
+    display: none;
+  }
+
+  .rose-dropdown {
+    .rose-icon {
+      transform: scale(0.7);
+    }
+  }
+
+  &.loading {
+    &::after {
+      animation: gradient 1s linear infinite;
+      background: repeating-linear-gradient(to right, var(--subtle), var(--subtle), var(--info), var(--subtle), var(--subtle));
+      background-position: -100% 0;
+      background-size: 200% auto;
+      content: ' ';
+      height: 3px;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 100%;
+
+      @keyframes gradient {
+        0%   { background-position: -100% 0; }
+        100% { background-position: -200% 0; }
+      }
+    }
+  }
+}
+
+.copyable {
+  white-space: nowrap;
+
+  .copyable-button {
+    margin: 0;
+    padding: 0 sizing.rems(xxs);
+    position: relative;
+    top: -2px;
+  }
+
+  mark {
+    animation: fadeBackground 0.75s linear;
+    background-color: transparent;
+    color: inherit;
+
+    @keyframes fadeBackground {
+      0%   { background-color: var(--action-subtler-1); }
+      100% { background-color: transparent; }
+    }
+  }
+}
+
+.doc-link {
+  .large {
+    svg {
+      transform: scale(0.8);
+    }
+  }
+}
+
+[class*='session-status-'] {
+  color: var(--ui-gray-subtler-2);
+}
+
+.session-status-active {
+  color: var(--success);
+}
+
+.nowrap {
+  white-space: nowrap;
+}
diff --git a/ui/desktop/app/templates/application.hbs b/ui/desktop/app/templates/application.hbs
index bab0cd57b..8f1034fb1 100644
--- a/ui/desktop/app/templates/application.hbs
+++ b/ui/desktop/app/templates/application.hbs
@@ -3,7 +3,7 @@
 <Rose::Layout::Global as |layout|>
 
   <layout.header>
-    <Rose::Header as |header|>
+    <Rose::Header class="{{if (is-loading) " loading"}}" as |header|>
       <header.brand @logo="logo-app" @text={{app-name}} />
 
       <header.nav>
diff --git a/ui/desktop/app/templates/scopes/scope/authenticate.hbs b/ui/desktop/app/templates/scopes/scope/authenticate.hbs
new file mode 100644
index 000000000..e2147cab0
--- /dev/null
+++ b/ui/desktop/app/templates/scopes/scope/authenticate.hbs
@@ -0,0 +1 @@
+{{outlet}}
\ No newline at end of file
diff --git a/ui/desktop/app/templates/scopes/scope/authenticate/index.hbs b/ui/desktop/app/templates/scopes/scope/authenticate/index.hbs
new file mode 100644
index 000000000..e2147cab0
--- /dev/null
+++ b/ui/desktop/app/templates/scopes/scope/authenticate/index.hbs
@@ -0,0 +1 @@
+{{outlet}}
\ No newline at end of file
diff --git a/ui/desktop/app/templates/scopes/scope/authenticate/method.hbs b/ui/desktop/app/templates/scopes/scope/authenticate/method.hbs
new file mode 100644
index 000000000..f45762068
--- /dev/null
+++ b/ui/desktop/app/templates/scopes/scope/authenticate/method.hbs
@@ -0,0 +1,27 @@
+<Rose::Form
+  class="full-width"
+  @onSubmit={{route-action "authenticate" (hash
+    identification=this.identification
+    password=this.password
+  )}}
+  @cancel={{false}}
+  as |form|
+>
+
+  <form.input
+    @name="identification"
+    @type="text"
+    @value={{this.identification}}
+    @label={{t "form.login_name.label"}} />
+
+  <form.input
+    @name="password"
+    @type="password"
+    @value={{this.password}}
+    @label={{t "form.password.label"}} />
+
+  <form.actions
+    @submitText={{t "actions.authenticate"}}
+    @showCancel={{false}} />
+
+</Rose::Form>
diff --git a/ui/desktop/ember-cli-build.js b/ui/desktop/ember-cli-build.js
index d0812bbdf..79ef0cbb3 100644
--- a/ui/desktop/ember-cli-build.js
+++ b/ui/desktop/ember-cli-build.js
@@ -15,6 +15,9 @@ module.exports = function(defaults) {
       onlyIncluded: true,
       extension: 'scss',
     },
+    emberNotify: {
+      importCss: false,
+    },
   });
 
   // Use `app.import` to add additional libraries to the generated
diff --git a/ui/desktop/package.json b/ui/desktop/package.json
index 6876e906f..853c78e99 100644
--- a/ui/desktop/package.json
+++ b/ui/desktop/package.json
@@ -61,14 +61,18 @@
     "ember-inline-svg": "^1.0.0",
     "ember-intl": "^5.5.0",
     "ember-load-initializers": "^2.1.1",
+    "ember-loading": "^0.4.0",
     "ember-maybe-import-regenerator": "^0.1.6",
     "ember-modifier": "^2.1.1",
+    "ember-notify": "^6.0.0",
     "ember-page-title": "^6.0.3",
     "ember-qunit": "^4.6.0",
     "ember-resolver": "^8.0.0",
+    "ember-route-action-helper": "^2.0.8",
     "ember-simple-auth": "^3.0.1",
     "ember-source": "~3.20.2",
     "ember-template-lint": "^2.9.1",
+    "ember-uuid": "^2.1.0",
     "ember-welcome-page": "^4.0.0",
     "eslint": "^7.5.0",
     "eslint-plugin-ember": "^8.9.1",
diff --git a/ui/desktop/tests/unit/routes/scopes/index-test.js b/ui/desktop/tests/unit/routes/scopes/index-test.js
new file mode 100644
index 000000000..c2fb98357
--- /dev/null
+++ b/ui/desktop/tests/unit/routes/scopes/index-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | scopes/index', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/index');
+    assert.ok(route);
+  });
+});
diff --git a/ui/desktop/tests/unit/routes/scopes/scope/authenticate-test.js b/ui/desktop/tests/unit/routes/scopes/scope/authenticate-test.js
new file mode 100644
index 000000000..2ee818453
--- /dev/null
+++ b/ui/desktop/tests/unit/routes/scopes/scope/authenticate-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | scopes/scope/authenticate', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/authenticate');
+    assert.ok(route);
+  });
+});
diff --git a/ui/desktop/tests/unit/routes/scopes/scope/authenticate/index-test.js b/ui/desktop/tests/unit/routes/scopes/scope/authenticate/index-test.js
new file mode 100644
index 000000000..88d5a1121
--- /dev/null
+++ b/ui/desktop/tests/unit/routes/scopes/scope/authenticate/index-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | scopes/scope/authenticate/index', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/authenticate/index');
+    assert.ok(route);
+  });
+});
diff --git a/ui/desktop/tests/unit/routes/scopes/scope/authenticate/method-test.js b/ui/desktop/tests/unit/routes/scopes/scope/authenticate/method-test.js
new file mode 100644
index 000000000..5aed2aefe
--- /dev/null
+++ b/ui/desktop/tests/unit/routes/scopes/scope/authenticate/method-test.js
@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'ember-qunit';
+
+module('Unit | Route | scopes/scope/authenticate/method', function(hooks) {
+  setupTest(hooks);
+
+  test('it exists', function(assert) {
+    let route = this.owner.lookup('route:scopes/scope/authenticate/method');
+    assert.ok(route);
+  });
+});