Connect SDK
Connect SDK
Browser widget for embedding OAuth connection flows.
@alter-ai/connect is a ~3.5 KB gzipped, zero-dependency JavaScript package that opens an Alter-hosted Connect UI in a popup (desktop) or full-page redirect (mobile). It is the frontend half of the Call APIs on behalf of users flow.
npm install @alter-ai/connectOr via CDN:
<script src="https://cdn.jsdelivr.net/npm/@alter-ai/connect@latest/dist/alter-connect.umd.js"></script>Framework-agnostic. Works with React, Vue, Angular, Svelte, or no framework.
For an end-to-end walk-through, see Embed the Connect widget. This section is API reference.
When to use Connect
Section titled “When to use Connect”The browser widget is one of two ways an application drives the OAuth flow. Pick based on where the consent UI lives.
| Use the Connect widget when… | Use the headless connect() SDK method when… |
|---|---|
| The application is a browser app (SPA, MPA, mobile web) and the user authorizes in their own browser. | The application is a server-side or CLI agent that already has a verified user session and can perform the OAuth redirect itself. |
| The Alter-hosted provider-picker and branding are acceptable. | The application owns the redirect chrome and only needs Alter to return the authorization URL. |
| Mobile devices are in scope — the SDK auto-switches between popup and full-page redirect. | The application has no browser at all (e.g. a CI job provisioning a service account). |
connect() lives in the TypeScript SDK and Python SDK. Both return an OAuth authorization URL — the application is then responsible for navigating the user to it.
Construct an AlterConnect instance.
Launch the Connect UI, including the mobile redirect flow.
Events & callbacksonSuccess, onError, onExit, onEvent, and the on/off event bus.
Grant, AlterError, OpenOptions, AlterConnectConfig.
Browser support
Section titled “Browser support”- Chrome / Edge 90+
- Firefox 88+
- Safari 14+
- iOS Safari 14+
- Chrome Mobile