Authorize with Embedded Link

Use Codat's authorization flow component and embed it in your application

Early access

The currently available Embedded Link is a beta, and a new version is coming next month. If you run into issues, please contact support.

This next version will solve a number of issues with this initial version, and work with non-React JS apps.

If you have any feedback, please get in touch! You can also request features and suggest improvements in our roadmap!

Use the Embedded Link solution to benefit from a pre-built code component that melds best practices together with our extensive experience in building authorization flows, while seamlessly embedding it into your webpage or front-end application.

Codat's Embedded Link is a React component that neatly sits in your front-end code, and can be deployed in a matter of minutes.

We built Embedded Link 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.

Features

1. An authorization flow UI built with our expertise and best practices in mind
2. Tailored to be flexible and support your custom onboarding and connection journey flows
3. Fast and easy implementation with a pre-built code component
4. Authentication in line with OAuth 2.0 standards
5. UI that can be customized and reflects your company branding

Resources

• Grab our component library on npm
• View a sample project adding Link to a default project

Prerequisites

You should use React 18 when embedding the Link component into your webpage or application. However, the component is also backwards compatible with React 17.

Getting started

Codat's Embedded Link component is published to npm as a React library.

You can install this library using npm:

npm i @codat/link-sdk

After installing the library, add it to your project:

import { CodatLink } from '@codat/link-sdk';
import '@codat/link-sdk/index.css';

Embedding the Link application

The component requires a companyId parameter to open Link for a specific company. To obtain the companyId, first create a Codat company for your customer. We recommend doing that at the same time as your SMB customer signs up within your app.

From the response to company creation, retain the companyId parameter. Then, initialize the Codat Link component in your app:

React

<CodatLink
  companyId="0f19b01c-3d1f-4dbf-80b6-37ab241bea2e"
  onConnection={(id) => alert("Success: Connection " + id + " established")} // Called each time a connection is established
  onFinish={() => alert("Finished")} // Called when the flow is completed
  onClose={() => alert("Closed")} // Called when the user clicks 'X' or completes the whole flow
  onError={(err) => alert("Error: " + err)} // Called when an error is reached
/>

Next.js

import dynamic from 'next/dynamic'; // Use dynamic imports instead for NextJS
import '@codat/link-sdk/index.css';
  
const CodatLink = dynamic(
  () => import('@codat/link-sdk').then((mod) => mod.CodatLink),
  { ssr: false }
);

const AuthFlow = ({ id }) => {
  return (
    <CodatLink
      companyId="0f19b01c-3d1f-4dbf-80b6-37ab241bea2e"
      onConnection={(id) => alert("Success: Connection " + id + " established")} // Called each time a connection is established
      onFinish={() => alert("Finished")} // Called when the flow is completed
      onError={() => alert("error")}
      onClose={() => alert("on close")}
    />
  );
};

Pitfalls

• Disable React.StrictMode in your project.
• React versions - Component is built using React 18, but is backwards compatible with React 17.
• Mobile compatibility - The component is not optimized for use on mobile devices.
• Using NextJS - Use dynamic imports (as per the NextJS code snippet above). As above, React.StrictMode should still be disabled.

Getting help

To report issues with this library, please get in touch with us.