Template de autenticación y protección de contenido para aplicaciones web.
Swanix Wall es un template completo para implementar autenticación y protección de contenido en aplicaciones web. Proporciona una base sólida con Auth0, Netlify Functions y Google OAuth.
- 🔐 Autenticación Auth0: Integración completa con Auth0
- 🛡️ Protección de rutas: Middleware para proteger páginas HTML
- 🌐 Integración Netlify: Funciones serverless para autenticación
- 🔑 Google OAuth: Soporte para login con Google
- 📱 Responsive: Diseño adaptativo para todos los dispositivos
- ⚡ Ligero: Sin dependencias pesadas
- 🔒 Seguro: Rate limiting y validación de tokens
swanix-wall/
├── app/
│ ├── index.html # Página principal protegida
│ └── protected.html # Ejemplo de página protegida
├── assets/
│ ├── css/
│ │ └── main.css # Estilos base
│ └── js/
│ ├── auth.js # Configuración Auth0
│ ├── protected-content.js
│ ├── login.js # Lógica de login
│ ├── index.js # Lógica principal
│ └── utils.js # Utilidades
├── netlify/
│ ├── functions/
│ │ ├── auth-protect.js # Protección de rutas
│ │ └── protect-html.js # Middleware HTML
│ └── utils/
│ └── rate-limiter.js # Rate limiting
├── login.html # Página de login
├── forbidden.html # Página de acceso denegado
├── netlify.toml # Configuración Netlify
└── env.example # Variables de entorno
-
Clonar el repositorio
git clone <repository-url> cd swanix-wall
-
Configurar variables de entorno
cp env.example .env # Editar .env con tus credenciales de Auth0 -
Configurar Auth0
- Crear aplicación en Auth0
- Configurar URLs de callback
- Agregar Google OAuth (opcional)
-
Desplegar en Netlify
- Conectar repositorio
- Configurar variables de entorno
- Desplegar
AUTH0_DOMAIN=tu-dominio.auth0.com
AUTH0_CLIENT_ID=tu-client-id
AUTH0_CLIENT_SECRET=tu-client-secret
AUTH0_AUDIENCE=tu-audience
GOOGLE_CLIENT_ID=tu-google-client-id
GOOGLE_CLIENT_SECRET=tu-google-client-secret- Crear aplicación Single Page Application
- Configurar URLs permitidas:
http://localhost:8888https://tu-dominio.netlify.app
- Configurar URLs de callback:
http://localhost:8888/callbackhttps://tu-dominio.netlify.app/callback
Para proteger una página HTML, agregar el atributo data-protected:
<!DOCTYPE html>
<html data-protected="true">
<head>
<title>Página Protegida</title>
</head>
<body>
<!-- Contenido protegido -->
</body>
</html>Para proteger rutas de API, usar el middleware:
// En Netlify Functions
const { protectRoute } = require('./utils/auth');
exports.handler = async (event, context) => {
const authResult = await protectRoute(event);
if (!authResult.authenticated) {
return {
statusCode: 401,
body: JSON.stringify({ error: 'No autorizado' })
};
}
// Lógica de la API
};Swanix Wall puede integrarse con Swanix CMX para:
- Proteger contenido del CMS
- Autenticación de usuarios
- Control de acceso por roles
- Logs de actividad
# Instalar dependencias
npm install
# Desarrollo local
npm run dev
# Construir para producción
npm run build
# Tests
npm testapp/: Páginas de la aplicaciónassets/: Recursos estáticos (CSS, JS, imágenes)netlify/functions/: Funciones serverlessscripts/: Scripts de utilidad
- Fork el proyecto
- Crear rama para feature (
git checkout -b feature/nueva-funcionalidad) - Commit cambios (
git commit -am 'Agregar nueva funcionalidad') - Push a la rama (
git push origin feature/nueva-funcionalidad) - Crear Pull Request
MIT License - ver LICENSE para detalles.
- 📧 Email: [email protected]
- 📖 Documentación: docs/
- 🐛 Issues: GitHub Issues