UI/OIDC provider (#12800)

* Add new route w/ controller oidc-provider

* oidc-provider controller has params, template has success message (temporary), model requests correct endpoint

* Move oidc-provider route to under identity

* Do not redirect after poll if on oidc-provider page

* WIP provider -- beforeModel handles prompt, logout, redirect

* Auth service fetch method rejects with fetch response if status >= 300

* New component OidcConsentBlock

* Fix redirect to/from auth with cluster name, show error and consent form if applicable

* Show error and consent form on template

* Add component test, update docs

* Test for oidc-consent-block component

* Add changelog

* fix tests

* Add authorize to end of router path

* Remove unused tests

* Update changelog with feature name

* Add descriptions for OidcConsentBlock component

* glimmerize token-expire-warning and don't override yield if on oidc-provider route

* remove text on token-expire-warning

* Fix null transition.to on cluster redirect

* Hide nav links if oidc-provider route

changelog/12800.txt

@@ -0,0 +1,3 @@
+```release-note:feature
+**OIDC Authorization Code Flow**: The Vault UI now supports OIDC Authorization Code Flow
+```

ui/app/components/nav-header.js

@@ -1,10 +1,21 @@
 import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+import { computed } from '@ember/object';
+
 export default Component.extend({
+  router: service(),
   'data-test-navheader': true,
   classNameBindings: 'consoleFullscreen:panel-fullscreen',
   tagName: 'header',
   navDrawerOpen: false,
   consoleFullscreen: false,
+  hideLinks: computed('router.currentRouteName', function() {
+    let currentRoute = this.router.currentRouteName;
+    if ('vault.cluster.identity.oidc-provider' === currentRoute) {
+      return true;
+    }
+    return false;
+  }),
   actions: {
     toggleNavDrawer(isOpen) {
       if (isOpen !== undefined) {

ui/app/components/oidc-consent-block.js

@@ -0,0 +1,59 @@
+/**
+ * @module OidcConsentBlock
+ * OidcConsentBlock components are used to show the consent form for the OIDC Authorization Code Flow
+ *
+ * @example
+ * ```js
+ * <OidcConsentBlock @redirect="https://example.com/oidc-callback" @code="abcd1234" @state="string-for-state" />
+ * ```
+ * @param {string} redirect - redirect is the URL where successful consent will redirect to
+ * @param {string} code - code is the string required to pass back to redirect on successful OIDC auth
+ * @param {string} [state] - state is a string which is required to return on redirect if provided, but optional generally
+ */
+
+import Ember from 'ember';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+const validParameters = ['code', 'state'];
+export default class OidcConsentBlockComponent extends Component {
+  @tracked didCancel = false;
+
+  get win() {
+    return this.window || window;
+  }
+
+  buildUrl(urlString, params) {
+    try {
+      let url = new URL(urlString);
+      Object.keys(params).forEach(key => {
+        if (params[key] && validParameters.includes(key)) {
+          url.searchParams.append(key, params[key]);
+        }
+      });
+      return url;
+    } catch (e) {
+      console.debug('DEBUG: parsing url failed for', urlString);
+      throw new Error('Invalid URL');
+    }
+  }
+
+  @action
+  handleSubmit(evt) {
+    evt.preventDefault();
+    let { redirect, ...params } = this.args;
+    let redirectUrl = this.buildUrl(redirect, params);
+    if (Ember.testing) {
+      this.args.testRedirect(redirectUrl.toString());
+    } else {
+      this.win.location.replace(redirectUrl);
+    }
+  }
+
+  @action
+  handleCancel(evt) {
+    evt.preventDefault();
+    this.didCancel = true;
+  }
+}

ui/app/components/token-expire-warning.js

@@ -1,5 +1,14 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
 
-export default Component.extend({
-  tagName: '',
-});
+export default class TokenExpireWarning extends Component {
+  @service router;
+
+  get showWarning() {
+    let currentRoute = this.router.currentRouteName;
+    if ('vault.cluster.identity.oidc-provider' === currentRoute) {
+      return false;
+    }
+    return !!this.args.expirationDate;
+  }
+}

ui/app/controllers/vault/cluster/identity/oidc-provider.js

@@ -0,0 +1,24 @@
+import Controller from '@ember/controller';
+
+export default class VaultClusterIdentityOidcProviderController extends Controller {
+  queryParams = [
+    'scope', // *
+    'response_type', // *
+    'client_id', // *
+    'redirect_uri', // *
+    'state', // *
+    'nonce', // *
+    'display',
+    'prompt',
+    'max_age',
+  ];
+  scope = null;
+  response_type = null;
+  client_id = null;
+  redirect_uri = null;
+  state = null;
+  nonce = null;
+  display = null;
+  prompt = null;
+  max_age = null;
+}

ui/app/mixins/cluster-route.js

@@ -7,6 +7,7 @@ const AUTH = 'vault.cluster.auth';
 const CLUSTER = 'vault.cluster';
 const CLUSTER_INDEX = 'vault.cluster.index';
 const OIDC_CALLBACK = 'vault.cluster.oidc-callback';
+const OIDC_PROVIDER = 'vault.cluster.identity.oidc-provider';
 const DR_REPLICATION_SECONDARY = 'vault.cluster.replication-dr-promote';
 const DR_REPLICATION_SECONDARY_DETAILS = 'vault.cluster.replication-dr-promote.details';
 const EXCLUDED_REDIRECT_URLS = ['/vault/logout'];
@@ -20,7 +21,9 @@ export default Mixin.create({
 
   transitionToTargetRoute(transition = {}) {
     const targetRoute = this.targetRouteName(transition);
-
+    if (OIDC_PROVIDER === this.router.currentRouteName || OIDC_PROVIDER === transition?.to?.name) {
+      return RSVP.resolve();
+    }
     if (
       targetRoute &&
       targetRoute !== this.routeName &&

ui/app/router.js

@@ -139,6 +139,10 @@ Router.map(function() {
       }
 
       this.route('not-found', { path: '/*path' });
+
+      this.route('identity', function() {
+        this.route('oidc-provider', { path: '/oidc/provider/:oidc_name/authorize' });
+      });
     });
     this.route('not-found', { path: '/*path' });
   });

ui/app/routes/vault/cluster/identity/oidc-provider.js

@@ -0,0 +1,115 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+const AUTH = 'vault.cluster.auth';
+const PROVIDER = 'vault.cluster.identity.oidc-provider';
+
+export default class VaultClusterIdentityOidcProviderRoute extends Route {
+  @service auth;
+  @service router;
+
+  get win() {
+    return this.window || window;
+  }
+
+  _redirect(url, params) {
+    let redir = this._buildUrl(url, params);
+    this.win.location.replace(redir);
+  }
+
+  beforeModel(transition) {
+    const currentToken = this.auth.get('currentTokenName');
+    let { redirect_to, ...qp } = transition.to.queryParams;
+    console.debug('DEBUG: removing redirect_to', redirect_to);
+    if (!currentToken && 'none' === qp.prompt?.toLowerCase()) {
+      this._redirect(qp.redirect_uri, {
+        state: qp.state,
+        error: 'login_required',
+      });
+    } else if (!currentToken || 'login' === qp.prompt?.toLowerCase()) {
+      if ('login' === qp.prompt?.toLowerCase()) {
+        this.auth.deleteCurrentToken();
+        qp.prompt = null;
+      }
+      let { cluster_name } = this.paramsFor('vault.cluster');
+      let url = this.router.urlFor(transition.to.name, transition.to.params, { queryParams: qp });
+      return this.transitionTo(AUTH, cluster_name, { queryParams: { redirect_to: url } });
+    }
+  }
+
+  _redirectToAuth(oidcName, queryParams, logout = false) {
+    let { cluster_name } = this.paramsFor('vault.cluster');
+    let currentRoute = this.router.urlFor(PROVIDER, oidcName, { queryParams });
+    if (logout) {
+      this.auth.deleteCurrentToken();
+    }
+    return this.transitionTo(AUTH, cluster_name, { queryParams: { redirect_to: currentRoute } });
+  }
+
+  _buildUrl(urlString, params) {
+    try {
+      let url = new URL(urlString);
+      Object.keys(params).forEach(key => {
+        if (params[key]) {
+          url.searchParams.append(key, params[key]);
+        }
+      });
+      return url;
+    } catch (e) {
+      console.debug('DEBUG: parsing url failed for', urlString);
+      throw new Error('Invalid URL');
+    }
+  }
+
+  _handleSuccess(response, baseUrl, state) {
+    const { code } = response;
+    let redirectUrl = this._buildUrl(baseUrl, { code, state });
+    this.win.location.replace(redirectUrl);
+  }
+  _handleError(errorResp, baseUrl) {
+    let redirectUrl = this._buildUrl(baseUrl, { ...errorResp });
+    this.win.location.replace(redirectUrl);
+  }
+
+  async model(params) {
+    let { oidc_name, ...qp } = params;
+    let decodedRedirect = decodeURI(qp.redirect_uri);
+    let url = this._buildUrl(`${this.win.origin}/v1/identity/oidc/provider/${oidc_name}/authorize`, qp);
+    try {
+      const response = await this.auth.ajax(url, 'GET', {});
+      if ('consent' === qp.prompt?.toLowerCase()) {
+        return {
+          consent: {
+            code: response.code,
+            redirect: decodedRedirect,
+            state: qp.state,
+          },
+        };
+      }
+      this._handleSuccess(response, decodedRedirect, qp.state);
+    } catch (errorRes) {
+      let resp = await errorRes.json();
+      let code = resp.error;
+      if (code === 'max_age_violation') {
+        this._redirectToAuth(oidc_name, qp, true);
+      } else if (code === 'invalid_redirect_uri') {
+        return {
+          error: {
+            title: 'Redirect URI mismatch',
+            message:
+              'The provided redirect_uri is not in the list of allowed redirect URIs. Please make sure you are sending a valid redirect URI from your application.',
+          },
+        };
+      } else if (code === 'invalid_client_id') {
+        return {
+          error: {
+            title: 'Invalid client ID',
+            message: 'Your client ID is invalid. Please update your configuration and try again.',
+          },
+        };
+      } else {
+        this._handleError(resp, decodedRedirect);
+      }
+    }
+  }
+}

ui/app/services/auth.js

@@ -97,7 +97,7 @@ export default Service.extend({
       } else if (response.status >= 200 && response.status < 300) {
         return resolve(response.json());
       } else {
-        return reject();
+        return reject(response);
       }
     });
   },

ui/app/templates/components/nav-header.hbs

@@ -9,30 +9,32 @@
     </button>
   {{/unless}}
 
-  <div class="navbar-drawer{{if navDrawerOpen ' is-active'}}">
-    <div class="navbar-drawer-scroll">
-      <div data-test-navheader-main>
-        {{yield (hash
-          main=(component 'nav-header/main')
-          closeDrawer=(action "toggleNavDrawer" false)
-          )
-        }}
+  {{#unless hideLinks}}
+    <div class="navbar-drawer{{if navDrawerOpen ' is-active'}}">
+      <div class="navbar-drawer-scroll">
+        <div data-test-navheader-main>
+          {{yield (hash
+            main=(component 'nav-header/main')
+            closeDrawer=(action "toggleNavDrawer" false)
+            )
+          }}
+        </div>
+        <div class="navbar-end" data-test-navheader-items>
+          {{yield (hash
+            items=(component 'nav-header/items')
+            closeDrawer=(action "toggleNavDrawer" false)
+            )
+          }}
+        </div>
       </div>
-      <div class="navbar-end" data-test-navheader-items>
-        {{yield (hash
-          items=(component 'nav-header/items')
-          closeDrawer=(action "toggleNavDrawer" false)
-          )
-        }}
-      </div>
-    </div>
 
-    {{#if navDrawerOpen}}
-      <button class=" navbar-drawer-toggle is-hidden-tablet" type="button" {{action "toggleNavDrawer" false}}>
-        <Icon @glyph="cancel-plain" />
-      </button>
-    {{/if}}
-  </div>
+      {{#if navDrawerOpen}}
+        <button class=" navbar-drawer-toggle is-hidden-tablet" type="button" {{action "toggleNavDrawer" false}}>
+          <Icon @glyph="cancel-plain" />
+        </button>
+      {{/if}}
+    </div>
+  {{/unless}}
 
   <div class="navbar-drawer-overlay{{if navDrawerOpen ' is-active'}}" onclick={{action "toggleNavDrawer" (not navDrawerOpen)}}></div>
 </nav>

ui/app/templates/components/oidc-consent-block.hbs

@@ -0,0 +1,23 @@
+{{#if this.didCancel}}
+  <h3 class="title is-3" data-test-consent-title>
+    Consent Not Given
+  </h3>
+  <div class="box">
+    <p class="has-bottom-margin-l has-top-margin-l">Login attempt has been terminated.</p>
+  </div>
+{{else}}
+  <h3 class="title is-3" data-test-consent-title>
+    Consent
+  </h3>
+  <form class="box" {{on 'submit' this.handleSubmit}} data-test-consent-form>
+    <p class="has-bottom-margin-s">In order to complete the login process, you must consent to Vault sharing your profile, email, address, and phone with the client.</p>
+    <p class="has-bottom-margin-s">Do you want to continue?</p>
+    <FormSaveButtons
+      @saveButtonText="Yes"
+      @isSaving={{false}}
+      @cancelButtonText="No"
+      @onCancel={{this.handleCancel}}
+      @includeBox={{false}}
+    />
+  </form>
+{{/if}}

ui/app/templates/components/token-expire-warning.hbs

@@ -1,9 +1,9 @@
-{{#if (and expirationDate (is-after (now interval=1000) expirationDate))}}
+{{#if (and this.showWarning (is-after (now interval=1000) @expirationDate))}}
   <div class="token-expire-warning">
     <AlertBanner
       @type="danger"
       @message="Your auth token expired on
-        {{date-format expirationDate "MMMM do yyyy, h:mm:ss a"}}
+        {{date-format @expirationDate "MMMM do yyyy, h:mm:ss a"}}
          . You will need to re-authenticate."
     >
       <LinkTo @route="vault.cluster.logout" class="button link">

ui/app/templates/vault/cluster/identity/oidc-provider.hbs

@@ -0,0 +1,25 @@
+<div class="splash-page-container section is-flex-v-centered-tablet is-flex-1 is-fullwidth">
+  <div class="columns is-centered is-gapless is-fullwidth">
+    <div class="column is-4-desktop is-6-tablet">
+      {{#if model.error}}
+        <div class="box is-shadowless is-flex-v-centered">
+          <LogoEdition />
+        </div>
+        <AlertBanner
+          @type="danger"
+          @title={{model.error.title}}
+          @message={{model.error.message}}
+        />
+      {{else if model.consent}}
+        <OidcConsentBlock
+          @code={{model.consent.code}}
+          @state={{model.consent.state}}
+          @redirect={{model.consent.redirect}}
+          @onSuccess={{this._handleSuccess}}
+        />
+      {{else}}
+        <VaultLogoSpinner />
+      {{/if}}
+    </div>
+  </div>
+</div>

ui/lib/core/addon/components/form-save-buttons.js

@@ -12,6 +12,7 @@ import layout from '../templates/components/form-save-buttons';
  * ```
  *
  * @param [saveButtonText="Save" {String}] - The text that will be rendered on the Save button.
+ * @param [cancelButtonText="Cancel" {String}] - The text that will be rendered on the Cancel button.
  * @param [isSaving=false {Boolean}] - If the form is saving, this should be true. This will disable the save button and render a spinner on it;
  * @param [cancelLinkParams=[] {Array}] - An array of arguments used to construct a link to navigate back to when the Cancel button is clicked.
  * @param [onCancel=null {Fuction}] - If the form should call an action on cancel instead of route somewhere, the fucntion can be passed using onCancel instead of passing an array to cancelLinkParams.

ui/tests/integration/components/oidc-consent-block-test.js

@@ -0,0 +1,105 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render, click } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+import sinon from 'sinon';
+
+const redirectBase = 'https://hashicorp.com';
+
+module('Integration | Component | oidc-consent-block', function(hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function(assert) {
+    this.set('redirect', redirectBase);
+    await render(hbs`
+      <OidcConsentBlock @redirect={{redirect}} @code="1234" />
+    `);
+
+    assert.dom('[data-test-consent-title]').hasText('Consent', 'Title is correct on initial render');
+    assert
+      .dom('[data-test-consent-form]')
+      .includesText(
+        'In order to complete the login process, you must consent to Vault sharing your profile, email, address, and phone with the client.',
+        'shows the correct copy for consent form'
+      );
+    assert.dom('[data-test-edit-form-submit]').hasText('Yes', 'form button has correct submit text');
+    assert.dom('[data-test-cancel-button]').hasText('No', 'form button has correct cancel text');
+  });
+
+  test('it calls the success callback when user clicks "Yes"', async function(assert) {
+    const spy = sinon.spy();
+    this.set('successSpy', spy);
+    this.set('redirect', redirectBase);
+
+    await render(hbs`
+      <OidcConsentBlock @redirect={{redirect}} @code="1234" @testRedirect={{successSpy}} @foo="make sure this doesn't get passed" />
+    `);
+
+    assert.dom('[data-test-consent-title]').hasText('Consent', 'Title is correct on initial render');
+    assert.dom('[data-test-consent-form]').exists('Consent form exists');
+    assert
+      .dom('[data-test-consent-form]')
+      .includesText(
+        'In order to complete the login process, you must consent to Vault sharing your profile, email, address, and phone with the client.',
+        'shows the correct copy for consent form'
+      );
+    await click('[data-test-edit-form-submit]');
+    assert.ok(spy.calledWith(`${redirectBase}/?code=1234`), 'Redirects to correct route');
+  });
+
+  test('it shows the termination message when user clicks "No"', async function(assert) {
+    const spy = sinon.spy();
+    this.set('successSpy', spy);
+    this.set('redirect', redirectBase);
+
+    await render(hbs`
+      <OidcConsentBlock @redirect={{redirectBase}} @code="1234" @testRedirect={{successSpy}} />
+    `);
+
+    assert.dom('[data-test-consent-title]').hasText('Consent', 'Title is correct on initial render');
+    assert.dom('[data-test-consent-form]').exists('Consent form exists');
+    assert
+      .dom('[data-test-consent-form]')
+      .includesText(
+        'In order to complete the login process, you must consent to Vault sharing your profile, email, address, and phone with the client.',
+        'shows the correct copy for consent form'
+      );
+    await click('[data-test-cancel-button]');
+    assert.dom('[data-test-consent-title]').hasText('Consent Not Given', 'Title changes to not given');
+    assert.dom('[data-test-consent-form]').doesNotExist('Consent form is hidden');
+
+    assert.ok(spy.notCalled, 'Does not call the success method');
+  });
+
+  test('it calls the success callback with correct params', async function(assert) {
+    const spy = sinon.spy();
+    this.set('successSpy', spy);
+    this.set('redirect', redirectBase);
+    this.set('code', 'unescaped<string');
+
+    await render(hbs`
+      <OidcConsentBlock
+        @redirect={{redirect}}
+        @code={{code}}
+        @state="foo"
+        @foo="make sure this doesn't get passed"
+        @testRedirect={{successSpy}}
+      />
+    `);
+
+    assert.dom('[data-test-consent-title]').hasText('Consent', 'Title is correct on initial render');
+    assert.dom('[data-test-consent-form]').exists('Consent form exists');
+    assert
+      .dom('[data-test-consent-form]')
+      .includesText(
+        'In order to complete the login process, you must consent to Vault sharing your profile, email, address, and phone with the client.',
+        'shows the correct copy for consent form'
+      );
+    await click('[data-test-edit-form-submit]');
+    console.log(spy, spy.args);
+    assert.ok(
+      spy.calledWith(`${redirectBase}/?code=unescaped%3Cstring&state=foo`),
+      'Redirects to correct route, with escaped values and without superflous params'
+    );
+  });
+});