# Web Crypto Signer

> Sign transactions using the Web Crypto API for secure browser-based key management

For cases where you need to create keypairs directly within client apps, you can use the Web Crypto
Signer. This signer leverages the
[Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API) to provide a
secure and efficient way to generate and manage cryptographic keys in the browser. It generates
`Secp256r1` keys that you can persist between sessions, and that client-side code (including
extensions) cannot extract.

Common use cases for the Web Crypto Signer include:

- zkLogin ephemeral keypairs
- Session-based keypairs

## Installation

To use the Web Crypto Signer, you need to install the `@mysten/webcrypto-signer` package.

```sh npm2yarn
npm i @mysten/webcrypto-signer
```

You can then import the `WebCryptoSigner` class from the package:

```typescript

```

## Create a new signer

To generate a new signer, you can invoke the `generate()` static method on the `WebCryptoSigner`
class.

```typescript
const keypair = await WebCryptoSigner.generate();
```

## Persisting and recovering the keypair

The private key for the signer is not extractable, but you can persist the keypair using the
browser's IndexedDB storage. To streamline this process, the keypair provides an `export()` method
which returns an object containing the public key and a reference to the private key:

```typescript
// Get the exported keypair:
const exported = keypair.export();

// Write the keypair to IndexedDB.
// This method does not exist, you need to implement it yourself. We recommend `idb-keyval` for simplicity.
await writeToIndexedDB('keypair', exported);
```

You can then recover the keypair by reading it from IndexedDB and passing it to the `import()`
method.

```typescript
// Read the keypair from IndexedDB.
const exported = await readFromIndexedDB('keypair');

const keypair = await WebCryptoSigner.import(exported);
```

> **Warning:** Ensure that you do not call `JSON.stringify` on the exported keypair before persisting it to
> IndexedDB, as it will throw an error and fail to persist.

## Usage

The usage for a Web Crypto signer is the same as any other keypair. You can derive the public key,
derive the address, sign personal messages, sign transactions, and verify signatures. See
[Cryptography](/sui/cryptography) for more details.

```typescript
const publicKey = keypair.getPublicKey();
const address = publicKey.toSuiAddress();

const message = new TextEncoder().encode('hello world');
await keypair.signPersonalMessage(message);
await keypair.signTransaction(txBytes);
```