@dani/auth-system (1.0.0)

Published 2026-01-07 17:09:49 +01:00 by dani

Setup this registry in your project .npmrc file:

@dani:registry=

To install the package using npm, run the following command:

npm install @dani/auth-system@1.0.0

or add it to the package.json file:

"@dani/auth-system": "1.0.0"

For more information on the npm registry, see the documentation.

Auth System

Sistema de autenticación reutilizable con soporte para login local (email/contraseña) y OIDC (OpenID Connect).

Características

✅ Autenticación local con email y contraseña (bcrypt)
✅ Autenticación OIDC (OpenID Connect)
✅ JWT tokens para sesiones
✅ Logs de autenticación
✅ Middleware de autenticación para Express
✅ Componentes React reutilizables
✅ Configuración flexible y extensible

Instalación

Configurar el Registry de Forgejo

Primero, configura npm para usar el Package Registry de Forgejo:

# Configurar el registry para el scope @dani
npm config set @dani:registry https://git.martinezrodriguez.es/api/packages/dani/npm/

# Si el paquete es privado, configura el token de autenticación
npm config set -- '//git.martinezrodriguez.es/api/packages/dani/npm/:_authToken' "TU_TOKEN_AQUI"

Instalar el Paquete

npm install @dani/auth-system

Nota: Necesitarás un token de acceso personal de Forgejo con permisos read:package si el paquete es privado. Ver PUBLISH.md para más detalles.

Dependencias

Este paquete requiere las siguientes dependencias peer:

react ^18.0.0
react-router-dom ^6.0.0

Configuración Backend

1. Inicializar Base de Datos

Primero, inicializa las tablas necesarias en tu base de datos:

import Database from 'better-sqlite3';
import { initAuthTables } from '@dani/auth-system/db';

const db = new Database('tu-base-de-datos.db');
initAuthTables(db);

2. Configurar Rutas de Autenticación

import express from 'express';
import { createAuthRoutes } from '@dani/auth-system/backend';
import Database from 'better-sqlite3';

const app = express();
const db = new Database('tu-base-de-datos.db');

// Configurar rutas de autenticación
const authRoutes = createAuthRoutes({
    db: db,
    jwtSecret: process.env.JWT_SECRET,
    // Opcional: personalizar callback URL
    callbackBaseUrl: 'https://tu-dominio.com',
    // Opcional: personalizar ruta de login del frontend
    frontendLoginPath: '/login'
});

app.use('/api/auth', authRoutes);

3. Configurar Middleware de Autenticación

import { createAuthMiddleware } from '@dani/auth-system/backend';

// Crear middleware con tu JWT secret
const authenticateToken = createAuthMiddleware({
    jwtSecret: process.env.JWT_SECRET
});

// Usar en rutas protegidas
app.use('/api/protected', authenticateToken);

Configuración Frontend

1. Configurar Provider de Autenticación

import { AuthProvider } from '@dani/auth-system/frontend';
import { setGetApiUrl } from '@dani/auth-system/frontend';

// Opcional: configurar URL del API personalizada
setGetApiUrl(() => 'http://localhost:3000/api');

function App() {
    return (
        <AuthProvider
            // Opcional: función para cargar preferencias del usuario
            loadUserPreferences={async (userData, setUser) => {
                // Tu lógica personalizada aquí
                const prefs = await fetchUserPreferences(userData.id);
                setUser({ ...userData, ...prefs });
            }}
            // Opcional: función para actualizar preferencias
            updateUserPreferences={async (prefs) => {
                // Tu lógica personalizada aquí
            }}
        >
            {/* Tu aplicación */}
        </AuthProvider>
    );
}

2. Configurar Rutas

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Login, ProtectedRoute } from '@dani/auth-system/frontend';

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/login" element={<Login 
                    appName="Mi App"
                    appSubtitle="Inicia sesión para continuar"
                    redirectPath="/dashboard"
                />} />
                <Route path="/dashboard" element={
                    <ProtectedRoute>
                        <Dashboard />
                    </ProtectedRoute>
                } />
            </Routes>
        </BrowserRouter>
    );
}

Variables de Entorno

Requeridas

JWT_SECRET - Secreto para firmar y verificar tokens JWT

Opcionales (para OIDC)

