WhatsApp OTP em 8 linhas.

'use client'
import { useState } from 'react'
import { createBrowserClient } from '@superdb/supabase-compat'

function formatBR(raw: string) {
  const digits = raw.replace(/\D/g, '').slice(0, 11)
  if (digits.length <= 2) return digits
  if (digits.length <= 7) return `(${digits.slice(0, 2)}) ${digits.slice(2)}`
  return `(${digits.slice(0, 2)}) ${digits.slice(2, 7)}-${digits.slice(7)}`
}

function toE164(formatted: string) {
  return '+55' + formatted.replace(/\D/g, '')
}

export function WhatsAppForm() {
  const [phone, setPhone] = useState('')
  const [enviado, setEnviado] = useState(false)
  const [code, setCode] = useState('')

  const db = createBrowserClient(
    process.env.NEXT_PUBLIC_SUPERDB_URL!,
    process.env.NEXT_PUBLIC_SUPERDB_ANON_KEY!
  )

  async function enviar() {
    const { error } = await db.auth.signInWithOtp({
      phone: toE164(phone),
      options: { channel: 'whatsapp' },
    })
    if (!error) setEnviado(true)
  }

  async function verificar() {
    const { error } = await db.auth.verifyOtp({
      phone: toE164(phone),
      token: code,
      type: 'sms',  // tipo unificado pra phone OTP
    })
    if (!error) location.href = '/app'
  }

  if (!enviado) return (
    <>
      <input value={phone} onChange={(e) => setPhone(formatBR(e.target.value))}
             placeholder="(11) 99999-8888" />
      <button onClick={enviar}>Enviar código via WhatsApp</button>
    </>
  )

  return (
    <>
      <p>Código enviado pro WhatsApp {phone}</p>
      <input value={code} onChange={(e) => setCode(e.target.value)}
             maxLength={6} placeholder="000000" />
      <button onClick={verificar}>Verificar</button>
    </>
  )
}

Seu código de acesso ao Meu App é: 478291

Não compartilhe este código com ninguém.
Válido por 10 minutos.

curl -X POST "$SUPERDB_URL/auth/v1/verify" \
  -H "apikey: $ANON_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "phone": "+5511999998888",
    "token": "478291",
    "type": "sms"
  }'

# Retorna:
# { "access_token": "eyJ...", "refresh_token": "...", "user": {...} }

async function enviarComFallback() {
  const e164 = toE164(phone)

  // 1ª tentativa: WhatsApp
  const r1 = await db.auth.signInWithOtp({
    phone: e164,
    options: { channel: 'whatsapp' },
  })

  if (r1.error?.code === 'whatsapp_unavailable') {
    // Fallback: SMS
    const r2 = await db.auth.signInWithOtp({
      phone: e164,
      options: { channel: 'sms' },
    })
    if (r2.error) return alert('Não foi possível enviar o código')
    setCanal('sms')  // mostra "Código enviado por SMS" em vez de WhatsApp
  }

  setEnviado(true)
}

await db.auth.signInWithOtp({
  phone: '+5511999998888',
  options: {
    channel: 'whatsapp',
    shouldCreateUser: true,
    data: {
      nome: 'Felipe Padilha',
      plano: 'pro_trial',
      origem: 'landing_b',
    },
  },
})

const { error } = await db.auth.updateUser({
  phone: '+5511999998888',
})
// SuperDB envia OTP via WhatsApp pra confirmar posse
// User digita código → phone fica em auth.users.phone_confirmed_at