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

# SIWX Implementation

# SIWX Default Usage

The Sign In With X feature enables decentralized applications (Dapps) to authenticate users seamlessly across multiple blockchain networks, such as Ethereum, Polygon or Solana. The user can connect and then sign a message with their account to prove ownership of the account.

## Quick Start

Here is a quick guide to get started with the **SIWX** feature using the `DefaultSIWX` class.

### Example

<Card title="Next.js MultiChain SIWX Default Example" icon="github" href="https://github.com/reown-com/appkit-web-examples/blob/main/nextjs/next-siwx-multichain/">
  Check the Next.js example using DefaultSIWX in a multi-chain environment
</Card>

### Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @reown/appkit-siwx
  ```

  ```bash Yarn theme={null}
  yarn add @reown/appkit-siwx
  ```

  ```bash Bun theme={null}
  bun a @reown/appkit-siwx
  ```

  ```bash pnpm theme={null}
  pnpm add @reown/appkit-siwx
  ```
</CodeGroup>

### Usage

```ts {2-3, 9-10} theme={null}
import { createAppKit } from '@reown/appkit'
// Add the following code line
import { DefaultSIWX } from '@reown/appkit-siwx'

const appkit = createAppKit({
  projectId,
  networks,
  metadata,
  // Add the following code line
  siwx: new DefaultSIWX() // add this line to enable SIWX
})
```

You should now have the **SIWX** feature up and running in your Dapp.

The `ReownAuthentication` configuration will use the predefined components to handle the message generation, verification and storage of the sessions. You can customize the default implementation by providing your own components as in the following sections.

## Customizing the DefaultSIWX Class

The `DefaultSIWX` class is divided in three main components: `SIWXMessenger`, `SIWXVerifier` and `SIWXStorage`. The `@reown/appkit-siwx` package have defined options to fulfill the parts when initializing the `DefaultSIWX` configuration and you are also able to setup your own parts as required.

### Predefined Components

The `@reown/appkit-siwx` package provides some predefined components that you can use to quickly setup the `DefaultSIWX` configuration.

Check the latest components over the [SIWX repository](https://github.com/reown-com/appkit/tree/main/packages/siwx)

#### Customizing components

You may provide the parts to the `DefaultSIWX` configuration using the predefined components exposed by `@reown/appkit-siwx` package and customize the component params as needed.

```ts theme={null}
import {
  DefaultSIWX,
  InformalMessenger,
  EIP155Verifier,
  SolanaVerifier,
  LocalStorage
} from '@reown/appkit-siwx'

const siwx = new DefaultSIWX({
  messenger: new InformalMessenger({
    domain: 'reown.com',
    uri: 'https://reown.com',
    getNonce: async () => Math.round(Math.random() * 10000).toString()
  }),
  verifiers: [new EIP155Verifier(), new SolanaVerifier()],
  storage: new LocalStorage({ key: '@appkit/siwx' })
})
```

### Custom Components

You may create your own components to handle the message generation, verification and storage of the sessions. The following sections will guide you through the process of creating your own components.

#### `SIWXMessenger`

The [`SIWXMessenger`](https://github.com/reown-com/appkit/blob/main/packages/siwx/src/core/SIWXMessenger.ts) is an abstract class which holds methods for generating the message to be signed.

##### Creating a Custom Messenger:

You may extend the `SIWXMessenger` class adding the public attributes:

* `version`: a string that represents the version of the messenger;
* `stringify`: a method that receives the message data and returns a string to be signed.

```ts theme={null}
import { SIWXMessenger } from '@reown/appkit-siwx'
import type { SIWXMessage } from '@reown/appkit-core'

export class MyMessenger extends SIWXMessenger {
  protected readonly version = '1'

  protected override stringify(params: SIWXMessage.Data): string {
    // Implement your message format here
    return `My message for ${params.accountAddress} on ${params.chainId}`
  }
}
```

#### `SIWXVerifier`

The [`SIWXVerifier`](https://github.com/reown-com/appkit/blob/main/packages/siwx/src/core/SIWXVerifier.ts) is an abstract class that defines the verification logic for the signed message.

##### Creating a Custom Verifier:

You may extend the `SIWXVerifier` class adding the public attributes:

* `chainNamespace`: a string that represents the chain namespace for the verifier;
* `verify`: a method that receives the session data and returns a boolean indicating if the session is valid.

```ts theme={null}
import { SIWXVerifier } from '@reown/appkit-siwx'
import type { SIWXSession } from '@reown/appkit-core'

export class MyVerifier extends SIWXVerifier {
  public readonly chainNamespace = 'eip155' // set the chain namespace for your verifier

  public async verify(session: SIWXSession): Promise<boolean> {
    // Implement your verification logic here
    return true
  }
}
```

#### `SIWXStorage`

<Card title="Next.js SIWX Default Example with supabase storage" icon="github" href="https://github.com/reown-com/appkit-web-examples/tree/main/nextjs/next-siwx-multichain-supabase-storage">
  Check the Next.js example using DefaultSIWX and supabase as default storage
</Card>

[`SIWXStorage`](https://github.com/reown-com/appkit/blob/main/packages/siwx/src/core/SIWXStorage.ts) is a interface that defines how the session data will be stored.

##### Creating a Custom Storage:

You may implement the `SIWXStorage` interface with the following methods:

* `add`: This method will be called to store a new single session that is verified;
* `set`: This method must replace all the sessions in the storage with the new ones;
* `get`: This method must return all the sessions stored for a specific chain and address. Is expected that the sessions are already verified;
* `delete`: This method must delete all the sessions stored for a specific chain and address.

```ts theme={null}
import type { SIWXSession } from '@reown/appkit-core'
import type { SIWXStorage } from '@reown/appkit-siwx'

export class MyStorage implements SIWXStorage {
  add(session: SIWXSession): Promise<void> {
    // Implement your logic to add a session
  }

  set(sessions: SIWXSession[]): Promise<void> {
    // Implement your logic to set sessions
  }

  get(chainId: CaipNetworkId, address: string): Promise<SIWXSession[]> {
    // Implement your logic to get sessions
    return []
  }

  delete(chainId: string, address: string): Promise<void> {
    // Implement your logic to delete a session
  }
}
```

#### Using custom components

You may provide your custom components to the `DefaultSIWX` configuration.

If you omit any of the components, the default implementation will be used. Check [here](https://github.com/reown-com/appkit/blob/main/packages/siwx/src/configs/DefaultSIWX.ts) the default components.

```ts theme={null}
import { DefaultSIWX, type SIWXStorage } from '@reown/appkit-siwx'

class MyDatabaseStorage implements SIWXStorage {
  // ...
}

const siwx = new DefaultSIWX({
  storage: new MyDatabaseStorage()
})
```