SIWA
  • Sign-In with Algorand
    • Quickstart Guide
      • Setting Up the Project
      • Component Overview
      • Client-side operations
      • Message Signing
      • Server-side operations
      • Testing and Troubleshooting
      • Sign-in Diagram
  • Integrations
    • NextAuth.js
    • Pera Wallet
    • Defly Wallet
    • Kibisis Wallet
    • Lute Wallet
  • General Information
    • SIWA Overview
      • EIP-4361-COMPAT
      • SIWA Diagram
      • Extended SIWA Diagram
    • SIWA Code of Conduct
  • Libraries
    • Typescript
  • Additional Support
    • Security Considerations
    • NFD Profile Resolution
    • Community Highlights
    • Attribution and Recognition
Powered by GitBook
On this page
  • Prerequisites
  • Overview
  • Implementation
  • Verification
Edit on GitHub
  1. Integrations

Pera Wallet

This guide will walk you through the process of integrating Sign-In with Algorand (SIWA) using Pera Wallet in your web application.

PreviousNextAuth.jsNextDefly Wallet

Last updated 6 months ago

Prerequisites

  1. Install the mobile app for Pera on Apple or Android

  2. Install the Pera Wallet library:

    npm install @perawallet/connect

Overview

Pera wallet uses a direct message signing approach for SIWA messages. Here's how it works:

  1. Connect to the Pera wallet

  2. Prepare the SIWA message

  3. Sign the message using Pera wallet's signData method

  4. Verify the signature

Implementation

1. Connecting to Pera Wallet

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;
  }
};

. Signing a SIWA Message

To sign a SIWA message with Pera wallet:

  1. Prepare the message by hashing and encoding it

  2. 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,
  };
};

Verification

When verifying the SIWA message signature for Pera wallet, the process is straightforward as it uses direct message signing. Here's how it works:

  1. The verification function receives the following parameters:

  2. message: The original SIWA message

  3. signature: The signature in base64 format

  4. provider: The wallet provider (in this case, "Pera")

  5. 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:

  1. The message is properly hashed

  2. The signature is valid for the given message and address

Key points to remember for Pera wallet verification:

  1. The algosdk.verifyBytes function is used to verify the signature against the hashed message and the signer's address.

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

GitHub - headline-design/siwa-connectGitHub
Get started quickly with SIWA Connect
Logo