Skip to main content

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

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';

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:

<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
/>

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.


Was this page useful?
❤️
👍
🤔
👎
😭