@kryptos_connect/web-sdk

A modern React component library for seamless Kryptos integration with built-in authentication, theme support, and wallet connectivity. Connect your users to the complete Web3 finance ecosystem with support for 5000+ DeFi protocols, 200+ exchanges and wallets, and 100+ blockchains.

Installation

npm install @kryptos_connect/web-sdk

Prerequisites

• Client ID — from the Kryptos Developer Portal
• WalletConnect Project ID — from WalletConnect Cloud (optional)

Quick start

import { KryptosConnect, KryptosConnectButton } from "@kryptos_connect/web-sdk";

// 1. Initialize once (or on every render to keep config in sync)
KryptosConnect.init({
  clientId: "your-client-id",
  appName: "My App",
  appLogo: "https://yourapp.com/logo.png",
  theme: "light", // "light" | "dark" | "auto"
  language: "en", // "en" | "fr" | "de" | "pt" | "sv" | "es" | "pl" | "it"
  authMethods: ["email", "anonymous"],
});

// 2. Drop in the button
<KryptosConnectButton
  generateLinkToken={generateLinkToken}
  onConnectSuccess={(consent) => console.log(consent.public_token)}
  onConnectError={(err) => console.error(err)}
/>;

Full example

import { KryptosConnect, KryptosConnectButton } from "@kryptos_connect/web-sdk";
import { useState } from "react";

const BASE_URL = "https://connect-api.kryptos.io";
const CLIENT_ID = "your-client-id";
const CLIENT_SECRET = "your-client-secret"; // keep server-side in production
const SCOPES = "openid profile offline_access email portfolios:read integrations:read";

function App() {
  const [accessToken, setAccessToken] = useState(null);

  KryptosConnect.init({
    clientId: CLIENT_ID,
    appName: "My App",
    theme: "light",
    language: "en",
    authMethods: ["email", "anonymous"],
  });

  async function generateLinkToken(existingAccessToken?: string | null) {
    const body: Record<string, unknown> = { scopes: SCOPES };
    if (existingAccessToken) body.access_token = existingAccessToken;

    const res = await fetch(`${BASE_URL}/link-token`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-Client-Id": CLIENT_ID,
        "X-Client-Secret": CLIENT_SECRET,
      },
      body: JSON.stringify(body),
    });
    const data = await res.json();
    return { link_token: data.data.link_token, isAuthorized: !!existingAccessToken };
  }

  async function handleSuccess(consent) {
    if (!consent) return; // re-auth — no new token
    const res = await fetch(`${BASE_URL}/token/exchange`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        public_token: consent.public_token,
        client_id: CLIENT_ID,
        client_secret: CLIENT_SECRET,
      }),
    });
    const data = await res.json();
    setAccessToken(data.data.access_token);
  }

  return (
    <>
      {/* Default button */}
      <KryptosConnectButton
        generateLinkToken={generateLinkToken}
        onConnectSuccess={handleSuccess}
        onConnectError={(err) => console.error(err)}
      />

      {/* Pre-select a specific integration */}
      <KryptosConnectButton
        generateLinkToken={generateLinkToken}
        onConnectSuccess={handleSuccess}
        onConnectError={(err) => console.error(err)}
        integrationName="coinbase"
      />

      {/* Custom label */}
      <KryptosConnectButton
        generateLinkToken={generateLinkToken}
        onConnectSuccess={handleSuccess}
        onConnectError={(err) => console.error(err)}
        size="lg"
      >
        Link your crypto account
      </KryptosConnectButton>

      {/* Re-authorize with stored access token */}
      {accessToken && (
        <KryptosConnectButton
          generateLinkToken={() => generateLinkToken(accessToken)}
          onConnectSuccess={handleSuccess}
          onConnectError={(err) => console.error(err)}
        >
          Add more integrations
        </KryptosConnectButton>
      )}
    </>
  );
}

KryptosConnectButton props

| Prop | Type | Required | Description | | ------------------- | --------------------------------------------------------------- | -------- | ----------------------------------------------------------------------------- | | generateLinkToken | () => Promise<{ link_token: string; isAuthorized?: boolean }> | Yes | Called on click. Return isAuthorized: true to skip auth for existing users. | | onConnectSuccess | (data: UserConsent \| null) => void | Yes | Called on success. data is null when isAuthorized was true. | | onConnectError | (error: Error) => void | Yes | Called on error or dismissal. | | size | "sm" \| "md" \| "lg" | No | Button size. Default "md". | | integrationName | string | No | Skip the integration list and open a specific integration directly. | | extraConfig | Record<string, unknown> | No | Per-button config overrides, merged onto the global config. | | children | React.ReactNode | No | Custom button label. | | className | string | No | Extra CSS class on the <button> element. | | style | React.CSSProperties | No | Inline styles on the <button> element. |

KryptosConnect.init config

| Key | Type | Required | Description | | ------------------------ | ----------------------------- | -------- | --------------------------------------------------------------------- | | clientId | string | Yes | Your Kryptos client ID. | | appName | string | Yes | Displayed in the connect UI header. | | appLogo | ReactNode \| string | No | Logo shown in the connect UI. | | walletConnectProjectId | string | No | Required if using WalletConnect. | | theme | "light" \| "dark" \| "auto" | No | UI theme. Default "light". | | language | string | No | UI language. Supported: en fr de pt sv es pl it. | | authMethods | ("email" \| "anonymous")[] | No | Auth methods shown. Default: both. | | cssVars | Record<string, string> | No | Override --kc-* CSS variables in the connect UI and trigger button. |

Customization

Pass cssVars to override colors in both the hosted connect UI and the trigger button. See the CSS theming docs for the full list of available --kc-* variables.

KryptosConnect.init({
  cssVars: {
    "--kc-primary": "#8b5cf6",
    "--kc-primary-hover": "#7c3aed",
    "--kc-primary-light": "#ede9fe",
    "--kc-border-focus": "#8b5cf6",
  },
});

User flows

New user — generateLinkToken returns isAuthorized: false (default):

click → AUTH → INTEGRATION → onConnectSuccess({ public_token })

Exchange public_token server-side for a long-lived access_token.

Returning user — pass stored access_token in the link-token request body and return isAuthorized: true:

click → INTEGRATION → onConnectSuccess(null)

Backend endpoints

POST /link-token

Headers: X-Client-Id, X-Client-Secret
Body:    { scopes, access_token? }
Returns: { data: { link_token } }

POST /token/exchange

Body:    { public_token, client_id, client_secret }
Returns: { data: { access_token, token_type, expires_in } }

| Environment | Base URL | | ----------- | -------------------------------- | | Production | https://connect-api.kryptos.io |

Links

• Kryptos Developer Portal
• Full docs

License

MIT © Kryptos