JwtSource

This is a Source-like component and with most of our Source components, the component only needs to be added to the page in order to start the flow and is meant to be used as such (think 'this is like an ``).

The component will go through the steps of requesting a JWT token from a third party OAuth provider. src should contain the full URL of the authorization URL for the 3rd party provider including redirect_uri. Once the user has logged into the 3rd party provider the onchange event will be fired containing an event-like object whose data contains the JWT information.

During development you can use the CONSUL_OIDC_PROVIDER_URL environment/cookie value to inject/mock the provider URL of your choice. This var/cookie value does not need the redirect_uri parameter adding as that will be automatically added by the UI . This URL will then be returned by our mock API when requesting the AuthURL for all OIDC AuthMethods.

This component does not store the resulting JWT, it only emits it via its onchange argument/event handler. Errors are emitted via the onerror argument/event handler.

hbs

<figure>
  <figcaption>Provide a widget to set the URL</figcaption>

  <input
    oninput={{action (mut this.value) value="target.value"}}
    type="text"
    value={{this.value}}
    {{did-insert (set this 'value'
      (concat
        (or
          (env 'CONSUL_OIDC_PROVIDER_URL')
          (concat (env 'CONSUL_BASE_UI_URL') '/oauth-provider-debug?client_id=oauth-double&nonce=1&state=123456789abc')
        )
        (concat '&redirect_uri=' (env 'CONSUL_BASE_UI_URL') '/oidc/callback&response_type=code&scope=openid')
      )
    )}}
  />
  <button
    type="button"
    {{on 'click' (fn (mut this.state) 'authenticating')}}
  >
    Go
  </button>
</figure>

<figure>
  <figcaption>When the button is clicked add TokenSource to the page</figcaption>

{{#if (eq this.state 'authenticating')}}
<JwtSource
  @src={{this.value}}
  @onchange={{queue (action (mut this.jwt) value="data") (fn (mut this.state) '')}}
  @onerror={{queue (action (mut this.error) value="error.errors.firstObject") (fn (mut this.state) '')}}
/>
{{/if}}
</figure>
<figure>
  <figcaption>Show the results</figcaption>
  <dl>
{{#if this.jwt}}
    <dt>authorizationState</dt>
    <dd>{{this.jwt.authorizationState}}</dd>
    <dt>authorizationCode</dt>
    <dd>{{this.jwt.authorizationCode}}</dd>
    <dt>provider</dt>
    <dd>{{this.jwt.provider}}</dd>
{{/if}}
{{#if this.error}}
    <dt>Error</dt>
    <dd>{{this.error.detail}}</dd>
{{/if}}
  </dl>
</figure>

Arguments

Argument	Type	Description
`src`	`String`	The full AuthURL for the 3rd party OIDC provider as provided by Consul (including `redirect_uri`)
`onchange`	`Function`	The action to fire when the data changes. Emits an Event-like object with a `data` property containing the JWT data, in this case the `autorizationStatus`, `autorizationCode`, plus the UI added `provider` name
`onerror`	`Function`	The action to fire when an error occurs. Emits ErrorEvent object with an `error` property containing the Error.

See

Component Source Code