Authorize with Embedded Link
Use Codat's authorization flow component and embed it in your application
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
- An authorization flow UI built with our expertise and best practices in mind
- Tailored to be flexible and support your custom onboarding and connection journey flows
- Fast and easy implementation with a pre-built code component
- Authentication in line with OAuth 2.0 standards
- 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
- Next.js
<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
/>
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.