Верификация номера через Telegram OTP в Next.js (App Router)

api_secret — это пароль от вашего аккаунта. Внешний API строго server-to-server: держите ключи в переменных окружения и вызывайте Verificahub только из Route Handlers, никогда из клиентского кода или мобильного приложения.

Метод telegram_otp включается на аккаунте по запросу — пока он не активирован, запросы этим методом не пройдут; напишите в поддержку, чтобы открыть канал. Если Telegram недоступен для конкретного номера, POST /v1/verify вернёт delivery_unavailable — на этот случай стоит держать запасной способ подтверждения.

// app/api/verify/start/route.ts
import { NextResponse } from 'next/server'

const API = 'https://api.verificahub.ru/v1'
const AUTH =
  'Basic ' +
  Buffer.from(`${process.env.VH_KEY}:${process.env.VH_SECRET}`).toString('base64')

export async function POST(req: Request) {
  const { phone } = await req.json()

  const r = await fetch(`${API}/verify`, {
    method: 'POST',
    headers: { Authorization: AUTH, 'Content-Type': 'application/json' },
    body: JSON.stringify({ phone_number: phone, method: 'telegram_otp' }),
  })
  const data = await r.json()
  if (!r.ok) return NextResponse.json(data, { status: r.status })

  // клиенту отдаём только id и длину кода — стоимость и служебные поля ему не нужны
  return NextResponse.json({
    request_id: data.request_id,
    code_length: data.code_length,
  })
}

{
  "method": "telegram_otp",
  "request_id": "a1b2c3d4",
  "phone_number": "+79991234567",
  "status": "sent",
  "cost": { "amount": 0.90, "currency": "RUB" },
  "expires_at": "2026-07-10T09:35:00Z",
  "code_length": 6
}

// app/api/verify/check/route.ts
import { NextResponse } from 'next/server'

const API = 'https://api.verificahub.ru/v1'
const AUTH =
  'Basic ' +
  Buffer.from(`${process.env.VH_KEY}:${process.env.VH_SECRET}`).toString('base64')

export async function POST(req: Request) {
  const { request_id, code } = await req.json()

  const r = await fetch(`${API}/verify/check`, {
    method: 'POST',
    headers: { Authorization: AUTH, 'Content-Type': 'application/json' },
    body: JSON.stringify({ request_id, code }),
  })
  const data = await r.json()
  // 200 -> { status: 'verified', phone_number },
  // иначе problem+json со стабильным error_code
  return NextResponse.json(data, { status: r.status })
}

{ "status": "verified", "phone_number": "+7999*****67" }

{
  "type": "https://docs.verificahub.ru/errors/invalid_code",
  "title": "Invalid code",
  "status": 400,
  "error_code": "invalid_code",
  "detail": "The code you entered is incorrect.",
  "attempts_remaining": 2
}

'use client'
import { useState } from 'react'

export function VerifyForm() {
  const [step, setStep] = useState('phone') // 'phone' | 'code'
  const [phone, setPhone] = useState('+7')
  const [code, setCode] = useState('')
  const [requestId, setRequestId] = useState('')
  const [codeLength, setCodeLength] = useState(6)
  const [error, setError] = useState('')

  async function start() {
    setError('')
    const r = await fetch('/api/verify/start', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ phone }),
    })
    const data = await r.json()
    if (!r.ok) return setError('Не удалось отправить код в Telegram')
    setRequestId(data.request_id)
    setCodeLength(data.code_length)
    setStep('code')
  }

  async function check() {
    setError('')
    const r = await fetch('/api/verify/check', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ request_id: requestId, code }),
    })
    const data = await r.json()
    if (r.ok && data.status === 'verified') {
      // номер подтверждён — продолжаем сценарий (регистрация, вход)
      return
    }
    if (data.error_code === 'invalid_code') {
      setError(`Неверный код. Осталось попыток: ${data.attempts_remaining}`)
    } else {
      setError('Ошибка проверки, попробуйте ещё раз')
    }
  }

  if (step === 'phone') {
    return (
      <form onSubmit={(e) => { e.preventDefault(); start() }}>
        <input value={phone} onChange={(e) => setPhone(e.target.value)}
               inputMode="tel" placeholder="+79991234567" />
        <button type="submit">Получить код в Telegram</button>
        {error && <p role="alert">{error}</p>}
      </form>
    )
  }

  return (
    <form onSubmit={(e) => { e.preventDefault(); check() }}>
      <input value={code} onChange={(e) => setCode(e.target.value)}
             inputMode="numeric" maxLength={codeLength}
             placeholder={'•'.repeat(codeLength)} />
      <button type="submit">Подтвердить</button>
      {error && <p role="alert">{error}</p>}
    </form>
  )
}

Клиент не знает ни api_key, ни api_secret, ни даже адреса api.verificahub.ru. Он видит только /api/verify/start и /api/verify/check — это и есть правильная граница безопасности.