@kryptos_connect/mobile-sdk

Kryptos Connect Mobile SDK for React Native – works with Expo and React Native CLI. 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/mobile-sdk react-native-webview

# iOS — install native pods
cd ios && pod install

Prerequisites

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

Quick start

import { KryptosConnect, KryptosConnectButton } from "@kryptos_connect/mobile-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)}
  buttonLabel="Connect Kryptos"
  buttonHeight={52}
/>;

Full example

import { KryptosConnect, KryptosConnectButton } from "@kryptos_connect/mobile-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";

export default 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)}
        buttonLabel="Link Kryptos Account"
        buttonHeight={52}
      />

      {/* Pre-select a specific integration with custom style */}
      <KryptosConnectButton
        generateLinkToken={() => generateLinkToken()}
        onConnectSuccess={handleSuccess}
        onConnectError={(err) => console.error(err)}
        integrationName="coinbase"
        buttonLabel="Connect Coinbase"
        buttonHeight={48}
        style={{ borderRadius: 10, backgroundColor: "#0052FF" }}
      />

      {/* Re-authorize with stored access token */}
      {accessToken && (
        <KryptosConnectButton
          generateLinkToken={() => generateLinkToken(accessToken)}
          onConnectSuccess={handleSuccess}
          onConnectError={(err) => console.error(err)}
          buttonLabel="Continue with Access Token"
          buttonHeight={52}
        />
      )}
    </>
  );
}

KryptosConnectButton props

| Prop | Type | Required | Description | | ------------------- | --------------------------------------------------------------- | -------- | --------------------------------------------------------------------------------- | | generateLinkToken | () => Promise<{ link_token: string; isAuthorized?: boolean }> | Yes | Called on press. 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. | | integrationName | string | No | Skip the integration list and open a specific integration directly. | | buttonLabel | string | No | Button text. | | buttonHeight | number | No | Button height in dp. Default 56. | | extraConfig | Record<string, unknown> | No | Per-button config overrides, merged onto the global config. | | style | StyleProp<ViewStyle> | No | Style for the button. backgroundColor overrides --kc-primary for that button. |

KryptosConnect.init config

| Key | Type | Required | Description | | ------------------------ | ----------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------- | | clientId | string | Yes | Your Kryptos client ID. | | appName | string | Yes | Displayed in the connect UI header. | | appLogo | string | No | URI to your app 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. --kc-primary and --kc-primary-text also apply to the native button. |

Customization

Pass cssVars to theme the connect UI and native button colors. 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-text": "#ffffff",
    "--kc-primary-light": "#ede9fe",
  },
});

To override colors on a per-button basis, use the style prop:

<KryptosConnectButton
  style={{ backgroundColor: "#0052FF", borderRadius: 10 }}
  ...
/>

User flows

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

press → 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:

press → 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