This is a staging build of the docs. Do not share the link externally.
Skip to main content

Get started with Link SDK

Embed our auth flow in your application UI using our low-code component

Our Link SDK is a pre-built JavaScript component that neatly sits in your front-end code and can be deployed in a matter of minutes.

We built it to be flexible so that you can integrate and initialize it in any way you want, and provide the user with a native feel of your authorization journey. As a result, clients using the SDK note that 89% of their users successfully complete their journeys.

Dynamic imports

Link SDK is imported at runtime, so you'll always get the latest version of our auth flow UI with no risk of staleness. To achieve this, we use ES6's import() feature (aka dynamic imports).

Change management

As with all Codat products, Link SDK is subject to our change management policy. We will give appropriate notice for changes to our auth flow UI and any associated APIs. We have rigorous testing and security measures in place to ensure you can import our SDK with confidence.

We also provide updates in our SDK changelog.

Resources

We've provided you with rich examples on GitHub that illustrate how you can add the Link component to your project.

Indicative demo

Curious where Codat's Link flow might fit in your customer's experience? See our indicative demo.

Prerequisites

Your application

You need a JavaScript application to render the component in. The component works with all major JavaScript frameworks, including React, and with vanilla JavaScript. You can choose to implement it in TypeScript. We don't recommend using Link in an iframe because it will not work for security reasons (CORS).

The application should take care of creating

The fallback content to display on prerendering
programmatically and retrieving the companyId of any company you want to authorize. Additionally, build out the required redirect configuration within your application.

Get started

Install the npm package

Take advantage of our npm package so you don't have to manually import and maintain type definitions. You will benefit from it the most if you are using Typescript, so our examples are prepared with that assumption.

npm install @codat/sdk-link-types

Get started with React

For an example of the component in action, see our demo app.

  1. Create a component that mounts the SDK

    You can copy and paste the example CodatLink.tsx file to an appropriate location in your app. We recommend setting the component to width: 460px; height: 840px because it's optimized to look best with these parameters.

  2. Use the component to mount the SDK

    We suggest wrapping the CodatLink component in a modal to adjust its positioning. Your component can also manage when to display the Link component, passing the relevant company ID and callbacks.

    // AuthFlow.tsx

    import {
    ConnectionCallbackArgs,
    ErrorCallbackArgs,
    } from "@codat/sdk-link-types"
    import { useState } from "react";
    import { CodatLink } from "./components/CodatLink";

    export const AuthFlow = ({ companyId }: {companyId: Company["id"]}) => {
    const [modalOpen, setModalOpen] = useState(false);

    const onConnection = (connection: ConnectionCallbackArgs) =>
    alert(`On connection callback - ${connection.connectionId}`);
    const onClose = () => setModalOpen(false);
    const onFinish = () => alert("On finish callback");
    const onError = (error: ErrorCallbackArgs) =>
    alert(`On error callback - ${error.message}`);

    return (
    <div>
    <p>Some content</p>

    <button onClick={() => setModalOpen(true)}>
    Start authing
    </button>

    {modalOpen && (
    <div className="modal-wrapper">
    <CodatLink
    companyId={companyId}
    onConnection={onConnection}
    onError={onError}
    onClose={onClose}
    onFinish={onFinish}
    />
    </div>
    )};
    </div>
    );
    };
  3. Conditional steps

    • If you're using TypeScript, extend your type declarations with our types by installing the types package using npm install --save-dev @codat/sdk-link-types. Otherwise, delete the type-related code in the snippets.

    • If you're using content security policy (CSP) headers, edit these headers:

      • Allowlist Codat by adding *.codat.io to default-src (or each of of script-src, style-src, font-src, connect-src, img-src).
      • Add unsafe-inline to style-src. Do not use a hash because this can change at any time without warning.

You can configure Link's UI to match your company branding and reflect your company's values, and adjust Link's behavior using the Codat Portal or our SDK's advanced options.

Configure in Portal

In the Codat Portal, navigate to Settings > Auth flow to view the auth flow settings pages. Use these to add UI copy, set file upload options, choose to make steps optional, or disable steps. We provide detailed instructions for each category of settings:

Configure in code

If you need more control over the UI based on application-specific logic, want to vary it conditionally, or simply prefer to manage the UI in code, we offer programmatic control via the options property that overrides the Link settings set in the Portal. We explain these advanced options in detail:

To control the redirects that happen upon flow completion, you need to build out the required redirect configuration within your application.

Changelog

March 2024

  • Additional options: we enhanced the options prop with enableAdditionalConsent and allowedIntegrations, new properties that help you manage additional consent journeys and the selection list of platforms displayed to the user.

November 2023

  • Options property: we introduced a new prop that gives you programmatic control over Link settings.
  • Markdown support: text fields now accept Markdown, giving you more control over styling and formatting. This is available via the text property of the Link SDK only.
  • @codat/sdk-link-types package released: our new NPM package means you don't have to manually import and maintain the type definitions.

October 2023

  • Support for non-modal views: you can now embed the component in non-modal views with our new options prop.
  • Reduced latency after auth: we now poll every second to check whether the user has authed, meaning connection is confirmed faster.
  • Bugs:
    • Fixed an issue where 'Landing page' settings were not reflected.

June 2023

  • Support for non-React JavaScript apps: without a dependency on React, you can use Link with all JavaScript frameworks or even vanilla JavaScript.
  • Increased display control: you now need to specify the dimensions of the Link component, which will expand to fit the given container size. Previously the component used a fixed width and height.
  • Navigation improvements: source types (accounting, commerce, banking, and file upload) can now be connected in any order you choose.
  • Performance improvements: Link loads quicker and can be loaded only when required.
  • Connection status: the connection status (success or error) is now shown during the Link flow. The SMB user can skip errors without interrupting the rest of the Link flow.


Was this page useful?
❤️
👍
🤔
👎
😭