Saltar al contenido principal

🔧 Solución de Problemas de Clerk

❌ Error: "Unable to authenticate this browser for your development instance"​

Este error generalmente se debe a problemas con cookies o configuración de Clerk. Sigue estos pasos en orden:

⚡ Solución Rápida (Haz esto primero)​

  1. Ejecuta el script de limpieza:

    ./scripts/clear-clerk-cache.sh

  2. Cierra completamente tu navegador (no solo la pestaña)

  3. Abre una ventana de incógnito/privada

  4. Ve a: http://localhost:3000/sign-in

  5. Intenta iniciar sesión

Si esto no funciona, continúa con las soluciones detalladas abajo.

Solución 1: Limpiar Cookies del Navegador Manualmente​

  1. Chrome/Edge:

    • Presiona Cmd+Shift+Delete (Mac) o Ctrl+Shift+Delete (Windows)
    • Selecciona "Cookies y otros datos del sitio"
    • Marca "Cookies y otros datos del sitio"
    • Haz clic en "Borrar datos"
    • O específicamente para Clerk:
      • Abre DevTools (F12)
      • Ve a "Application" → "Cookies"
      • Busca cookies que contengan "clerk" en el nombre
      • Elimínalas todas

  2. Firefox:

    • Presiona Cmd+Shift+Delete (Mac) o Ctrl+Shift+Delete (Windows)
    • Selecciona "Cookies"
    • Haz clic en "Borrar ahora"

  3. Safari:

    • Ve a "Safari" → "Preferencias" → "Privacidad"
    • Haz clic en "Gestionar datos de sitios web"
    • Busca "clerk" y elimina todas las entradas

Solución 2: Usar Modo Incógnito​

  1. Abre una ventana de incógnito/privada
  2. Ve a http://localhost:3000/sign-in
  3. Intenta iniciar sesión

Solución 3: Verificar Variables de Entorno​

Asegúrate de tener estas variables en tu .env:

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_xxxxx
CLERK_SECRET_KEY=sk_test_xxxxx
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/dashboard
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/dashboard

Solución 4: Verificar URLs Permitidas en Clerk Dashboard ⚠️ IMPORTANTE​

Este es MUY IMPORTANTE. Si las URLs no están configuradas, Clerk bloqueará la autenticación.

  1. Ve a https://dashboard.clerk.com/

  2. Selecciona tu aplicación

  3. Ve a "Settings" → "Paths" o "URLs" o "Allowed URLs"

  4. Asegúrate de que estas URLs estén en la lista de permitidas:

    • http://localhost:3000
    • http://localhost:3000/*
    • http://127.0.0.1:3000 (también agrégalo)
    • Cualquier otra URL que uses para desarrollo

  5. Guarda los cambios y espera unos segundos para que se propaguen

  6. Reinicia tu servidor de desarrollo:

    # Detén el servidor (Ctrl+C)
    pnpm dev

Solución 5: Reiniciar el Servidor de Desarrollo​

# Detén el servidor (Ctrl+C)
# Limpia el cache
rm -rf .next
# Reinicia
pnpm dev

Solución 6: Verificar Configuración de ClerkProvider​

Asegúrate de que ClerkProvider esté configurado correctamente en tu aplicación.

🔍 Verificar que Todo Está Configurado​

Ejecuta este comando para verificar tus variables de entorno:

# Verificar que las variables están configuradas (sin mostrar valores)
grep -E "CLERK|NEXT_PUBLIC" .env | sed 's/=.*/=***/'

📝 Si Nada Funciona​

  1. Contacta a Clerk Support: support@clerk.com
  2. Verifica los logs del servidor: Busca errores relacionados con Clerk
  3. Revisa la consola del navegador: Puede haber errores de JavaScript

✅ Checklist Rápido​

  • Cookies limpiadas
  • Variables de entorno configuradas
  • URLs permitidas en Clerk Dashboard
  • Servidor reiniciado
  • Probado en modo incógnito