@acontplus/ng-auth 1.1.0 → 1.1.2

package/fesm2022/acontplus-ng-auth.mjs

@@ -1,16 +1,15 @@
-import { UserRepository, BaseUseCase } from '@acontplus/ng-infrastructure';
+import { UserRepository, BaseUseCase, LoggingService, TOKEN_PROVIDER } from '@acontplus/ng-infrastructure';
 export { TOKEN_PROVIDER } from '@acontplus/ng-infrastructure';
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, Injectable, signal, input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { inject, PLATFORM_ID, Injectable, NgZone, signal, input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
 import { Router } from '@angular/router';
 import * as i1 from '@angular/common';
 import { isPlatformBrowser, DOCUMENT, CommonModule } from '@angular/common';
 import { jwtDecode } from 'jwt-decode';
 import { ENVIRONMENT, AUTH_API } from '@acontplus/ng-config';
 import { catchError, switchMap } from 'rxjs/operators';
-import { throwError, from, map, of, tap, catchError as catchError$1 } from 'rxjs';
+import { throwError, firstValueFrom, map, from, of, tap, catchError as catchError$1 } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
-import { AuthTokens } from '@acontplus/core';
 import * as i2 from '@angular/forms';
 import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatCard, MatCardHeader, MatCardTitle, MatCardContent, MatCardFooter } from '@angular/material/card';
@@ -29,7 +28,7 @@ class TokenRepository {
             this.setRefreshToken(tokens.refreshToken, rememberMe);
         }
     }
-    getAccessToken() {
+    getToken() {
         if (!isPlatformBrowser(this.platformId)) {
             return null;
         }
@@ -75,7 +74,7 @@ class TokenRepository {
         sessionStorage.removeItem(this.environment.refreshTokenKey);
     }
     isAuthenticated() {
-        const accessToken = this.getAccessToken();
+        const accessToken = this.getToken();
         if (!accessToken) {
             return false;
         }
@@ -90,7 +89,7 @@ class TokenRepository {
         }
     }
     needsRefresh() {
-        const accessToken = this.getAccessToken();
+        const accessToken = this.getToken();
         if (!accessToken) {
             return false;
         }
@@ -106,13 +105,13 @@ class TokenRepository {
         }
     }
     getTokenPayload() {
-        const token = this.getAccessToken();
+        const token = this.getToken();
         if (!token)
             return null;
         try {
             return jwtDecode(token);
         }
-        catch (error) {
+        catch {
             return null;
         }
     }
@@ -138,25 +137,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                 }]
         }] });
 
