Skip to main content

useSignMessage

Hook to sign a message using the connected Solana wallet from Web3Auth.

Import​

import { useSignMessage } from "@web3auth/modal/react/solana";

Usage​

import { useSignMessage } from "@web3auth/modal/react/solana";

function SignMessageButton({ message }: { message: string }) {
  const { signMessage, loading, error, data } = useSignMessage();

  const handleSign = async () => {
    try {
      const signature = await signMessage(message);
      // Do something with signature
    } catch (e) {
      // Handle error
    }
  };

  return (
    <div>
      <button onClick={handleSign} disabled={loading}>
        {loading ? "Signing..." : "Sign Message"}
      </button>
      {error && <div>Error: {error.message}</div>}
      {data && <div>Signature: {data}</div>}
    </div>
  );
}

Return Type​

export type IUseSignMessage = {
  loading: boolean;
  error: Web3AuthError | null;
  data: string | null;
  signMessage: (message: string) => Promise<string>;
};

loading​

boolean

Indicates if the message signing is in progress.

error​

Web3AuthError | null

Error object if signing fails, otherwise null.

data​

string | null

The signature as a string, or null if not signed yet.

signMessage​

(message: string) => Promise<string>

Function to sign a message. Returns the signature as a string.

Example​

signMessage.tsx
import { FormEvent } from "react";
import { useSignMessage } from "@web3auth/modal/react/solana";

export function SignMessage() {
  const { data: hash, error, loading: isPending, signMessage } = useSignMessage();

  async function submit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    const message = formData.get("message");
    signMessage(message!.toString());
  }

  return (
    <div>
      <h2>Sign Message</h2>
      <form onSubmit={submit}>
        <input name="message" placeholder="Message" required />
        <button disabled={isPending} type="submit">
          {isPending ? "Signing..." : "Sign"}
        </button>
      </form>
      {hash && <div className="hash">Message Hash: {hash}</div>}
      {error && <div className="error">Error: {error.message}</div>}
    </div>
  );
}