Getting Started

Canopy Connect Components is a set of prebuilt UI components for building your authentication flow. It tokenizes the credentials within a Component without having them touch your server.


Include Canopy Connect Components in your application, you can do so through the following methods:

<script src=""></script>

Note: this is a UMD module, if RequireJS/AMD are defined, they will be used. Otherwise CanopyConnectComponents will be set on the window.


Subresource Integrity (SRI) verification

Do not use Subresource Integrity (SRI) verification in the script tag. Canopy Connect may deploy updates and improvements to Components. Using a Subresource Integrity check will fail when we deploy updates to Components.

const script = document.createElement('script');
script.src = "";
script.onerror = () => {
  // handle failure attempt


Initialize a Components Form:

const form = CanopyConnectComponents.form(options)

For available Form options, refer to the Reference Documentation


Form fields are fully customizable. Learn more here.

Then, use your form to mount the available input fields:

const { username, password, thirdfield } = form.components;

form.on('ready', () => {
  // components are mounted and ready for input

if (username) {
  username.mount("#username"); // Use any selector or element object

if (password) {
  password.mount("#password"); // Use any selector or element object

if (thirdfield) {
  thirdfield.mount("#thirdfield"); // Use any selector or element object

For more FieldComponent methods and events, refer to the Reference Documentation

Then, let your user enter their credentials and provide them with a button to submit those credentials.

document.getElementById("your-submit-button").on("click", async () => {
  const { errors, tokens } = await form.submit();
  if (errors) {
    // display form errors
  const { username, password, thirdfield } = tokens;
  // submit the tokens to POST /consentAndConnect or POST /connect