-class AuthTokenService {
-    tokenRepository;
-    constructor(tokenRepository) {
-        this.tokenRepository = tokenRepository;
-    }
-    getToken() {
-        return this.tokenRepository.getAccessToken();
-    }
-    isAuthenticated() {
-        return this.tokenRepository.isAuthenticated();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthTokenService, deps: [{ token: TokenRepository }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthTokenService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: AuthTokenService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: TokenRepository }] });
-
 /**
  * Service to manage URL redirection after authentication
  * Stores the intended URL when session is lost and redirects to it after successful login
@@ -164,7 +144,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
  */
 class UrlRedirectService {
     REDIRECT_URL_KEY = 'acp_redirect_url';
-    EXCLUDED_ROUTES = ['/login', '/register', '/forgot-password', '/reset-password'];
+    EXCLUDED_ROUTES = [
+        '/login',
+        '/auth',
+        '/register',
+        '/forgot-password',
+        '/reset-password',
+    ];
     router = inject(Router);
     platformId = inject(PLATFORM_ID);
     document = inject(DOCUMENT);
@@ -271,11 +257,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
         }] });
 
 const authGuard = (_route, state) => {
-    const authService = inject(AuthTokenService);
+    const tokenRepository = inject(TokenRepository);
     const router = inject(Router);
     const urlRedirectService = inject(UrlRedirectService);
     const environment = inject(ENVIRONMENT);
-    if (authService.isAuthenticated()) {
+    if (tokenRepository.isAuthenticated()) {
         return true;
     }
     // Store the current URL for redirection after login
@@ -292,14 +278,14 @@ const authGuard = (_route, state) => {
 const authRedirectInterceptor = (req, next) => {
     const router = inject(Router);
     const urlRedirectService = inject(UrlRedirectService);
-    const authTokenService = inject(AuthTokenService);
+    const tokenRepository = inject(TokenRepository);
     const environment = inject(ENVIRONMENT);
     return next(req).pipe(catchError((error) => {
         // Handle 401 Unauthorized errors
         if (error.status === 401) {
             // Only store and redirect if user was previously authenticated
             // This prevents redirect loops and handles session expiry scenarios
-            if (authTokenService.isAuthenticated()) {
+            if (tokenRepository.isAuthenticated()) {
                 // Store the current URL for redirection after re-authentication
                 urlRedirectService.storeCurrentUrlIfAllowed();
                 // Navigate to login page
@@ -311,31 +297,7 @@ const authRedirectInterceptor = (req, next) => {
     }));
 };
 
-class User {
-    id;
-    email;
-    displayName;
-    _refreshToken;
-    constructor(id, email, displayName, _refreshToken) {
-        this.id = id;
-        this.email = email;
-        this.displayName = displayName;
-        this._refreshToken = _refreshToken;
-    }
-    get refreshToken() {
-        return this._refreshToken;
-    }
-    updateRefreshToken(token) {
-        this._refreshToken = token;
-    }
-    clearRefreshToken() {
-        this._refreshToken = undefined;
-    }
-    static create(email, displayName, _password) {
-        const id = Date.now(); // Generate a numeric ID
-        return new User(id, email, displayName);
-    }
-}
+// src/lib/domain/models/auth.ts
 
 // src/lib/domain/models/index.ts
 
@@ -349,7 +311,6 @@ class AuthRepository {
 // src/lib/services/csrf.service.ts
 class CsrfService {
     http = inject(HttpClient);
-    environment = inject(ENVIRONMENT);
     csrfToken = null;
     /**
      * Get CSRF token, fetching it if not available
@@ -359,10 +320,9 @@ class CsrfService {
             return this.csrfToken;
         }
         try {
-            const response = await this.http
-                .get(`${this.environment.apiBaseUrl}/csrf-token`)
-                .toPromise();
-            this.csrfToken = response?.csrfToken || null;
+            this.csrfToken = await firstValueFrom(this.http
+                .get('/csrf-token')
+                .pipe(map(response => response.csrfToken)));
             return this.csrfToken || '';
         }
         catch {
@@ -405,26 +365,22 @@ class AuthHttpRepository extends AuthRepository {
         })));
     }
     register(request) {
-        return from(this.csrfService.getCsrfToken()).pipe(switchMap(csrfToken => this.http
-            .post(`${this.URL}register`, request, {
+        return from(this.csrfService.getCsrfToken()).pipe(switchMap(csrfToken => this.http.post(`${this.URL}register`, request, {
             headers: {
                 'Device-Info': getDeviceInfo(),
                 'X-CSRF-Token': csrfToken,
             },
             withCredentials: true,
-        })
-            .pipe(map(response => new AuthTokens(response.token, response.refreshToken)))));
+        })));
     }
     refreshToken(request) {
-        return from(this.csrfService.getCsrfToken()).pipe(switchMap(csrfToken => this.http
-            .post(`${this.URL}refresh`, request, {
+        return from(this.csrfService.getCsrfToken()).pipe(switchMap(csrfToken => this.http.post(`${this.URL}refresh`, request, {
             headers: {
                 'Device-Info': getDeviceInfo(),
                 'X-CSRF-Token': csrfToken,
             },
             withCredentials: true,
-        })
-            .pipe(map(response => new AuthTokens(response.token, response.refreshToken)))));
+        })));
     }
     logout(email, refreshToken) {
         return from(this.csrfService.getCsrfToken()).pipe(switchMap(csrfToken => this.http.post(`${this.URL}logout`, { email, refreshToken: refreshToken || undefined }, {
@@ -452,6 +408,7 @@ class AuthStore {
     tokenRepository = inject(TokenRepository);
     userRepository = inject(UserRepository);
     router = inject(Router);
+    ngZone = inject(NgZone);
     // Authentication state signals
     _isAuthenticated = signal(false, ...(ngDevMode ? [{ debugName: "_isAuthenticated" }] : []));
     _isLoading = signal(false, ...(ngDevMode ? [{ debugName: "_isLoading" }] : []));
@@ -491,7 +448,7 @@ class AuthStore {
      * Schedule token refresh based on actual expiration time
      */
     scheduleTokenRefresh() {
-        const accessToken = this.tokenRepository.getAccessToken();
+        const accessToken = this.tokenRepository.getToken();
         if (!accessToken) {
             return;
         }
@@ -505,12 +462,16 @@ class AuthStore {
             if (this.refreshTokenTimeout) {
                 clearTimeout(this.refreshTokenTimeout);
             }
-            this.refreshTokenTimeout = window.setTimeout(() => {
-                // Check if refresh is still needed before executing
-                if (this.tokenRepository.needsRefresh()) {
-                    this.refreshToken().subscribe();
-                }
-            }, refreshTime);
+            this.ngZone.runOutsideAngular(() => {
+                this.refreshTokenTimeout = window.setTimeout(() => {
+                    this.ngZone.run(() => {
+                        // Check if refresh is still needed before executing
+                        if (this.tokenRepository.needsRefresh()) {
+                            this.refreshToken().subscribe();
+                        }
+                    });
+                }, refreshTime);
+            });
         }
         catch {
             // Silent fail - token might be invalid
@@ -555,7 +516,7 @@ class AuthStore {
             },
             error: () => {
                 this.refreshInProgress$ = undefined;
-            }
+            },
         }));
         return this.refreshInProgress$;
     }
@@ -584,7 +545,7 @@ class AuthStore {
                 error: () => {
                     // Server logout failed, still clear client-side data for security
                     this.performClientLogout();
-                }
+                },
             });
         }
         else {
@@ -744,7 +705,9 @@ class LogoutUseCase extends BaseUseCase {
         const userData = this.userRepository.getCurrentUser();
         const refreshToken = this.tokenRepository.getRefreshToken();
         if (userData?.email && refreshToken && refreshToken.length > 0) {
-            return this.authRepository.logout(userData.email, refreshToken).pipe(tap(() => this.cleanup()));
+            return this.authRepository
+                .logout(userData.email, refreshToken)
+                .pipe(tap(() => this.cleanup()));
         }
         this.cleanup();
         return of(void 0);
@@ -785,8 +748,10 @@ class LoginComponent {
     // Computed signal to check if footer content exists
     hasFooterContent = computed(() => this.footerContent() !== null, ...(ngDevMode ? [{ debugName: "hasFooterContent" }] : []));
     fb = inject(FormBuilder);
+    authStore = inject(AuthStore);
     loginUseCase = inject(LoginUseCase);
     registerUseCase = inject(RegisterUseCase);
+    loggingService = inject(LoggingService);
     // Angular 20+ signals
     isLoginMode = signal(true, ...(ngDevMode ? [{ debugName: "isLoginMode" }] : []));
     isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
@@ -832,7 +797,7 @@ class LoginComponent {
             const loginRequest = {
                 ...this.signinForm.value,
                 // If showRememberMe is false, default rememberMe to false
-                rememberMe: this.showRememberMe() ? (this.signinForm.value.rememberMe ?? false) : false
+                rememberMe: this.showRememberMe() ? (this.signinForm.value.rememberMe ?? false) : false,
             };
             this.loginUseCase.execute(loginRequest).subscribe({
                 next: () => {
@@ -841,7 +806,7 @@ class LoginComponent {
                 error: error => {
                     this.isLoading.set(false);
                     this.errorMessage.set('Error al iniciar sesión. Verifique sus credenciales.');
-                    console.error('Login error:', error);
+                    this.loggingService.error('Login failed', { error });
                 },
             });
         }
@@ -859,13 +824,13 @@ class LoginComponent {
                 error: error => {
                     this.isLoading.set(false);
                     this.errorMessage.set('Error al registrar usuario. Intente nuevamente.');
-                    console.error('Register error:', error);
+                    this.loggingService.error('Register error', { error });
                 },
             });
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: LoginComponent, isStandalone: true, selector: "acp-login", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showRegisterButton: { classPropertyName: "showRegisterButton", publicName: "showRegisterButton", isSignal: true, isRequired: false, transformFunction: null }, showRememberMe: { classPropertyName: "showRememberMe", publicName: "showRememberMe", isSignal: true, isRequired: false, transformFunction: null }, additionalSigninControls: { classPropertyName: "additionalSigninControls", publicName: "additionalSigninControls", isSignal: true, isRequired: false, transformFunction: null }, additionalSignupControls: { classPropertyName: "additionalSignupControls", publicName: "additionalSignupControls", isSignal: true, isRequired: false, transformFunction: null }, additionalSigninFields: { classPropertyName: "additionalSigninFields", publicName: "additionalSigninFields", isSignal: true, isRequired: false, transformFunction: null }, additionalSignupFields: { classPropertyName: "additionalSignupFields", publicName: "additionalSignupFields", isSignal: true, isRequired: false, transformFunction: null }, footerContent: { classPropertyName: "footerContent", publicName: "footerContent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<section id=\"wrapper\" class=\"d-flex justify-content-center align-items-center\">\n  <mat-card class=\"mat-elevation-z8 p-4 rounded\">\n    <mat-card-header>\n      <mat-card-title class=\"text-center\">{{ title() }}</mat-card-title>\n    </mat-card-header>\n    <mat-card-content>\n      @if (isLoginMode()) {\n      <form [formGroup]=\"signinForm\" (ngSubmit)=\"signIn()\" class=\"d-flex flex-column gap-3\">\n        <mat-form-field class=\"w-100\">\n          <mat-label>Usuario</mat-label>\n          <input matInput type=\"text\" placeholder=\"Ingrese su usuario\" formControlName=\"email\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Contrase\u00F1a</mat-label>\n          <input matInput type=\"password\" placeholder=\"Ingrese su contrase\u00F1a\" formControlName=\"password\" />\n        </mat-form-field>\n\n        <!-- Remember Me checkbox - conditional -->\n        @if (showRememberMe()) {\n        <div class=\"d-flex align-items-center mt-2\">\n          <mat-checkbox formControlName=\"rememberMe\">\n            Recordarme\n          </mat-checkbox>\n        </div>\n        }\n\n        <!-- Additional signin fields -->\n        <ng-container *ngTemplateOutlet=\"additionalSigninFields()\"></ng-container>\n\n        <div class=\"d-flex justify-content-center mt-3\">\n          <button mat-raised-button color=\"primary\" [disabled]=\"!signinForm.valid || isLoading()\" type=\"submit\"\n            class=\"w-100\">\n            @if (isLoading()) {\n            Ingresando...\n            } @else {\n            <ng-container>Ingresar <mat-icon>login</mat-icon></ng-container>\n            }\n          </button>\n        </div>\n\n        <div class=\"text-center mt-2\">\n          @if (showRegisterButton()) {\n          <button mat-button type=\"button\" (click)=\"switchMode()\">\n            \u00BFNo tienes cuenta? Reg\u00EDstrate\n          </button>\n          }\n        </div>\n      </form>\n      } @else {\n      <form [formGroup]=\"signupForm\" (ngSubmit)=\"registerUser()\" class=\"d-flex flex-column gap-3\">\n        <mat-form-field class=\"w-100\">\n          <mat-label>Nombre</mat-label>\n          <input matInput type=\"text\" placeholder=\"Ingrese su nombre\" formControlName=\"displayName\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Email</mat-label>\n          <input matInput type=\"email\" placeholder=\"Ingrese su email\" formControlName=\"email\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Contrase\u00F1a</mat-label>\n          <input matInput type=\"password\" placeholder=\"Ingrese su contrase\u00F1a\" formControlName=\"password\" />\n        </mat-form-field>\n\n        <!-- Additional signup fields -->\n        <ng-container *ngTemplateOutlet=\"additionalSignupFields()\"></ng-container>\n\n        <div class=\"d-flex justify-content-center mt-3\">\n          <button mat-raised-button color=\"primary\" [disabled]=\"!signupForm.valid || isLoading()\" type=\"submit\"\n            class=\"w-100\">\n            @if (isLoading()) {\n            Registrando...\n            } @else {\n            <ng-container>Registrarse <mat-icon>person_add</mat-icon></ng-container>\n            }\n          </button>\n        </div>\n\n        <div class=\"text-center mt-2\">\n          <button mat-button type=\"button\" (click)=\"switchMode()\">\u00BFYa tienes cuenta? Inicia sesi\u00F3n</button>\n        </div>\n      </form>\n      }\n      @if (errorMessage()) {\n      <div class=\"alert alert-danger mt-3\" role=\"alert\">\n        {{ errorMessage() }}\n      </div>\n      }\n    </mat-card-content>\n    @if (hasFooterContent()) {\n    <mat-card-footer>\n      <ng-container *ngTemplateOutlet=\"footerContent()\"></ng-container>\n    </mat-card-footer>\n    }\n  </mat-card>\n</section>\n", styles: ["#wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--mdc-theme-primary, #5c5f5c) 0%,var(--mdc-theme-secondary, #79747e) 100%);padding:20px}mat-card{width:100%;max-width:400px;border-radius:12px;box-shadow:0 8px 32px #0000001a}mat-card-header{text-align:center;margin-bottom:20px}mat-card-title{font-size:24px;font-weight:600;color:var(--mdc-theme-on-surface, #1c1b1f)}mat-form-field{width:100%}.w-100{width:100%}.d-flex{display:flex}.flex-column{flex-direction:column}.gap-3{gap:12px}.justify-content-center{justify-content:center}.align-items-center{align-items:center}.mt-3{margin-top:12px}.mt-2{margin-top:8px}.text-center{text-align:center}.p-4{padding:16px}.rounded{border-radius:12px}.alert-danger{background-color:var(--mdc-theme-error-container, #ffdad6);border-color:var(--mdc-theme-error, #ba1a1a);color:var(--mdc-theme-on-error-container, #410002);padding:12px;border-radius:4px;border:1px solid transparent}.row{display:flex;flex-wrap:wrap;margin:0 -15px}.col-xs-12,.col-sm-12,.col-md-12{flex:0 0 100%;max-width:100%;padding:0 15px}.m-t-10{margin-top:10px}.social{display:flex;justify-content:center}mat-button{border-radius:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatCardFooter, selector: "mat-card-footer" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.2", type: LoginComponent, isStandalone: true, selector: "acp-login", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showRegisterButton: { classPropertyName: "showRegisterButton", publicName: "showRegisterButton", isSignal: true, isRequired: false, transformFunction: null }, showRememberMe: { classPropertyName: "showRememberMe", publicName: "showRememberMe", isSignal: true, isRequired: false, transformFunction: null }, additionalSigninControls: { classPropertyName: "additionalSigninControls", publicName: "additionalSigninControls", isSignal: true, isRequired: false, transformFunction: null }, additionalSignupControls: { classPropertyName: "additionalSignupControls", publicName: "additionalSignupControls", isSignal: true, isRequired: false, transformFunction: null }, additionalSigninFields: { classPropertyName: "additionalSigninFields", publicName: "additionalSigninFields", isSignal: true, isRequired: false, transformFunction: null }, additionalSignupFields: { classPropertyName: "additionalSignupFields", publicName: "additionalSignupFields", isSignal: true, isRequired: false, transformFunction: null }, footerContent: { classPropertyName: "footerContent", publicName: "footerContent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<mat-card class=\"mat-elevation-z8 p-4 rounded\">\n  <mat-card-header>\n    <mat-card-title class=\"text-center\">{{ title() }}</mat-card-title>\n  </mat-card-header>\n  <mat-card-content>\n    @if (isLoginMode()) {\n      <form [formGroup]=\"signinForm\" (ngSubmit)=\"signIn()\" class=\"d-flex flex-column gap-3\">\n        <mat-form-field class=\"w-100\">\n          <mat-label>Usuario</mat-label>\n          <input matInput type=\"text\" placeholder=\"Ingrese su usuario\" formControlName=\"email\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Contrase\u00F1a</mat-label>\n          <input\n            matInput\n            type=\"password\"\n            placeholder=\"Ingrese su contrase\u00F1a\"\n            formControlName=\"password\"\n            autocomplete=\"current-password\"\n          />\n        </mat-form-field>\n\n        <!-- Remember Me checkbox - conditional -->\n        @if (showRememberMe()) {\n          <div class=\"d-flex align-items-center mt-2\">\n            <mat-checkbox formControlName=\"rememberMe\"> Recordarme </mat-checkbox>\n          </div>\n        }\n\n        <!-- Additional signin fields -->\n        <ng-container *ngTemplateOutlet=\"additionalSigninFields()\"></ng-container>\n\n        <div class=\"d-flex justify-content-center mt-3\">\n          <button\n            mat-raised-button\n            color=\"primary\"\n            [disabled]=\"!signinForm.valid || isLoading()\"\n            type=\"submit\"\n            class=\"w-100\"\n          >\n            @if (isLoading()) {\n              Ingresando...\n            } @else {\n              <ng-container>Ingresar <mat-icon>login</mat-icon></ng-container>\n            }\n          </button>\n        </div>\n\n        <div class=\"text-center mt-2\">\n          @if (showRegisterButton()) {\n            <button mat-button type=\"button\" (click)=\"switchMode()\">\n              \u00BFNo tienes cuenta? Reg\u00EDstrate\n            </button>\n          }\n        </div>\n      </form>\n    } @else {\n      <form [formGroup]=\"signupForm\" (ngSubmit)=\"registerUser()\" class=\"d-flex flex-column gap-3\">\n        <mat-form-field class=\"w-100\">\n          <mat-label>Nombre</mat-label>\n          <input\n            matInput\n            type=\"text\"\n            placeholder=\"Ingrese su nombre\"\n            formControlName=\"displayName\"\n          />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Email</mat-label>\n          <input matInput type=\"email\" placeholder=\"Ingrese su email\" formControlName=\"email\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Contrase\u00F1a</mat-label>\n          <input\n            matInput\n            type=\"password\"\n            placeholder=\"Ingrese su contrase\u00F1a\"\n            formControlName=\"password\"\n            autocomplete=\"new-password\"\n          />\n        </mat-form-field>\n\n        <!-- Additional signup fields -->\n        <ng-container *ngTemplateOutlet=\"additionalSignupFields()\"></ng-container>\n\n        <div class=\"d-flex justify-content-center mt-3\">\n          <button\n            mat-raised-button\n            color=\"primary\"\n            [disabled]=\"!signupForm.valid || isLoading()\"\n            type=\"submit\"\n            class=\"w-100\"\n          >\n            @if (isLoading()) {\n              Registrando...\n            } @else {\n              <ng-container>Registrarse <mat-icon>person_add</mat-icon></ng-container>\n            }\n          </button>\n        </div>\n\n        <div class=\"text-center mt-2\">\n          <button mat-button type=\"button\" (click)=\"switchMode()\">\n            \u00BFYa tienes cuenta? Inicia sesi\u00F3n\n          </button>\n        </div>\n      </form>\n    }\n    @if (errorMessage()) {\n      <div class=\"alert alert-danger mt-3\" role=\"alert\">\n        {{ errorMessage() }}\n      </div>\n    }\n  </mat-card-content>\n  @if (hasFooterContent()) {\n    <mat-card-footer>\n      <ng-container *ngTemplateOutlet=\"footerContent()\"></ng-container>\n    </mat-card-footer>\n  }\n</mat-card>\n", styles: [":host{display:flex;justify-content:center;align-items:center;min-height:100vh;width:100%;padding:16px;box-sizing:border-box}mat-card{width:100%;max-width:400px;border-radius:12px;box-shadow:0 8px 32px #0000001a}mat-card-header{text-align:center;margin-bottom:20px}mat-card-title{font-size:24px;font-weight:600;color:var(--mat-sys-on-surface, #1c1b1f)}mat-form-field{width:100%}.w-100{width:100%}.d-flex{display:flex}.flex-column{flex-direction:column}.gap-3{gap:12px}.justify-content-center{justify-content:center}.align-items-center{align-items:center}.mt-3{margin-top:12px}.mt-2{margin-top:8px}.text-center{text-align:center}.p-4{padding:16px}.rounded{border-radius:12px}.alert-danger{background-color:var(--mat-sys-error-container, #ffdad6);border-color:var(--mat-sys-error, #ba1a1a);color:var(--mat-sys-on-error-container, #410002);padding:12px;border-radius:4px;border:1px solid transparent}.row{display:flex;flex-wrap:wrap;margin:0 -15px}.col-xs-12,.col-sm-12,.col-md-12{flex:0 0 100%;max-width:100%;padding:0 15px}.m-t-10{margin-top:10px}.social{display:flex;justify-content:center}mat-button{border-radius:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatCardFooter, selector: "mat-card-footer" }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
@@ -884,7 +849,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.2", ngImpor
                         MatCardFooter,
                         MatAnchor,
                         MatCheckbox,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section id=\"wrapper\" class=\"d-flex justify-content-center align-items-center\">\n  <mat-card class=\"mat-elevation-z8 p-4 rounded\">\n    <mat-card-header>\n      <mat-card-title class=\"text-center\">{{ title() }}</mat-card-title>\n    </mat-card-header>\n    <mat-card-content>\n      @if (isLoginMode()) {\n      <form [formGroup]=\"signinForm\" (ngSubmit)=\"signIn()\" class=\"d-flex flex-column gap-3\">\n        <mat-form-field class=\"w-100\">\n          <mat-label>Usuario</mat-label>\n          <input matInput type=\"text\" placeholder=\"Ingrese su usuario\" formControlName=\"email\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Contrase\u00F1a</mat-label>\n          <input matInput type=\"password\" placeholder=\"Ingrese su contrase\u00F1a\" formControlName=\"password\" />\n        </mat-form-field>\n\n        <!-- Remember Me checkbox - conditional -->\n        @if (showRememberMe()) {\n        <div class=\"d-flex align-items-center mt-2\">\n          <mat-checkbox formControlName=\"rememberMe\">\n            Recordarme\n          </mat-checkbox>\n        </div>\n        }\n\n        <!-- Additional signin fields -->\n        <ng-container *ngTemplateOutlet=\"additionalSigninFields()\"></ng-container>\n\n        <div class=\"d-flex justify-content-center mt-3\">\n          <button mat-raised-button color=\"primary\" [disabled]=\"!signinForm.valid || isLoading()\" type=\"submit\"\n            class=\"w-100\">\n            @if (isLoading()) {\n            Ingresando...\n            } @else {\n            <ng-container>Ingresar <mat-icon>login</mat-icon></ng-container>\n            }\n          </button>\n        </div>\n\n        <div class=\"text-center mt-2\">\n          @if (showRegisterButton()) {\n          <button mat-button type=\"button\" (click)=\"switchMode()\">\n            \u00BFNo tienes cuenta? Reg\u00EDstrate\n          </button>\n          }\n        </div>\n      </form>\n      } @else {\n      <form [formGroup]=\"signupForm\" (ngSubmit)=\"registerUser()\" class=\"d-flex flex-column gap-3\">\n        <mat-form-field class=\"w-100\">\n          <mat-label>Nombre</mat-label>\n          <input matInput type=\"text\" placeholder=\"Ingrese su nombre\" formControlName=\"displayName\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Email</mat-label>\n          <input matInput type=\"email\" placeholder=\"Ingrese su email\" formControlName=\"email\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Contrase\u00F1a</mat-label>\n          <input matInput type=\"password\" placeholder=\"Ingrese su contrase\u00F1a\" formControlName=\"password\" />\n        </mat-form-field>\n\n        <!-- Additional signup fields -->\n        <ng-container *ngTemplateOutlet=\"additionalSignupFields()\"></ng-container>\n\n        <div class=\"d-flex justify-content-center mt-3\">\n          <button mat-raised-button color=\"primary\" [disabled]=\"!signupForm.valid || isLoading()\" type=\"submit\"\n            class=\"w-100\">\n            @if (isLoading()) {\n            Registrando...\n            } @else {\n            <ng-container>Registrarse <mat-icon>person_add</mat-icon></ng-container>\n            }\n          </button>\n        </div>\n\n        <div class=\"text-center mt-2\">\n          <button mat-button type=\"button\" (click)=\"switchMode()\">\u00BFYa tienes cuenta? Inicia sesi\u00F3n</button>\n        </div>\n      </form>\n      }\n      @if (errorMessage()) {\n      <div class=\"alert alert-danger mt-3\" role=\"alert\">\n        {{ errorMessage() }}\n      </div>\n      }\n    </mat-card-content>\n    @if (hasFooterContent()) {\n    <mat-card-footer>\n      <ng-container *ngTemplateOutlet=\"footerContent()\"></ng-container>\n    </mat-card-footer>\n    }\n  </mat-card>\n</section>\n", styles: ["#wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--mdc-theme-primary, #5c5f5c) 0%,var(--mdc-theme-secondary, #79747e) 100%);padding:20px}mat-card{width:100%;max-width:400px;border-radius:12px;box-shadow:0 8px 32px #0000001a}mat-card-header{text-align:center;margin-bottom:20px}mat-card-title{font-size:24px;font-weight:600;color:var(--mdc-theme-on-surface, #1c1b1f)}mat-form-field{width:100%}.w-100{width:100%}.d-flex{display:flex}.flex-column{flex-direction:column}.gap-3{gap:12px}.justify-content-center{justify-content:center}.align-items-center{align-items:center}.mt-3{margin-top:12px}.mt-2{margin-top:8px}.text-center{text-align:center}.p-4{padding:16px}.rounded{border-radius:12px}.alert-danger{background-color:var(--mdc-theme-error-container, #ffdad6);border-color:var(--mdc-theme-error, #ba1a1a);color:var(--mdc-theme-on-error-container, #410002);padding:12px;border-radius:4px;border:1px solid transparent}.row{display:flex;flex-wrap:wrap;margin:0 -15px}.col-xs-12,.col-sm-12,.col-md-12{flex:0 0 100%;max-width:100%;padding:0 15px}.m-t-10{margin-top:10px}.social{display:flex;justify-content:center}mat-button{border-radius:8px}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<mat-card class=\"mat-elevation-z8 p-4 rounded\">\n  <mat-card-header>\n    <mat-card-title class=\"text-center\">{{ title() }}</mat-card-title>\n  </mat-card-header>\n  <mat-card-content>\n    @if (isLoginMode()) {\n      <form [formGroup]=\"signinForm\" (ngSubmit)=\"signIn()\" class=\"d-flex flex-column gap-3\">\n        <mat-form-field class=\"w-100\">\n          <mat-label>Usuario</mat-label>\n          <input matInput type=\"text\" placeholder=\"Ingrese su usuario\" formControlName=\"email\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Contrase\u00F1a</mat-label>\n          <input\n            matInput\n            type=\"password\"\n            placeholder=\"Ingrese su contrase\u00F1a\"\n            formControlName=\"password\"\n            autocomplete=\"current-password\"\n          />\n        </mat-form-field>\n\n        <!-- Remember Me checkbox - conditional -->\n        @if (showRememberMe()) {\n          <div class=\"d-flex align-items-center mt-2\">\n            <mat-checkbox formControlName=\"rememberMe\"> Recordarme </mat-checkbox>\n          </div>\n        }\n\n        <!-- Additional signin fields -->\n        <ng-container *ngTemplateOutlet=\"additionalSigninFields()\"></ng-container>\n\n        <div class=\"d-flex justify-content-center mt-3\">\n          <button\n            mat-raised-button\n            color=\"primary\"\n            [disabled]=\"!signinForm.valid || isLoading()\"\n            type=\"submit\"\n            class=\"w-100\"\n          >\n            @if (isLoading()) {\n              Ingresando...\n            } @else {\n              <ng-container>Ingresar <mat-icon>login</mat-icon></ng-container>\n            }\n          </button>\n        </div>\n\n        <div class=\"text-center mt-2\">\n          @if (showRegisterButton()) {\n            <button mat-button type=\"button\" (click)=\"switchMode()\">\n              \u00BFNo tienes cuenta? Reg\u00EDstrate\n            </button>\n          }\n        </div>\n      </form>\n    } @else {\n      <form [formGroup]=\"signupForm\" (ngSubmit)=\"registerUser()\" class=\"d-flex flex-column gap-3\">\n        <mat-form-field class=\"w-100\">\n          <mat-label>Nombre</mat-label>\n          <input\n            matInput\n            type=\"text\"\n            placeholder=\"Ingrese su nombre\"\n            formControlName=\"displayName\"\n          />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Email</mat-label>\n          <input matInput type=\"email\" placeholder=\"Ingrese su email\" formControlName=\"email\" />\n        </mat-form-field>\n\n        <mat-form-field class=\"w-100\">\n          <mat-label>Contrase\u00F1a</mat-label>\n          <input\n            matInput\n            type=\"password\"\n            placeholder=\"Ingrese su contrase\u00F1a\"\n            formControlName=\"password\"\n            autocomplete=\"new-password\"\n          />\n        </mat-form-field>\n\n        <!-- Additional signup fields -->\n        <ng-container *ngTemplateOutlet=\"additionalSignupFields()\"></ng-container>\n\n        <div class=\"d-flex justify-content-center mt-3\">\n          <button\n            mat-raised-button\n            color=\"primary\"\n            [disabled]=\"!signupForm.valid || isLoading()\"\n            type=\"submit\"\n            class=\"w-100\"\n          >\n            @if (isLoading()) {\n              Registrando...\n            } @else {\n              <ng-container>Registrarse <mat-icon>person_add</mat-icon></ng-container>\n            }\n          </button>\n        </div>\n\n        <div class=\"text-center mt-2\">\n          <button mat-button type=\"button\" (click)=\"switchMode()\">\n            \u00BFYa tienes cuenta? Inicia sesi\u00F3n\n          </button>\n        </div>\n      </form>\n    }\n    @if (errorMessage()) {\n      <div class=\"alert alert-danger mt-3\" role=\"alert\">\n        {{ errorMessage() }}\n      </div>\n    }\n  </mat-card-content>\n  @if (hasFooterContent()) {\n    <mat-card-footer>\n      <ng-container *ngTemplateOutlet=\"footerContent()\"></ng-container>\n    </mat-card-footer>\n  }\n</mat-card>\n", styles: [":host{display:flex;justify-content:center;align-items:center;min-height:100vh;width:100%;padding:16px;box-sizing:border-box}mat-card{width:100%;max-width:400px;border-radius:12px;box-shadow:0 8px 32px #0000001a}mat-card-header{text-align:center;margin-bottom:20px}mat-card-title{font-size:24px;font-weight:600;color:var(--mat-sys-on-surface, #1c1b1f)}mat-form-field{width:100%}.w-100{width:100%}.d-flex{display:flex}.flex-column{flex-direction:column}.gap-3{gap:12px}.justify-content-center{justify-content:center}.align-items-center{align-items:center}.mt-3{margin-top:12px}.mt-2{margin-top:8px}.text-center{text-align:center}.p-4{padding:16px}.rounded{border-radius:12px}.alert-danger{background-color:var(--mat-sys-error-container, #ffdad6);border-color:var(--mat-sys-error, #ba1a1a);color:var(--mat-sys-on-error-container, #410002);padding:12px;border-radius:4px;border:1px solid transparent}.row{display:flex;flex-wrap:wrap;margin:0 -15px}.col-xs-12,.col-sm-12,.col-md-12{flex:0 0 100%;max-width:100%;padding:0 15px}.m-t-10{margin-top:10px}.social{display:flex;justify-content:center}mat-button{border-radius:8px}\n"] }]
         }], ctorParameters: () => [] });
 
 // src/lib/presentation/components/index.ts
@@ -896,6 +861,10 @@ const authProviders = [
         provide: AuthRepository,
         useClass: AuthHttpRepository,
     },
+    {
+        provide: TOKEN_PROVIDER,
+        useClass: TokenRepository,
+    },
 ];
 
 // src/lib/providers/index.ts
@@ -904,5 +873,5 @@ const authProviders = [
  * Generated bundle index. Do not edit.
  */
 
-export { AuthHttpRepository, AuthRepository, AuthStore, AuthTokenService, LoginComponent, LoginUseCase, LogoutUseCase, RefreshTokenUseCase, RegisterUseCase, TokenRepository, UrlRedirectService, User, authGuard, authProviders, authRedirectInterceptor };
+export { AuthHttpRepository, AuthRepository, AuthStore, LoginComponent, LoginUseCase, LogoutUseCase, RefreshTokenUseCase, RegisterUseCase, TokenRepository, UrlRedirectService, authGuard, authProviders, authRedirectInterceptor };
 //# sourceMappingURL=acontplus-ng-auth.mjs.map