Verify emails in React without leaking your key

The one rule: never call Verifly from the browser

It is tempting to fetch https://verifly.email/api/v1/verify straight from a React component with your key in the Authorization header. Don't. Anything the browser sends is visible in the network tab and readable in your bundled JavaScript. A public API key is a public key — someone will copy it and burn your credits. Prefixing an env var with NEXT_PUBLIC_ or REACT_APP_ does not make it secret; it does the opposite, inlining it into the client bundle.

The correct pattern is a thin server-side proxy. Your React code calls a route on your own backend. That route holds the Verifly key in a server-only environment variable, calls Verifly, and returns only the verdict to the browser. The key never leaves your server, and the client only ever sees deliverable / undeliverable / risky plus the flags you choose to forward.

Verifly runs a live SMTP mailbox check and returns that verdict with disposable, role, and catch-all flags. Below are the two proxies you'll actually use: a Next.js Route Handler for App Router apps, and an Express route for a plain React SPA with a Node backend.

Next.js Route Handler proxy (App Router)

1. Grab a free Verifly key at verifly.email/api/v1/autonomous/register — 100 credits, no card, no captcha.
2. Put it in .env.local as VERIFLY_API_KEY — NO NEXT_PUBLIC_ prefix, so it stays server-only.
3. Add a Route Handler at app/api/verify-email/route.ts that reads the key and calls Verifly.
4. Return only the fields the UI needs; the key stays on the server.
5. From React, fetch('/api/verify-email?email=...') — the browser never sees the key.

import { NextResponse } from 'next/server'

export async function GET(req: Request) {
  const email = new URL(req.url).searchParams.get('email')
  if (!email) {
    return NextResponse.json({ error: 'email required' }, { status: 400 })
  }

  const upstream = await fetch(
    'https://verifly.email/api/v1/verify?email=' + encodeURIComponent(email),
    { headers: { Authorization: `Bearer ${process.env.VERIFLY_API_KEY}` } }
  )

  if (!upstream.ok) {
    return NextResponse.json({ result: 'unknown' }, { status: 200 })
  }

  const data = await upstream.json()
  // forward only what the browser needs — never the key
  return NextResponse.json({
    result: data.result,
    disposable: data.disposable,
    role: data.role,
    catch_all: data.catch_all,
  })
}

The React component (and an Express alternative)

On the client, verify on blur with a little debounce so you don't fire on every keystroke, and show the verdict inline. The component only ever talks to /api/verify-email — your own origin — so there is no key to leak. If your React app is a standalone SPA served by a Node backend instead of Next.js, the same proxy is a three-line Express route; the browser code is identical.

// EmailField.tsx (client) — talks only to your own route
import { useState } from 'react'

export function EmailField() {
  const [status, setStatus] = useState<string | null>(null)

  async function check(email: string) {
    if (!email) return
    const res = await fetch('/api/verify-email?email=' + encodeURIComponent(email))
    const data = await res.json()
    setStatus(data.result)
  }

  return (
    <div>
      <input type="email" onBlur={(e) => check(e.target.value)} />
      {status === 'undeliverable' && <span>Please use a real email address.</span>}
    </div>
  )
}

// --- Express alternative for a plain React SPA ---
// app.get('/api/verify-email', async (req, res) => {
//   const r = await fetch(
//     'https://verifly.email/api/v1/verify?email=' +
//       encodeURIComponent(String(req.query.email)),
//     { headers: { Authorization: `Bearer ${process.env.VERIFLY_API_KEY}` } }
//   )
//   const d = await r.json()
//   res.json({ result: d.result, disposable: d.disposable })
// })