Implementar autenticación con Netlify Identity
Los sitios estáticos no están limitados únicamente a contenido público. Gracias a Netlify Identity, es posible agregar autenticación de usuarios (login, registro y manejo de sesiones) sin necesidad de montar un backend.
En este artículo veremos qué es Netlify Identity y cómo implementarlo paso a paso.
¿Qué es Netlify Identity?
Netlify Identity es un servicio de autenticación integrado en la plataforma de Netlify que permite:
- Registrar usuarios
- Iniciar y cerrar sesión
- Gestionar sesiones activas
- Proteger contenido
- Integrarse con funciones serverless
Todo esto pensado especialmente para sitios estáticos.
Internamente, Netlify Identity se basa en GoTrue, un sistema de autenticación que maneja usuarios mediante tokens JWT.
Es ideal en escenarios como:
- Blogs con contenido privado
- Paneles de administración simples
- Dashboards internos
- Formularios protegidos
Requisitos previos
Antes de comenzar, necesitas:
- Un sitio desplegado en Netlify
- Conocimientos básicos de HTML y JavaScript
Paso 1: Activar Netlify Identity
- Ingresa al panel de Netlify
- Selecciona tu sitio
- Ve a Identity
- Haz clic en Enable Identity
Una vez activado, Netlify habilitará automáticamente el sistema de usuarios para tu sitio.
Paso 2: Configuración básica y proveedores externos
Dentro de Identity → Settings, revisa lo siguiente:
- Registration:
- Habilita Enable registration
- Decide si los usuarios deben confirmar su email
- External providers (opcional):
- Puedes habilitar login con GitHub, Google, etc.
- Requiere configuración adicional (no obligatorio para empezar)
Para este ejemplo, vamos a seleccionar GitHub.
En esta ventana, Netlify solicita confirmar cómo se gestionará la autenticación con GitHub al habilitar Netlify Identity. Al seleccionar Use default configuration, Netlify utiliza su propia aplicación OAuth para gestionar el inicio de sesión, lo que simplifica la configuración y evita crear credenciales adicionales en GitHub.
La alternativa, Let me use my own OAuth app credentials, está pensada para casos avanzados donde se requiere mayor control o personalización del flujo de autenticación.
Al confirmar con Enable GitHub, el proveedor queda habilitado y los usuarios podrán registrarse o iniciar sesión usando su cuenta de GitHub.
Paso 3: Agregar Netlify Identity al frontend
Netlify provee un widget listo para usar.
Incluir el script
Agrega este script antes de cerrar el <body>:
1
<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
Mostrar el widget de login
Puedes abrir el modal de autenticación con JavaScript:
1
<button onclick="netlifyIdentity.open()">Iniciar sesión</button>
Esto mostrará automáticamente el login.
Detectar el estado del usuario
Para saber si un usuario está autenticado:
1
2
3
4
5
6
7
8
9
10
11
<script>
if (window.netlifyIdentity) {
netlifyIdentity.on("init", user => {
if (user) {
console.log("Usuario autenticado:", user.email);
} else {
console.log("Usuario no autenticado");
}
});
}
</script>
Esto es clave para:
- Mostrar u ocultar contenido
- Redirigir usuarios
- Proteger secciones
Cerrar sesión
1
<button onclick="netlifyIdentity.logout()">Cerrar sesión</button>
Proteger contenido básico
Un ejemplo simple para mostrar contenido solo a usuarios logueados:
1
2
3
4
5
6
7
8
9
<div id="private-content" style="display:none;">
Contenido privado
</div>
<script>
netlifyIdentity.on("login", user => {
document.getElementById("private-content").style.display = "block";
});
</script>
¿Dónde se almacenan los usuarios?
Los usuarios se gestionan desde:
Project configuration → Identity → Users
Ahí puedes:
- Ver usuarios registrados
- Deshabilitarlos
- Eliminarlos
Netlify Identity permite agregar autenticación real a sitios estáticos sin complicar la arquitectura. Con pocos pasos, puedes tener login, registro y sesiones funcionando para tu sitio web.