Signing Bytes

☢️Warning

Wallet-Provider is deprecated. Use Wallet Kit instead.

You can sign arbitrary bytes with Wallet Provider in a React-based web application. This action is useful for verifying account ownership without having to post a transaction to the chain and is commonly used as a form of simple user authentication.

💡tip

Not using React? Use the wallet-controller instead.

The Wallet Provider comes with a useConnectedWallet hook, which lets you trigger actions from a Terra wallet that's connected to the web page. The connectedWallet object includes a .signBytes() method, which prompts the user to sign the data and then returns an object of type SignBytesResult. The returned SignBytesResult object contains the address of the signer and the signed data.

The verifyBytes function then compares the original TEST_BYTES against the signature and public key pairing returned by the SignBytesResult. If verifyBytes returns true, then the account is owned by the connected wallet. Likewise, if verifyBytes returns false, then the account is not owned by the connected wallet. In this way, the owner of the associated wallet is verified without having to produce an on-chain action or pay gas fees.

💡tip

You can see how the verifyBytes function works here.

Wallet Provider also supplies useful error types that can be used with a catch statement to notify the user whether or not the signing was successful:

import {
 SignBytesFailed,
 SignBytesResult,
 Timeout,
 useConnectedWallet,
 UserDenied,
 verifyBytes,
} from '@terra-money/wallet-provider';
import React, { useCallback, useState } from 'react';
const TEST_BYTES = Buffer.from('hello'); // resolves to <Buffer 68 65 6c 6c 6f>
export function SignBytesSample() {
 const [txResult, setTxResult] = useState<SignBytesResult | null>(null);
 const [txError, setTxError] = useState<string | null>(null);
 const [verifyResult, setVerifyResult] = useState<string | null>(null);
 const chainID = 'phoenix-1';
 const connectedWallet = useConnectedWallet();
 const signBytes = useCallback(() => {
 if (!connectedWallet) {
 return;
 }
 setTxResult(null);
 setTxError(null);
 setVerifyResult(null);
 connectedWallet
 .signBytes(TEST_BYTES)
 .then((nextSignBytesResult: SignBytesResult) => {
 setTxResult(nextSignBytesResult);
 setTxError(null);
 const result = verifyBytes(TEST_BYTES, nextSignBytesResult.result);
 setVerifyResult(result ? 'Verify OK' : 'Verify failed');
 })
 .catch((error) => {
 setTxResult(null);
 setVerifyResult(null);
 if (error instanceof UserDenied) {
 setTxError('User Denied');
 } else if (error instanceof Timeout) {
 setTxError('Timeout');
 } else if (error instanceof SignBytesFailed) {
 setTxError('Sign Bytes Failed');
 } else {
 setTxError(
 'Unknown Error: ' +
 (error instanceof Error ? error.message : String(error)),
 );
 }
 });
 }, [connectedWallet]);
 return (
 <div>
 <h1>Sign Bytes Sample</h1>
 {connectedWallet?.availableSignBytes &&
 !txResult &&
 !txError &&
 !verifyResult && (
 <button onClick={() => signBytes()}>
 Sign bytes with {connectedWallet.addresses[chainID]}
 </button>
 )}
 {txResult && <pre>{JSON.stringify(txResult, null, 2)}</pre>}
 {txError && <pre>{txError}</pre>}
 {verifyResult && <pre>{verifyResult}</pre>}
 {(!!txResult || !!txError || !!verifyResult) && (
 <button
 onClick={() => {
 setTxResult(null);
 setTxError(null);
 setVerifyResult(null);
 }}
 >
 Clear result
 </button>
 )}
 {!connectedWallet && <p>Wallet not connected!</p>}
 {connectedWallet && !connectedWallet.availableSignBytes && (
 <p>This connection does not support signBytes()</p>
 )}
 </div>
 );
}

You can find this code being used in context on GitHub.

You can view a working sandbox example of bytes signing with Station on codesandbox.io.