OAUTH_PROVIDER_NAME - Nombre del proveedor OAuth (se mostrará en el botón de login)
OAUTH_WELLKNOWN_URL - URL del well-known endpoint OIDC (ej: https://auth.proveedor.com/.well-known/openid-configuration)
OAUTH_CLIENT_ID - Client ID de OAuth
OAUTH_CLIENT_SECRET - Client Secret de OAuth
OAUTH_ALLOW_CREATE_USER - Permitir crear usuarios nuevos vía OIDC (true/false, default: false)
OAUTH_DISABLE_LOCAL_LOGIN - Deshabilitar login local (true/false, default: false)

API Reference

Backend

`createAuthRoutes(options)`

Crea un router de Express con las rutas de autenticación.

Opciones:

db (Database, requerido) - Instancia de better-sqlite3
jwtSecret (string, requerido) - Secreto para JWT
getClientIp (Function, opcional) - Función personalizada para obtener IP
logAuthAttempt (Function, opcional) - Función personalizada para logs
callbackBaseUrl (string, opcional) - URL base para callback OIDC
frontendLoginPath (string, opcional) - Ruta de login del frontend (default: '/login')

Rutas creadas:

GET /config - Configuración pública OAuth
GET /oidc/init - Iniciar flujo OIDC
GET /oidc/callback - Callback OIDC
POST /login - Login local
GET /verify - Verificar token
GET /logs - Obtener logs de autenticación

`createAuthMiddleware(options)`

Crea middleware de autenticación JWT.

Opciones:

jwtSecret (string, requerido) - Secreto para JWT

`initAuthTables(db)`

Inicializa las tablas de autenticación en la base de datos.

Parámetros:

db (Database) - Instancia de better-sqlite3

Frontend

`<AuthProvider>`

Provider de contexto de autenticación.

Props:

children (ReactNode, requerido)
loadUserPreferences (Function, opcional) - Función para cargar preferencias
updateUserPreferences (Function, opcional) - Función para actualizar preferencias

`<Login>`

Componente de página de login.

Props:

appName (string, opcional) - Nombre de la app (default: 'App')
appSubtitle (string, opcional) - Subtítulo (default: 'Inicia sesión para continuar')
logo (ReactNode, opcional) - Logo personalizado
redirectPath (string, opcional) - Ruta de redirección (default: '/')
styles (Object, opcional) - Estilos personalizados
showDebugInfo (boolean, opcional) - Mostrar info de debug (default: false)

`<ProtectedRoute>`

Componente para proteger rutas.

Props:

children (ReactNode, requerido)
loginPath (string, opcional) - Ruta de login (default: '/login')
loadingComponent (ReactNode, opcional) - Componente de carga personalizado
primaryColor (string, opcional) - Color primario (default: 'indigo')

`useAuth()`

Hook para acceder al contexto de autenticación.

Retorna:

user - Datos del usuario actual
loading - Estado de carga
isAuthenticated - Si está autenticado
login(email, password) - Función de login
loginWithToken(token) - Login con token
logout() - Cerrar sesión
getToken() - Obtener token actual

Extensibilidad

Añadir Campos a la Tabla Users

El paquete crea la tabla users con campos mínimos. Para añadir campos adicionales, crea una migración:

// Después de initAuthTables(db)
db.exec('ALTER TABLE users ADD COLUMN tu_campo TEXT');

El componente Login acepta props para personalización:

<Login
    appName="Mi Aplicación"
    logo={<img src="/logo.png" alt="Logo" />}
    styles={{ primaryColor: 'blue' }}
/>

Personalizar Carga de Preferencias

Puedes proporcionar funciones personalizadas al AuthProvider:

<AuthProvider
    loadUserPreferences={async (userData, setUser) => {
        const prefs = await fetch('/api/users/me').then(r => r.json());
        setUser({ ...userData, ...prefs });
    }}
>

Ejemplos

Ver examples/integration.md para ejemplos completos de integración.

Licencia

MIT

Dependencies

ID	Version
bcrypt	^5.1.1
express	^4.18.2
jsonwebtoken	^9.0.2

Peer dependencies

ID	Version
react	^18.0.0
react-router-dom	^6.0.0

authentication auth oidc jwt login express react

Details

npm

2026-01-07 17:09:49 +01:00

dani

MIT

latest

14 KiB

Assets (1)

auth-system-1.0.0.tgz 14 KiB

Versions (1) View all

1.0.0

2026-01-07

@dani/auth-system (1.0.0)

Installation

About this package

Auth System

Características

Instalación

Configurar el Registry de Forgejo

Instalar el Paquete

Dependencias

Configuración Backend

1. Inicializar Base de Datos

2. Configurar Rutas de Autenticación

3. Configurar Middleware de Autenticación

Configuración Frontend

1. Configurar Provider de Autenticación

2. Configurar Rutas

Variables de Entorno

Requeridas

Opcionales (para OIDC)

API Reference

Backend

`createAuthRoutes(options)`

`createAuthMiddleware(options)`

`initAuthTables(db)`

Frontend

`<AuthProvider>`

`<ProtectedRoute>`

`useAuth()`

Extensibilidad

Añadir Campos a la Tabla Users

Personalizar Carga de Preferencias

Ejemplos

Licencia

Dependencies

Keywords

@dani/auth-system (1.0.0)

Installation

About this package

Auth System

Características

Instalación

Configurar el Registry de Forgejo

Instalar el Paquete

Dependencias

Configuración Backend

1. Inicializar Base de Datos

2. Configurar Rutas de Autenticación

3. Configurar Middleware de Autenticación

Configuración Frontend

1. Configurar Provider de Autenticación

2. Configurar Rutas

Variables de Entorno

Requeridas

Opcionales (para OIDC)

API Reference

Backend

createAuthRoutes(options)

createAuthMiddleware(options)

initAuthTables(db)

Frontend

<AuthProvider>

<Login>

<ProtectedRoute>

useAuth()

Extensibilidad

Añadir Campos a la Tabla Users

Personalizar UI del Login

Personalizar Carga de Preferencias

Ejemplos

Licencia

Dependencies

Keywords

`createAuthRoutes(options)`

`createAuthMiddleware(options)`

`initAuthTables(db)`

`<AuthProvider>`

`<Login>`

`<ProtectedRoute>`

`useAuth()`