Signing data

import { useWallet } from '@txnlab/use-wallet-react'
import algosdk from 'algosdk'
import { ed } from '@noble/ed25519'
import { canonify } from "canonify"

function Authenticate() {
  const { activeAddress, activeWallet, signData } = useWallet()

  const handleAuth = async () => {
    try {
      if (!activeAddress) {
        throw new Error('No active account')
      }
    
      if (!activeWallet?.canSignData) {
        throw new Error('Current wallet does not support data signing')
      }

      // Create SIWA request
      const siwaRequest = {
        domain: location.host,
        chain_id: '283',
        account_address: activeAddress,
        type: 'ed25519',
        uri: location.origin,
        version: '1',
        'issued-at': new Date().toISOString()
      }

      // Convert request to base64
      const dataString = canonify(siwaRequest)
      if (!dataString) throw Error('Invalid JSON')
      const data = btoa(dataString)
      
      // Sign data with authentication scope
      const metadata = { scope: 'auth', encoding: 'base64' }
      const resp = await signData(data, metadata)

      // Verify signature
      const enc = new TextEncoder()
      const clientDataJsonHash = await crypto.subtle.digest('SHA-256', enc.encode(dataString))
      const authenticatorDataHash = await crypto.subtle.digest('SHA-256', resp.authenticatorData)
      
      const toSign = new Uint8Array(64)
      toSign.set(new Uint8Array(clientDataJsonHash), 0)
      toSign.set(new Uint8Array(authenticatorDataHash), 32)
      
      const pubKey = algosdk.Address.fromString(activeAddress).publicKey
      const isValid = await ed.verifyAsync(resp.signature, toSign, pubKey)

      if (!isValid) {
        throw new Error('Verification Failed')
      }

      console.info('Successfully authenticated!')
    } catch (error) {
      console.error('Error signing data:', error)
    }
  }

  return (
    <button onClick={handleAuth}>Sign In with Algorand</button>
  )
}