@imansi/templates-auth

4 variantes visuales de autenticación para el ecosistema Imansi. Login, Registro, 2FA y recuperación de contraseña, listos para conectar a imansi-auth-react.

---

¿Qué es?

@imansi/templates-auth es el paquete de páginas de autenticación del ecosistema Imansi. Proporciona componentes visuales completos — Login, Registro, 2FA, recuperación de contraseña — ya conectados a imansi-auth-react.

Cada componente:

• Usa los hooks de imansi-auth-react directamente
• Está construido sobre @imansi/ui y @imansi/tailwind
• Funciona con los 6 temas y 2 modos
• Es 100% responsive

---

Instalación

npm install @imansi/templates-auth @imansi/tailwind @imansi/ui imansi-auth-react react-router-dom

---

Uso básico

import { Routes, Route } from 'react-router-dom';
import {
  Login,
  Register,
  ForgotPassword,
  ResetPassword,
  Verify2FA,
} from '@imansi/templates-auth/split';

export default function App() {
  return (
    <Routes>
      <Route
        path="/login"
        element={
          <Login
            brandName="Mi Empresa"
            registerHref="/registro"
            forgotPasswordHref="/recuperar"
          />
        }
      />
      <Route
        path="/registro"
        element={<Register brandName="Mi Empresa" loginHref="/login" />}
      />
      <Route
        path="/recuperar"
        element={<ForgotPassword backToLoginHref="/login" />}
      />
      <Route
        path="/restablecer"
        element={<ResetPassword loginHref="/login" />}
      />
      <Route
        path="/verificar-2fa"
        element={<Verify2FA cancelHref="/login" />}
      />
    </Routes>
  );
}

---

Variantes disponibles

Variante	Descripción	Import
split	Branding a la izquierda + form a la derecha	@imansi/templates-auth/split
card	Card flotante sobre gradientes	@imansi/templates-auth/card
centered	Formulario centrado sin branding	@imansi/templates-auth/centered
minimal	Ultra simple, todo plano	@imansi/templates-auth/minimal

split

Panel de branding con logo, tagline y bullets decorativos a la izquierda. Formulario a la derecha.

Ideal para: SaaS, apps B2B, productos con marca fuerte.

card

Formulario dentro de una card flotante centrada sobre un fondo con gradientes.

Ideal para: productos modernos y apps consumer.

centered

Formulario centrado sin panel de branding. Solo el logo compacto arriba.

Ideal para: apps internas y herramientas B2B.

minimal

Ultra simple. Sin sombras, sin decoraciones. Tipografía clara y espacio en blanco.

Ideal para: apps minimalistas o embebidas.

---

Componentes

Cada variante exporta 5 componentes: Login, Register, ForgotPassword, ResetPassword, Verify2FA.

<Login />

Prop	Tipo	Default	Descripción
title	string	'Iniciar sesión'	Título
brandName	string	'Imansi'	Nombre de la marca
brandTagline	string	'Autenticación moderna...'	Tagline del panel
brandLogo	node	null	Logo custom
registerHref	string	'/registro'	Ruta al registro
forgotPasswordHref	string	'/recuperar'	Ruta a recuperación
twoFactorHref	string	'/verificar-2fa'	Ruta a 2FA
dashboardHref	string	'/dashboard'	Ruta tras login
showOAuth	boolean	true	Mostrar botones OAuth
showRememberMe	boolean	true	Checkbox "Recordarme"
oauthProviders	string[]	auto	Proveedores OAuth

Comportamiento automático:

• Llama a useAutenticacion().iniciarSesion()
• Si el backend responde requiere2fa, redirige a twoFactorHref
• Muestra toast.success tras login exitoso
• Redirige a dashboardHref automáticamente

<Register />

Prop	Tipo	Default	Descripción
title	string	'Crear cuenta'	Título
showName	boolean	true	Campo de nombre
showTerms	boolean	true	Checkbox de términos
loginHref	string	'/login'	Ruta al login

<ForgotPassword />

Prop	Tipo	Default	Descripción
backToLoginHref	string	'/login'	Ruta al login
successTitle	string	'Revisá tu correo'	Título tras éxito

<ResetPassword />

Lee el token de ?token=xxx con useSearchParams.

Prop	Tipo	Default	Descripción
loginHref	string	'/login'	Ruta al login

<Verify2FA />

Prop	Tipo	Default	Descripción
codeLength	number	6	Cantidad de dígitos
cancelHref	string	'/login'	Ruta si cancela
dashboardHref	string	'/dashboard'	Ruta tras verificar

---

Personalización

<Login
  brandName="Mi Empresa"
  brandTagline="Bienvenido a tu cuenta"
  brandLogo={<img src="/logo.svg" alt="Logo" />}
  registerHref="/signup"
  forgotPasswordHref="/forgot"
  oauthProviders={['github', 'google']}
  showOAuth={true}
  showRememberMe={true}
/>

---

Próximos pasos

• imansi-auth-react — Los hooks que usan estos componentes
• imansi-auth-node — El backend
• @imansi/templates — Todas las plantillas