useSignMessage

The useSignMessage hook enables signing a message on behalf of the user's Embedded Account. If the account is not yet deployed onchain, this will use ERC-6492 to sign the message.

Import

import { useSignMessage } from "@alchemy/aa-alchemy/react";

Usage

useSignMessage.tsx

import {
  useSignMessage,
  useSmartAccountClient,
} from "@alchemy/aa-alchemy/react";
import { useState } from "react";
 
export function ComponentWithSignMessage() {
  /**
   * Assumes the app has context of a signer with an authenticated user
   * by using the `AlchemyAccountProvider` from `@alchemy/aa-alchemy/react`.
   */
  const [message, setMessage] = useState("");
  const client = useSmartAccountClient({
    type: "MultiOwnerModularAccount",
  });
  const { signMessage, isSigningMessage } = useSignMessage({
    client,
    onSuccess: (signature) => {
      // [optional] Do something with the signature
    },
    onError: (error) => {
      // [optional] Handle the error
    },
    // [optional] ...additional mutationArgs
  });
 
  return (
    <div>
      <input
        placeholder="enter your message to sign..."
        value={message}
        onChange={(e) => setMessage(e.target.value)}
      ></input>
      <button
        onClick={() => signMessage({ message })}
        disabled={isSigningMessage}
      >
        {isSigningMessage ? "Signing..." : "Sign Message"}
      </button>
    </div>
  );
}

Params

client

AlchemySmartAccountClient | undefined A AlchemySmartAccountClient with methods to interact with an Alchemy smart account.

...mutationArgs

You can optionally specify any of the React Query useMutation parameters as parameters to this hook.

Return Type

import { type UseSignMessageResult } from "@alchemy/aa-alchemy/react";

Returns an object containing the following state.

signMessage

UseMutateFunction A React query mutation function to sign a message. It returns a Hex representation of the signed message. It takes in an object with a SignableMessage field called message.

signMessageAsync

UseMutateAsyncFunction A React query async mutation function to sign a message. Via an awaitable promise, it returns a Hex representation of the signed message. It takes in an object with a SignableMessage field called message.

signedMessage

Hex | undefined A flag that determines whether the account recovery details were successfully exported and now viewable in the application.

isSigningMessage

boolean A flag that determines whether the mutation is still running or not.

error

Error | null A field that relays any errors from the mutation. It is null if there is no error.