{"id":31651384,"url":"https://github.com/skyzerozx/webauthn-angular","last_synced_at":"2026-05-09T05:33:05.883Z","repository":{"id":255886048,"uuid":"853121671","full_name":"SkyZeroZx/webauthn-angular","owner":"SkyZeroZx","description":"Example integration Angular with WebAuthn \u0026 NestJS","archived":false,"fork":false,"pushed_at":"2024-11-02T05:57:58.000Z","size":2256,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-07T08:57:35.718Z","etag":null,"topics":["angular","nestjs","passwordless","webauthn","webauthn-demo"],"latest_commit_sha":null,"homepage":"https://skyzerozx.github.io/webauthn-angular/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SkyZeroZx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-09-06T03:15:31.000Z","updated_at":"2025-08-11T17:18:27.000Z","dependencies_parsed_at":"2024-09-07T17:41:39.863Z","dependency_job_id":"9e262510-e2b8-4dcd-aacc-a80ac2c2dd28","html_url":"https://github.com/SkyZeroZx/webauthn-angular","commit_stats":null,"previous_names":["skyzerozx/webauthn-angular"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SkyZeroZx/webauthn-angular","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SkyZeroZx%2Fwebauthn-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SkyZeroZx%2Fwebauthn-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SkyZeroZx%2Fwebauthn-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SkyZeroZx%2Fwebauthn-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SkyZeroZx","download_url":"https://codeload.github.com/SkyZeroZx/webauthn-angular/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SkyZeroZx%2Fwebauthn-angular/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32808453,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T08:22:46.396Z","status":"online","status_checked_at":"2026-05-09T02:00:06.633Z","response_time":123,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","nestjs","passwordless","webauthn","webauthn-demo"],"created_at":"2025-10-07T08:54:56.746Z","updated_at":"2026-05-09T05:33:05.862Z","avatar_url":"https://github.com/SkyZeroZx.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebAuthn con Angular y NestJS\n\n## Descripción\n\nEste repositorio es una guía práctica para implementar **WebAuthn** utilizando **Angular** en el frontend y **NestJS** en el backend. El proyecto incluye un ejemplo de arquitectura que utiliza **Redis** como caché distribuido para mejorar la eficiencia de la autenticación y la gestión de sesiones.\n\n## Tabla de Contenidos\n\n- [Requisitos](#requisitos)\n- [Arquitectura del Proyecto](#arquitectura-del-proyecto)\n- [Estructura del Proyecto](#estructura-del-proyecto)\n- [Configuración](#configuración)\n- [Desarollo](#desarollo)-\n  [Pruebas E2E](#pruebas-e2e)\n- [Despliegue](#despliegue)\n\n## Requisitos\n\n- Node.js 20+\n- Redis v7.0+\n- Angular CLI v18+\n- NestJS v10+\n- Docker Compose ( Opcional )\n\n## Arquitectura del Proyecto\n\nLa arquitectura del proyecto está diseñada para ser modular y escalable, utilizando una separación clara entre frontend, backend y almacenamiento en caché. A continuación se muestra un diagrama simplificado:\n\n![Arquitectura](/docs/images/architecture-diagram.jpg)\n\n### Componentes\n\n- **WebAuthn Client (Angular)**:\n\n  - Ofrece la interfaz gráfica para el registro y autenticación de usuarios mediante WebAuthn.\n  - Facilita la autenticación sin contraseñas, mejorando la experiencia del usuario.\n\n- **WebAuthn API (NestJS)**:\n\n  - Gestiona la lógica de negocio de la autenticación y el registro de dispositivos.\n  - Genera desafíos (challenges) para autenticación y valida las respuestas.\n\n- **Redis Cache**:\n\n  - Almacena temporalmente los desafíos generados durante el proceso de autenticación.\n  - Mejora el tiempo de respuesta al reducir la carga en la base de datos principal.\n\n- **Database (PostgreSQL)**:\n  - Almacena de forma persistente la información de los usuarios y sus dispositivos autenticadores.\n  - Garantiza la integridad y seguridad de los datos registrados.\n\n### Diagrama Base de Datos\n\n![Arquitectura](/docs/images/database-diagram.jpeg)\n\n## Configuración\n\n### Cliente\n\nConfigura el endpoint correspondiente en el folder `environments`.\n\n### API\n\n1. Crea un archivo `.env` basado en el template `.env.template` con los siguientes parámetros:\n\n   ```env\n   # PORT\n   PORT=3000\n\n   # JWT\n   JWT_SECRET_TOKEN=NESTJS_SECRET_TOKEN\n   JWT_EXPIRE_TIME=200H\n\n   # WEB AUTHN CONFIG\n   WEB_AUTHN_RP_ID=localhost\n   WEB_AUTHN_RP_NAME=Web Authentication\n   WEB_AUTHN_RP_ID_ARRAY=[\"localhost\", \"YOUR_DOMAIN\"]\n   WEB_AUTHN_ORIGIN=[\"http://localhost:3000\", \"http://localhost:4200\"]\n   WEB_AUTHN_NAME=WebAuthn Angular\n\n   # DATABASE CONFIG\n   DATABASE_HOST=localhost\n   DATABASE_PORT=5432\n   DATABASE_NAME=postgres\n   DATABASE_USERNAME=postgres\n   DATABASE_PASSWORD=postgres\n   DATABASE_AUTO_LOAD_ENTITIES=true\n   DATABASE_SYNCHRONIZE=true\n   DATABASE_LOGGING=false\n   DATABASE_SSL=true\n\n   # CACHE CONFIG\n   CACHE_HOST=localhost\n   CACHE_NAME=default\n   CACHE_USERNAME=default\n   CACHE_PASSWORD=default\n   CACHE_PORT=6379\n   CACHE_TTL=60000\n   CACHE_TLS=true\n\n   # WINSTON CONFIG\n   LOGGER_FORMAT=YYYY-MM-DD hh:mm:ss.SSS A\n   LOGGER_APP_NAME=API_WEBAUTHN\n\n   # LOGGER CONFIG\n   LOG_FOLDER=LOG\n   LOGGER_FILENAME_INFO=APP_INFO-%DATE%.json\n   LOGGER_FILENAME_WARN=APP_WARN-%DATE%.json\n   LOGGER_FILENAME_ERROR=APP_ERROR-%DATE%.json\n   LOGGER_DATE_PATTERN=YYYY-MM-DD\n   LOGGER_ZIPPED_ARCHIVE=true\n   LOGGER_WATCH_LOG=true\n   LOGGER_MAX_SIZE=14d\n   LOGGER_MAX_FILES=20m\n   ```\n\n## Desarrollo\n\nPara ejecutar el proyecto en un entorno local, sigue los siguientes comandos:\n\n### Levantar el Cliente (Angular)\n\nInicia el entorno de desarrollo del cliente Angular con el siguiente comando:\n\n```bash\nnpm run start:webauthn-angular\n```\n\n### Levantar el API (NestJS)\n\nInicia el entorno de desarrollo del API NestJS con el siguiente comando:\n\n```bash\nnpm run start:webauthn-nestjs\n```\n\n### Generar Build\n\nPara generar la build productiva con el siguiente comando:\n\n```bash\nnpm run build\n```\n\n### Levantar Docker local\n\nEjecutar el siguiente comando para levantar los contenedores de PostgreSQL y Redis en localhost para desarrollo\n\n```bash\ndocker compose -f \"docker-compose.dev.yml\" up -d --build\n```\n\n## Pruebas E2E con Cypress\n\nPara ejecutar las pruebas E2E construidas en Cypress, sigue estos pasos:\n\n### 1. Levantar Cypress con la Interfaz Gráfica (UI)\n\nAsegúrate de configurar el archivo `cypress.config.ts` con las variables requeridas. Luego, ejecuta el siguiente comando para abrir Cypress:\n\n```bash\nnpm run nx run webauthn-angular-e2e:open-cypress\n```\n\nPara ejecutar las pruebas en modo headless, utiliza el siguiente comando:\n\n```bash\nnpm run nx run webauthn-angular-e2e\n```\n\n## Despliegue\n\n### Pre-requisitos\n\nSe ha creado el archivo `docker-compose.prod.yml`, que incluye los siguientes contenedores:\n\n- **PostgreSQL**\n- **Redis**\n- **API y cliente** contenedorizados bajo **Nginx** con compresión **Brotli** y **HTTP/3**.\n\n### Crear la imagen base\n\nDado que se utiliza **Nx** como monorepositorio, ejecuta el siguiente comando para crear la imagen base del contenedor:\n\n```bash\ndocker build -t base-web-authn -f docker/base/Dockerfile .\n```\n\n### Desplegar la aplicación\n\nEjecuta el siguiente comando para desplegar la aplicación:\n\n```bash\ndocker compose -f \"docker-compose.prod.yml\" up -d --build\n```\n\n### Puertos expuestos\n\n- **HTTPS**: Puerto `443` (por defecto).\n- **HTTP**: Puerto `80`.\n\n### Contexto de la API\n\nLa API estará disponible en: http://localhost/api\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskyzerozx%2Fwebauthn-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskyzerozx%2Fwebauthn-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskyzerozx%2Fwebauthn-angular/lists"}