In traditional UI, developers were able to connect to external applications using OAuth2 authorization code grant flow using the pxInformationMashup section and the 'External Web Component'. The authentication could be triggered in the work portal through the connect / disconnect action buttons.

For documentation on how to use this functionality in Traditional UI see:

https://www.youtube.com/watch?v=R_AT-TuZlI8

https://docs-previous.pega.com/user-experience-theme-ui-kit/86/creating-external-web-component

In order to deliver the same functionality, a new component has been added to the Constellation UI Gallery called the OAuthConnect component: see https://pegasystems.github.io/constellation-ui-gallery/?path=/docs/widgets-oauth-connect--docs

This component delivers the same functionality and can be extended to implement any UI specific to the 3rd party application: for example using an embedded iframe or by making direct https API call to the 3rd party app using the JWT token.

To use the component in the UI Gallery, you can install the ComputerLand application on a 23.1 system - see https://github.com/pegasystems/constellation-ui-gallery/releases/tag/1.0.10

Important notes:

- The OAuth2 client registration 'OauthConnectTest' saved as part of the ComputerLand application needs to be regenerated since Oauth2.0 secrets are not transferable between systems. Regenerate the secret for OauthConnectTest, update the authentication profile OauthConnectTest and set the URLs for the different endpoints.

- Some systems might not support TLS 1.3. In this case update the authentication profile to switch to TLS 1.2

You can see a demo of the component on the Constellation UI Gallery and build the component from source directly.

For more details, you can watch the video below.