@encra/react

npm install @encra/react

import { useE2EChat } from '@encra/react'

function Chat({ userId, recipientId }) {
  const {
    messages,
    isReady,
    isConnecting,
    sendMessage,
    error,
  } = useE2EChat({
    apiKey: process.env.NEXT_PUBLIC_ENCRA_API_KEY!,
    userId,
  })

  return (
    <div>
      {isConnecting && <p>Connecting…</p>}
      {error && <p>Error: {error.message}</p>}

      {messages.map((msg, i) => (
        <div key={i} className={msg.from === userId ? 'mine' : 'theirs'}>
          <strong>{msg.from}</strong>: {msg.text}
        </div>
      ))}

      <button
        disabled={!isReady}
        onClick={() => sendMessage(recipientId, 'Hello!')}
      >
        Send
      </button>
    </div>
  )
}

interface Message {
  from:      string  // sender's userId
  text:      string  // decrypted plaintext
  timestamp: number  // Date.now() at receipt
}

import { E2EChatProvider } from '@encra/react'

export default function Layout({ children }) {
  return (
    <E2EChatProvider apiKey={process.env.NEXT_PUBLIC_ENCRA_API_KEY!}>
      {children}
    </E2EChatProvider>
  )
}

import { useE2EFile } from '@encra/react'

function FileTransfer({ userId }) {
  const { encryptFile, decryptFile, isReady, error } = useE2EFile({
    apiKey: process.env.NEXT_PUBLIC_ENCRA_API_KEY!,
    userId,
  })

  async function handleUpload(file: File, recipientId: string) {
    // Encrypt on the sender's device
    const encrypted = await encryptFile(file, recipientId)

    // encrypted.ciphertext — Uint8Array, upload this
    // encrypted.nonce      — Uint8Array, store alongside ciphertext
    // encrypted.name       — original filename
    // encrypted.mimeType   — original MIME type
    // encrypted.size       — original size in bytes

    await uploadToServer(encrypted)
  }

  async function handleDownload(encrypted, senderId: string) {
    // Decrypt on the recipient's device
    const file = await decryptFile(encrypted, senderId)
    const url  = URL.createObjectURL(file)
    // file.name and file.type are restored automatically
  }
}

interface EncryptedFile {
  ciphertext: Uint8Array  // XSalsa20-Poly1305 ciphertext
  nonce:      Uint8Array  // random 24-byte nonce
  name:       string      // original filename
  mimeType:   string      // original MIME type
  size:       number      // original size in bytes
}

// Maximum accepted file size
import { MAX_FILE_BYTES } from '@encra/react'
// MAX_FILE_BYTES === 50 * 1024 * 1024 (50 MB)

import { useE2EForm } from '@encra/react'

function MedicalForm({ userId }) {
  const { encryptFields, decryptFields, isReady } = useE2EForm({
    apiKey: process.env.NEXT_PUBLIC_ENCRA_API_KEY!,
    userId,
  })

  async function handleSubmit(formData: FormData) {
    const payload = await encryptFields(
      {
        name:  formData.get('name') as string,
        ssn:   formData.get('ssn') as string,
        notes: formData.get('notes') as string,
      },
      'doctor-userId',  // recipient who can decrypt
    )

    // payload.name  = { ciphertext: '...', nonce: '...' }
    // payload.ssn   = { ciphertext: '...', nonce: '...' }
    // payload.notes = { ciphertext: '...', nonce: '...' }

    await fetch('/api/submit', {
      method: 'POST',
      body: JSON.stringify(payload),
    })
  }

  // On the recipient's side:
  async function handleRead(payload, patientId: string) {
    const fields = await decryptFields(payload, patientId)
    console.log(fields.ssn)   // '123-45-6789'
    console.log(fields.notes) // 'Private notes'
  }
}

// Each field is independently encrypted
type EncryptedFields = Record<string, {
  ciphertext: string  // URL-safe base64
  nonce:      string  // URL-safe base64
}>

import type {
  // useE2EChat
  Message,
  WireEvent,
  UseE2EChatOptions,
  UseE2EChatResult,
  E2EChatConfig,

  // useE2EFile
  EncryptedFile,
  UseE2EFileOptions,
  UseE2EFileResult,

  // useE2EForm
  EncryptedFields,
  UseE2EFormOptions,
  UseE2EFormResult,
} from '@encra/react'

import { useSession } from 'next-auth/react'
import { useE2EChat } from '@encra/react'

function Chat({ recipientId }) {
  const { data: session } = useSession()

  const { messages, isReady, sendMessage } = useE2EChat({
    apiKey: process.env.NEXT_PUBLIC_ENCRA_API_KEY!,
    userId: session?.user?.email ?? '',
  })
}

const [text, setText] = useState('')

<input
  value={text}
  onChange={e => setText(e.target.value)}
  onKeyDown={async e => {
    if (e.key === 'Enter' && text.trim() && isReady) {
      await sendMessage(recipientId, text)
      setText('')
    }
  }}
/>

import { useE2EFile } from '@encra/react'

function SecureUpload({ userId, recipientId }) {
  const { encryptFile, isReady } = useE2EFile({
    apiKey: process.env.NEXT_PUBLIC_ENCRA_API_KEY!,
    userId,
  })

  async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0]
    if (!file || !isReady) return

    const enc = await encryptFile(file, recipientId)

    // Serialize for upload — ciphertext and nonce are Uint8Arrays
    const form = new FormData()
    form.append('ciphertext', new Blob([enc.ciphertext]))
    form.append('nonce',      new Blob([enc.nonce]))
    form.append('meta',       JSON.stringify({
      name: enc.name, mimeType: enc.mimeType, size: enc.size,
    }))

    await fetch('/api/upload', { method: 'POST', body: form })
  }

  return <input type="file" onChange={handleChange} disabled={!isReady} />
}