Demo application


This specification describes a demo application using all components designed for the UI Transfer project, demonstrating an example use case in which the user traverses a simple flow in which they authenticate themselves with an identity provider, receive an invite for access to some of their data for a certain purpose, have the option to give their consent and review the result of their consent action (in casu a simple success page).


State Machine

Create an XState machine module with a DemoContext, DemoStateSchema and DemoEvent.

The context contains an Invite, a Holder, a Purpose, a Session (all eponymous), as well as an array of Sources called sources. All fields are optional. The machine can have the following DemoStates:

  • AUTHENTICATING, with a default context;

  • LOADING_INVITE, containing a mandatory Session;

  • AWAITING_CONSENT, containing a mandatory Session and Invite;

  • LOADING_SOURCES, containing a mandatory Session and Invite;

  • AWAITING_SOURCE_SELECTION, containing a mandatory Session, Invite and Source list;

  • CONNECTING, containing a mandatory Session, Invite and Source list;

  • CALLBACK, a final state containing a mandatory Session, Invite and Source list.

A DemoEvent can be: - AUTHENTICATED, containing a Session; - INVITE_LOADED, containing an Invite, a Holder and a Purpose; - SOURCES_LOADED, containing an array of Sources; - CONSENT_GIVEN, containing nothing; - SOURCE_SELECTED, containing a single Source; - CONNECTED, containing nothing.

Implement the following asynchronous functions, all taking a DemoContext:

  • loadInvite, returning an INVITE_LOADED event with an example Invite (with Purpose and Holder);

  • loadSources, returning a SOURCES_LOADED event with an array containing an example Source;

  • connectSource, also taking a SourceSelectedEvent, and returning a CONNECTED event.

Export a machine configuration starting in the AUTHENTICATING state and performing the following transitions.

  • In AUTHENTICATING, wait for an AUTHENTICATED event, then put the contained Session in the context and go to LOADING_INVITE.

  • In LOADING_INVITE, invoke the loadInvite function, wait for an INVITE_LOADED event, then put the Invite, Purpose and Holder in the context, and go to AWAITING_CONSENT.

  • In AWAITING_CONSENT, wait for a CONSENT_GIVEN event, then go to LOADING_SOURCES.

  • In LOADING_SOURCES invoke the loadSources function, wait for an SOURCES_LOADED event, then put the Source array in the context, and go to AWAITING_SOURCE_SELECTION.


  • In CONNECTING, invoke the connectSource function, then wait for a CONNECTED event and go to CALLBACK.

  • In CALLBACK, do nothing.


This application builds on all other components of this project.

Create a fully independent RxLitElement Web Component with an interpreted DemoMachine, and the following internal properties:

  • state of the type State<AuthenticateContext>;

  • an array of Sources called sources;

  • a Purpose called purpose.

In the constructor, have the RxLitElement subscribe the internal properties to the state of the machine and the sources and purpose of the context, then start the machine.

Have the component display an authentication component when in the AUTHENTICATING state; a consent request component with the Purpose when in the AWAITING_CONSENT state; a source selection component with the Source list when in the AWAITING_SOURCE_SELECTION state; and a consent result component displaying a success message for the Purpose when in the CALLBACK state. In all other cases, display a loading icon.

Translate all HTML events fired by the subcomponents to events of the application’s machine, passing their detail along as payload:

  • authenticated ⇒ AUTHENTICATED,

  • consent-given ⇒ CONSENT_GIVEN,

  • source-selected ⇒ SOURCE_SELECTED,

  • button-clicked ⇒ no matching event in demo, call window.alert

Use the variables of the theme package to style the component.