> ## 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.

# Signing

> Learn how to sign transactions and messages in your React app using Turnkey's Embedded Wallets or an external browser wallet.

## Overview

The Embedded Wallet Kit provides a simple way to sign messages and transactions in your React application. You can use Turnkey's Embedded Wallets or an external wallet for signing.

## Signing messages

To sign messages, you can use the `signMessage` function from the `useTurnkey` hook. You can grab the wallet account you want to use from the `wallets` array in the `useTurnkey` hook.

```tsx theme={"system"}
import { useTurnkey } from "@turnkey/react-wallet-kit";

function SignMessageButton() {
  const { signMessage, wallets } = useTurnkey();

  const doSignMessage = async () => {
    try {
      const walletAccount = wallets[0]?.accounts[0]; // Use the first account of the first wallet
      const message = "Hello, Turnkey!";

      const signature = await signMessage({
        walletAccount,
        message,
      });
      console.log("Message signed:", signature);
    } catch (error) {
      console.error("Error signing message:", error);
    }
  };

  return <button onClick={doSignMessage}>Sign Message</button>;
}
```

### With a modal

If you want to show a modal for signing messages, you can use the `handleSignMessage` function from the `useTurnkey` hook. This will automatically show a modal with the message to sign.

```tsx theme={"system"}
import { useTurnkey } from "@turnkey/react-wallet-kit";

function SignMessageButton() {
  const { handleSignMessage, wallets } = useTurnkey();

  const doSignMessage = async () => {
    try {
      const walletAccount = wallets[0]?.accounts[0]; // Use the first account of the first wallet
      const message = "Hello, Turnkey!";

      const signature = await handleSignMessage({
        walletAccount,
        message,
      });
      console.log("Message signed:", signature);
    } catch (error) {
      console.error("Error signing message:", error);
    }
  };

  return <button onClick={doSignMessage}>Sign Message</button>;
}
```

You will see a modal with the message to sign, and the user can confirm the signature.

<img src="https://mintcdn.com/turnkey-0e7c1f5b/NNqJcRCxxsOsZobL/images/sdks/img/react/sign-component.png?fit=max&auto=format&n=NNqJcRCxxsOsZobL&q=85&s=391645cdbcddb4c2e6b0baada9153ef2" alt="Signing message modal" width="455" height="457" data-path="images/sdks/img/react/sign-component.png" />

## Signing transactions

To sign transactions, you can use the `signTransaction` function from the `useTurnkey` hook. Similar to signing messages, you can grab the wallet account you want to use from the `wallets` array.

```tsx theme={"system"}
import { useTurnkey } from "@turnkey/react-wallet-kit";

function SignTransactionButton() {
  const { signTransaction, wallets } = useTurnkey();

  const doSignTransaction = async () => {
    try {
      const walletAccount = wallets[0]?.accounts[0]; // Use the first account of the first wallet
      const unsignedTransaction = "0x..."; // Replace with your unsigned transaction data

      const signature = await signTransaction({
        walletAccount,
        unsignedTransaction,
        transactionType: "TRANSACTION_TYPE_ETHEREUM",
      });
      console.log("Transaction signed:", signature);
    } catch (error) {
      console.error("Error signing transaction:", error);
    }
  };

  return <button onClick={doSignTransaction}>Sign Transaction</button>;
}
```

## Using a linked external wallet

You can use external wallets like MetaMask to sign messages and transactions. The same `signMessage`, `handleSignMessage` or `signTransaction` functions can be used. You simply need to pass in the external wallet's `walletAccount` object from the same `wallets` array.

You can check if the wallet is an external wallet by checking the `source` property of the `wallet` object:

```tsx theme={"system"}
import { useTurnkey, WalletSource } from "@turnkey/react-wallet-kit";

function SignMessageWithExternalWalletButton() {
  const { handleSignMessage, wallets } = useTurnkey();

  const doSignMessage = async () => {
    try {
      const externalWallet = wallets.find(
        (wallet) => wallet.source === WalletSource.Connected
      ); // Find an external wallet

      if (!externalWallet) {
        throw new Error("No external wallet found");
      }

      const walletAccount = externalWallet.accounts[0]; // Use the first account of the external wallet
      const message = "Hello, Turnkey!";

      const signature = await handleSignMessage({
        walletAccount,
        message,
        addEthereumPrefix: true, // Required for connected Ethereum wallets (e.g. MetaMask) 
      });
      console.log("Message signed with external wallet:", signature);
    } catch (error) {
      console.error("Error signing message with external wallet:", error);
    }
  };

  return (
    <button onClick={doSignMessage}>Sign Message with External Wallet</button>
  );
}
```

The user will be prompted by their external wallet to sign the message.

<img src="https://mintcdn.com/turnkey-0e7c1f5b/NNqJcRCxxsOsZobL/images/sdks/img/react/sign-external.png?fit=max&auto=format&n=NNqJcRCxxsOsZobL&q=85&s=633e0e354ea46148fa04b59952562f25" alt="Signing message with external wallet" width="845" height="749" data-path="images/sdks/img/react/sign-external.png" />

## Next steps

Now that you know how to sign messages and transactions in your React application, checkout the [UI Customization](/sdks/react/ui-customization) guide to learn how to customize the look and feel of the signing modals and other UI components.