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.

Installation

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

Static

<script src="https://components.usecanopy.com/v1/cc-components.js"></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.

Dynamic

const script = document.createElement('script');
script.src = "https://components.usecanopy.com/v1/cc-components.js";
document.head.append(script);
script.onerror = () => {
  // handle failure attempt
};

Usage

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
    return;
  }
  const { username, password, thirdfield } = tokens;
  // submit the tokens to POST /consentAndConnect or POST /connect
});

Example