> ## Documentation Index
> Fetch the complete documentation index at: https://docs.turnkey.com/llms.txt
> Use this file to discover all available pages before exploring further.

# @turnkey/sdk-browser (legacy)

`@turnkey/sdk-browser` is our legacy TypeScript SDK for building embedded wallet experiences in browser applications.

This package will soon be discontinued, if you're starting a new project, we recommend using [`@turnkey/core`](/sdks/typescript-frontend/index) instead. If you're using React, please consider using the [`@turnkey/react-wallet-kit`](/sdks/react/getting-started) for a more tailored experience.

## Overview

The [`@turnkey/sdk-browser`](https://www.npmjs.com/package/@turnkey/sdk-browser) package enables developers to build browser-based applications that interact with the Turnkey API using multiple authentication methods.

It includes:

* `indexedDbClient`: The recommended client for authentication and session creation using secure, unextractable P-256 keys stored in the browser’s IndexedDB.
* `passkeyClient`: For passkey registration and signing flows.
* `iframeClient`: Used for secure credential injection and import/export operations.
* `walletClient`: For signing with external wallets like MetaMask.

If you're building with React, check out our [`@turnkey/sdk-react`](https://www.npmjs.com/package/@turnkey/sdk-react) package.

## Installation

<CodeGroup>
  ```bash NPM theme={"system"}
  npm install @turnkey/sdk-browser
  ```

  ```bash Yarn theme={"system"}
  yarn add @turnkey/sdk-browser
  ```
</CodeGroup>

## Initialization

```ts theme={"system"}
import { Turnkey } from "@turnkey/sdk-browser";

const turnkey = new Turnkey({
  apiBaseUrl: "https://api.turnkey.com",
  defaultOrganizationId: process.env.TURNKEY_ORGANIZATION_ID,
});
```

## Authentication

### `loginWithPasskey`

Creates a session for a user authenticated with a passkey. The session is stored in `localStorage`, and signing operations are done with an unextractable keypair stored in IndexedDB.

```ts theme={"system"}
const passkeyClient = turnkey.passkeyClient();
const indexedDbClient = await turnkey.indexedDbClient();
await indexedDbClient.init();

const publicKey = await indexedDbClient.getPublicKey();

await passkeyClient.loginWithPasskey({
  sessionType: "SESSION_TYPE_READ_WRITE",
  publicKey,
  expirationSeconds: 900,
});
```

### `loginWithBundle`

Used to authenticate a user with a credential bundle (e.g. from Email Auth). Must be used from an `iframeClient`.

```ts theme={"system"}
const iframeClient = await turnkey.iframeClient({
  iframeUrl: "https://auth.turnkey.com",
  iframeContainer: document.getElementById("iframe-container"),
});

await iframeClient.loginWithBundle({
  bundle: "credential-bundle",
  expirationSeconds: 900,
});
```

### `loginWithSession`

Logs in using a session string (JWT) that was created elsewhere (e.g. server action). Only valid on `indexedDbClient`.

```ts theme={"system"}
await indexedDbClient.loginWithSession("jwt-session-string");
```

### `loginWithWallet`

Uses a Web3 wallet to authenticate the user and store a read-write session.

```ts theme={"system"}
const walletClient = turnkey.walletClient(new EthereumWallet());

await walletClient.loginWithWallet({
  sessionType: "SESSION_TYPE_READ_WRITE",
  publicKey: await walletClient.getPublicKey(),
  expirationSeconds: 900,
});
```

### `refreshSession`

Refreshes the current session and extends its expiration time. The correct `publicKey` must be provided for read-write sessions.

```ts theme={"system"}
await indexedDbClient.refreshSession({
  sessionType: "SESSION_TYPE_READ_WRITE",
  publicKey: await indexedDbClient.getPublicKey(),
  expirationSeconds: 900,
});
```

## IndexedDbClient

The `indexedDbClient` is the recommended way to manage secure keys for session-based authentication.

### `init`

Initializes and stores an unextractable P-256 keypair in the browser.

```ts theme={"system"}
await indexedDbClient.init();
```

### `getPublicKey`

Returns the base64url-encoded public key of the stored keypair.

```ts theme={"system"}
const publicKey = await indexedDbClient.getPublicKey();
```

### `clear`

Removes all key material from IndexedDB.

```ts theme={"system"}
await indexedDbClient.clear();
```

### `resetKeyPair`

Deletes and regenerates the stored keypair.

```ts theme={"system"}
await indexedDbClient.resetKeyPair();
```

## IframeClient

Primarily used for secure credential injection and key export/import.

### `injectCredentialBundle`

Injects a read-write session credential bundle into the iframe.

```ts theme={"system"}
await iframeClient.injectCredentialBundle("bundle");
```

### `injectWalletExportBundle`

```ts theme={"system"}
await iframeClient.injectWalletExportBundle("bundle", "org-id");
```

### `injectKeyExportBundle`

```ts theme={"system"}
await iframeClient.injectKeyExportBundle("bundle", "org-id", "PEM");
```

### `injectImportBundle`

```ts theme={"system"}
await iframeClient.injectImportBundle("bundle", "org-id", "user-id");
```

### `extractWalletEncryptedBundle`

```ts theme={"system"}
const walletBundle = await iframeClient.extractWalletEncryptedBundle();
```

### `extractKeyEncryptedBundle`

```ts theme={"system"}
const keyBundle = await iframeClient.extractKeyEncryptedBundle();
```

### `getEmbeddedPublicKey`

```ts theme={"system"}
const pubkey = await iframeClient.getEmbeddedPublicKey();
```

### `initEmbeddedKey`

```ts theme={"system"}
const pubkey = await iframeClient.initEmbeddedKey();
```

### `clearEmbeddedKey`

```ts theme={"system"}
await iframeClient.clearEmbeddedKey();
```

## PasskeyClient

### `createUserPasskey`

Registers a new passkey using WebAuthn.

```ts theme={"system"}
const passkey = await passkeyClient.createUserPasskey({
  publicKey: {
    rp: { name: "My App" },
    user: { name: "user@example.com", displayName: "User" },
  },
});
```

## WalletClient

### `getPublicKey`

```ts theme={"system"}
const publicKey = await walletClient.getPublicKey();
```

### `getWalletInterface`

```ts theme={"system"}
const wallet = walletClient.getWalletInterface();
```

## Session management

### `getSession`

Returns the active session if it exists and hasn’t expired.

```ts theme={"system"}
const session = await turnkey.getSession();
```

### `getRawSession`

Returns the raw JWT string if a valid session exists.

```ts theme={"system"}
const jwt = await turnkey.getRawSession();
```

### `logout`

Clears all stored session and client data.

```ts theme={"system"}
await turnkey.logout();
```

## Top-level SDK methods

### `passkeyClient()`

```ts theme={"system"}
const passkeyClient = turnkey.passkeyClient();
```

### `indexedDbClient()`

```ts theme={"system"}
const indexedDbClient = await turnkey.indexedDbClient();
```

### `iframeClient()`

```ts theme={"system"}
const iframeClient = await turnkey.iframeClient({
  iframeUrl: "https://auth.turnkey.com",
  iframeContainer: document.getElementById("iframe-container"),
});
```

### `walletClient(wallet)`

```ts theme={"system"}
const walletClient = turnkey.walletClient(new EthereumWallet());
```

### `serverSign(methodName, params, [serverSignUrl])`

```ts theme={"system"}
const result = await turnkey.serverSign("method", [param1, param2]);
```

## Examples

<CardGroup>
  <Card title="Implementing an embedded wallet authentication flow with Passkeys" href="/embedded-wallets/code-examples/create-sub-org-passkey" icon="square-1" iconType="solid" horizontal />

  <Card title="Implementing an embedded wallet authentication flow with email" href="/embedded-wallets/code-examples/authenticate-user-email" icon="square-2" iconType="solid" horizontal />

  <Card title="Signing Transactions" href="/embedded-wallets/code-examples/signing-transactions" icon="square-3" iconType="solid" horizontal />
</CardGroup>