Pera Wallet
This guide will walk you through the process of integrating Sign-In with Algorand (SIWA) using Pera Wallet in your web application.
Last updated
This guide will walk you through the process of integrating Sign-In with Algorand (SIWA) using Pera Wallet in your web application.
Last updated
Install the mobile app for Pera on Apple or Android
Install the Pera Wallet library:
npm install @perawallet/connect
Pera wallet uses a direct message signing approach for SIWA messages. Here's how it works:
Connect to the Pera wallet
Prepare the SIWA message
Sign the message using Pera wallet's signData
method
Verify the signature
To connect to Pera wallet, use the PeraWalletConnect
class:
import { PeraWalletConnect } from "@perawallet/connect";
const peraWallet = new PeraWalletConnect();
const connectWallet = async () => {
try {
const newAccounts = await peraWallet.connect();
peraWallet.connector?.on("disconnect", handleDisconnect);
return newAccounts[0];
} catch (error) {
console.error("Error connecting to Pera wallet:", error);
throw error;
}
};
To sign a SIWA message with Pera wallet:
Prepare the message by hashing and encoding it
Use the peraWallet.signData
method to sign the message
Here's the code to accomplish this:
import { hashMessage, getMessageBytes } from "@/utils/siwaUtils";
const signMessage = async (message: string) => {
if (!address) {
throw new Error("No address connected");
}
const hashedMessage = hashMessage(message);
const encodedHashedMessage = getMessageBytes(Buffer.from(hashedMessage).toString("utf8"));
const peraSigArray = await peraWallet.signData(
[{ data: encodedHashedMessage, message: "" }],
address
);
return {
signature: peraSigArray[0],
transaction: null,
};
};
When verifying the SIWA message signature for Pera wallet, the process is straightforward as it uses direct message signing. Here's how it works:
The verification function receives the following parameters:
message
: The original SIWA message
signature
: The signature in base64 format
provider
: The wallet provider (in this case, "Pera")
The verification process for Pera wallet:
if (provider === "Pera") {
try {
// Prepare hashed message bytes
const hashedMessage = new Uint8Array(Buffer.from(JSON.stringify(message.prepareMessage())));
// Decode the signature from base64 to Uint8Array
const signatureUint8Array = Uint8Array.from(atob(signature).split("").map((char) => char.charCodeAt(0)));
// Verify the signature using algosdk
const isValid = algosdk.verifyBytes(hashedMessage, signatureUint8Array, message.address);
return isValid;
} catch (error) {
return false; // Return false if any error occurs during verification
}
}
This verification process ensures that:
The message is properly hashed
The signature is valid for the given message and address
Key points to remember for Pera wallet verification:
The algosdk.verifyBytes
function is used to verify the signature against the hashed message and the signer's address.
Any errors during the verification process will result in a false
return value.
Remember to handle any potential errors during the verification process and ensure that all required parameters are provided.