@hichchi/ngx-auth 0.0.1-alpha.0

package/fesm2022/hichchi-ngx-auth.mjs

@@ -0,0 +1,1629 @@
+import * as i0 from '@angular/core';
+import { Injectable, Inject, computed, inject, input, output, signal, effect, Component, TemplateRef, ViewContainerRef, Directive, NgModule } from '@angular/core';
+import * as i1$1 from '@angular/forms';
+import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { AuthEndpoint, AuthField, isRoleObject, AuthErrorResponseCode } from '@hichchi/nest-connector/auth';
+import * as i1 from '@angular/common/http';
+import { provideHttpClient } from '@angular/common/http';
+import { take, map, tap, catchError, EMPTY, ReplaySubject, throwError, switchMap, filter } from 'rxjs';
+import { Endpoint, HttpClientErrorStatus } from '@hichchi/nest-connector';
+import { toFirstCase } from '@hichchi/utils';
+import { validatedFormData } from '@hichchi/ngx-utils';
+import { signalStore, withState, withComputed, withMethods, patchState } from '@ngrx/signals';
+import { withStorageSync } from '@angular-architects/ngrx-toolkit';
+import { Router } from '@angular/router';
+import * as i3 from '@hichchi/ngx-ui';
+import { ButtonComponent, HcCardComponent, HcSeparatorComponent } from '@hichchi/ngx-ui';
+import { CommonModule } from '@angular/common';
+
+/**
+ * Injection token for authentication configuration
+ *
+ * This constant defines the injection token used by Angular's dependency injection
+ * system to provide authentication configuration throughout the ngx-auth module.
+ * It allows the AuthConfig interface to be injected into services and components
+ * that need access to authentication settings.
+ *
+ * The token is used internally by the NgxHichchiAuthModule.forRoot() method to
+ * register the authentication configuration as a provider, making it available
+ * for injection in services like AuthService.
+ *
+ * This follows Angular's recommended pattern for providing configuration objects
+ * to libraries and modules, ensuring type safety and proper dependency injection.
+ *
+ * @example
+ * ```typescript
+ * // Used internally by the module to provide configuration
+ * @NgModule({
+ *   providers: [
+ *     { provide: AUTH_CONFIG, useValue: config },
+ *     AuthService
+ *   ]
+ * })
+ * export class NgxHichchiAuthModule {
+ *   static forRoot(config: AuthConfig): ModuleWithProviders<NgxHichchiAuthModule> {
+ *     return {
+ *       ngModule: NgxHichchiAuthModule,
+ *       providers: [
+ *         { provide: AUTH_CONFIG, useValue: config },
+ *         provideHttpClient(),
+ *         AuthService
+ *       ]
+ *     };
+ *   }
+ * }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Injecting the configuration in a service
+ * @Injectable()
+ * export class AuthService {
+ *   constructor(
+ *     @Inject(AUTH_CONFIG) private readonly config: AuthConfig
+ *   ) {
+ *     console.log('API Base URL:', this.config.apiBaseURL);
+ *     console.log('Auth Field:', this.config.authField);
+ *   }
+ * }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Using in a component (though typically not recommended)
+ * @Component({
+ *   selector: 'app-auth-info',
+ *   template: `<p>API URL: {{ apiUrl }}</p>`
+ * })
+ * export class AuthInfoComponent {
+ *   apiUrl: string;
+ *
+ *   constructor(@Inject(AUTH_CONFIG) private config: AuthConfig) {
+ *     this.apiUrl = config.apiBaseURL;
+ *   }
+ * }
+ * ```
+ *
+ * @see {@link AuthConfig} Interface that defines the structure of the configuration object
+ * @see {@link NgxHichchiAuthModule} Module that uses this token to provide configuration
+ * @see {@link AuthService} Service that injects this configuration
+ */
+const AUTH_CONFIG = "AUTH_CONFIG";
+
+/**
+ * Width of the Google OAuth authentication popup window in pixels
+ *
+ * This constant defines the width of the popup window that opens during Google OAuth
+ * authentication. The width is optimized to provide a good user experience while
+ * ensuring the Google sign-in interface is fully visible and usable.
+ *
+ * @example
+ * ```typescript
+ * // Used internally in AuthService.googleSignIn()
+ * const popup = window.open(
+ *   googleAuthUrl,
+ *   'google-login-popup',
+ *   `width=${GOOGLE_AUTH_POPUP_WIDTH}, height=${GOOGLE_AUTH_POPUP_HEIGHT}`
+ * );
+ * ```
+ *
+ * @see {@link AuthService.googleSignIn} Method that uses this constant
+ * @see {@link GOOGLE_AUTH_POPUP_HEIGHT} Related constant for popup height
+ */
+const GOOGLE_AUTH_POPUP_WIDTH = 500;
+/**
+ * Height of the Google OAuth authentication popup window in pixels
+ *
+ * This constant defines the height of the popup window that opens during Google OAuth
+ * authentication. The height is optimized to accommodate the Google sign-in interface
+ * and provide sufficient space for user interaction.
+ *
+ * @example
+ * ```typescript
+ * // Used internally in AuthService.googleSignIn()
+ * const popup = window.open(
+ *   googleAuthUrl,
+ *   'google-login-popup',
+ *   `width=${GOOGLE_AUTH_POPUP_WIDTH}, height=${GOOGLE_AUTH_POPUP_HEIGHT}`
+ * );
+ * ```
+ *
+ * @see {@link AuthService.googleSignIn} Method that uses this constant
+ * @see {@link GOOGLE_AUTH_POPUP_WIDTH} Related constant for popup width
+ */
+const GOOGLE_AUTH_POPUP_HEIGHT = 600;
+/**
+ * Polling interval for checking Google OAuth popup status in milliseconds
+ *
+ * This constant defines how frequently (in milliseconds) the AuthService checks
+ * the status of the Google OAuth popup window. The polling is used to detect
+ * when the authentication process is complete or if the user has closed the popup.
+ *
+ * A shorter interval provides more responsive detection but uses more CPU resources.
+ * The current value of 100ms provides a good balance between responsiveness and
+ * performance.
+ *
+ * @example
+ * ```typescript
+ * // Used internally in AuthService.googleSignIn()
+ * const interval = setInterval(() => {
+ *   // Check popup status
+ *   if (popup?.closed) {
+ *     clearInterval(interval);
+ *   }
+ *   // Check for authentication completion
+ * }, POPUP_POLLING_INTERVAL_MS);
+ * ```
+ *
+ * @see {@link AuthService.googleSignIn} Method that uses this constant for popup polling
+ */
+const POPUP_POLLING_INTERVAL_MS = 100;
+/**
+ * Key used to store authentication guard options in route data
+ *
+ * This constant defines the property name used to store authentication guard
+ * configuration in Angular route data. It allows routes to specify custom
+ * authentication requirements and behaviors.
+ *
+ * @example
+ * ```typescript
+ * // In route configuration
+ * const routes: Routes = [
+ *   {
+ *     path: 'admin',
+ *     component: AdminComponent,
+ *     canActivate: [AuthGuard],
+ *     data: {
+ *       [AUTH_GUARD_OPTIONS_KEY]: {
+ *         requiredPermissions: ['admin.read'],
+ *         redirectTo: '/unauthorized'
+ *       }
+ *     }
+ *   }
+ * ];
+ * ```
+ *
+ * @see {@link AuthGuardOption} Interface defining the structure of guard options
+ */
+const AUTH_GUARD_OPTIONS_KEY = "authGuardOptions";
+
+// noinspection JSUnusedGlobalSymbols
+/**
+ * Angular authentication service for client-side authentication operations
+ *
+ * This service provides methods for handling authentication operations in Angular applications,
+ * including user sign-in, sign-up, Google OAuth authentication, token management, and sign-out.
+ * It communicates with the backend authentication API and handles the client-side aspects
+ * of the authentication flow.
+ *
+ * The service is configured through the AuthConfig interface and automatically handles
+ * token expiration date parsing and HTTP request management. It integrates seamlessly
+ * with the @hichchi/nest-auth backend module.
+ *
+ * Key features:
+ * - Local authentication (email/username and password)
+ * - Google OAuth authentication with popup flow
+ * - Token refresh functionality
+ * - User registration
+ * - Automatic token expiration handling
+ * - RESTful API communication
+ *
+ * @example
+ * ```typescript
+ * // In a component
+ * export class LoginComponent {
+ *   constructor(private authService: AuthService) {}
+ *
+ *   async signIn() {
+ *     try {
+ *       const response = await this.authService.signIn({
+ *         email: 'user@example.com',
+ *         password: 'password123'
+ *       }).toPromise();
+ *       console.log('Signed in:', response.user);
+ *     } catch (error) {
+ *       console.error('Sign in failed:', error);
+ *     }
+ *   }
+ * }
+ * ```
+ *
+ * @see {@link AuthConfig} Configuration interface for the authentication service
+ * @see {@link NgxHichchiAuthModule} Module that provides this service
+ * @see {@link AuthState} State management service for authentication
+ * @see {@link AuthResponse} Response interface for authentication operations
+ */
+class AuthService {
+    http;
+    config;
+    /**
+     * Creates an instance of AuthService
+     *
+     * @param http - Http client
+     * @param config - The authentication configuration injected from AUTH_CONFIG token
+     *
+     * @see {@link AUTH_CONFIG} Injection token for authentication configuration
+     * @see {@link AuthConfig} Interface defining the configuration structure
+     */
+    constructor(http, config) {
+        this.http = http;
+        this.config = config;
+    }
+    /**
+     * Authenticates a user with email/username and password
+     *
+     * This method sends a sign-in request to the backend authentication API with the provided
+     * credentials. It automatically converts the token expiration timestamps from the response
+     * into JavaScript Date objects for easier handling in the client application.
+     *
+     * @param dto - The sign-in data containing user credentials
+     * @returns Observable that emits the authentication response with user data and tokens
+     *
+     * @example
+     * ```typescript
+     * // Sign in with email and password
+     * this.authService.signIn({
+     *   email: 'user@example.com',
+     *   password: 'password123'
+     * }).subscribe({
+     *   next: (response) => {
+     *     console.log('User signed in:', response.user);
+     *     console.log('Access token expires:', response.accessTokenExpiresOn);
+     *   },
+     *   error: (error) => {
+     *     console.error('Sign in failed:', error);
+     *   }
+     * });
+     * ```
+     *
+     * @see {@link SignInBody} Interface for sign-in request data
+     * @see {@link AuthResponse} Interface for authentication response
+     * @see {@link AuthEndpoint.SIGN_IN} Backend endpoint for user authentication
+     */
+    signIn(dto) {
+        return this.http.post(`${Endpoint.AUTH}/${AuthEndpoint.SIGN_IN}`, dto).pipe(take(1), map(res => ({
+            ...res,
+            accessTokenExpiresOn: new Date(res.accessTokenExpiresOn),
+            refreshTokenExpiresOn: new Date(res.refreshTokenExpiresOn),
+        })));
+    }
+    /**
+     * Initiates Google OAuth authentication using a popup window
+     *
+     * This method opens a popup window that navigates to the Google OAuth authentication
+     * endpoint. It handles the OAuth flow by monitoring the popup window and extracting
+     * the access token from the callback URL when authentication is successful.
+     *
+     * The popup is automatically positioned in the center of the screen and has predefined
+     * dimensions for optimal user experience. The method polls the popup window to detect
+     * when authentication is complete or if the user closes the popup.
+     *
+     * @returns Promise that resolves with the access token when authentication succeeds
+     *
+     * @throws {Error} If authentication fails or the popup is blocked
+     *
+     * @example
+     * ```typescript
+     * // Initiate Google sign-in
+     * try {
+     *   const accessToken = await this.authService.googleSignIn();
+     *   console.log('Google authentication successful:', accessToken);
+     *
+     *   // Use the token to get full auth response
+     *   const authResponse = await this.authService.getAuthResponse(accessToken).toPromise();
+     *   console.log('User data:', authResponse.user);
+     * } catch (error) {
+     *   console.error('Google authentication failed:', error);
+     * }
+     * ```
+     *
+     * @example
+     * ```typescript
+     * // In a component with error handling
+     * async signInWithGoogle() {
+     *   try {
+     *     const token = await this.authService.googleSignIn();
+     *     // Handle successful authentication
+     *     this.router.navigate(['/dashboard']);
+     *   } catch (error) {
+     *     if (error.message.includes('popup')) {
+     *       this.showError('Please allow popups for Google sign-in');
+     *     } else {
+     *       this.showError('Google sign-in failed. Please try again.');
+     *     }
+     *   }
+     * }
+     * ```
+     *
+     * @see {@link getAuthResponse} Method to get full authentication response using the access token
+     * @see {@link AuthEndpoint.GOOGLE_SIGN_IN} Backend endpoint for Google OAuth initiation
+     * @see {@link GOOGLE_AUTH_POPUP_WIDTH} Constant defining popup window width
+     * @see {@link GOOGLE_AUTH_POPUP_HEIGHT} Constant defining popup window height
+     * @see {@link POPUP_POLLING_INTERVAL_MS} Constant defining popup polling interval
+     */
+    googleSignIn() {
+        return new Promise((resolve, reject) => {
+            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+            const left = (window.screen.width - GOOGLE_AUTH_POPUP_WIDTH) / 2;
+            // eslint-disable-next-line @typescript-eslint/no-magic-numbers
+            const top = (window.screen.height - GOOGLE_AUTH_POPUP_HEIGHT) / 2;
+            const popup = window.open(`${this.config.apiBaseURL}/${Endpoint.AUTH}/${AuthEndpoint.GOOGLE_SIGN_IN}?redirectUrl=${window.location.origin}`, "google-login-popup", 
+            // eslint-disable-next-line prefer-template
+            "resizable=no, location=no, toolbar=false, width=" +
+                GOOGLE_AUTH_POPUP_WIDTH +
+                ", height=" +
+                GOOGLE_AUTH_POPUP_HEIGHT +
+                ", top=" +
+                top +
+                ", left=" +
+                left);
+            const interval = setInterval(() => {
+                if (popup?.closed) {
+                    clearInterval(interval);
+                }
+                try {
+                    if (popup?.location.href !== "about:blank" && popup?.location?.search?.includes("?token=e")) {
+                        const token = popup.location.search.split("=")[1];
+                        clearInterval(interval);
+                        popup.close();
+                        resolve(token);
+                    }
+                }
+                catch (error) {
+                    if (!String(error).includes("SecurityError")) {
+                        clearInterval(interval);
+                        reject(error);
+                    }
+                }
+            }, POPUP_POLLING_INTERVAL_MS);
+        });
+    }
+    /**
+     * Retrieves the complete authentication response using an access token
+     *
+     * This method exchanges an access token for a complete authentication response
+     * containing user information and token details. It's typically used after
+     * Google OAuth authentication to get the full user profile and session data.
+     *
+     * The method automatically converts token expiration timestamps to JavaScript
+     * Date objects for easier handling in the client application.
+     *
+     * @param accessToken - The access token to exchange for authentication response
+     * @returns Observable that emits the complete authentication response
+     *
+     * @example
+     * ```typescript
+     * // Get auth response after Google sign-in
+     * const accessToken = await this.authService.googleSignIn();
+     * this.authService.getAuthResponse(accessToken).subscribe({
+     *   next: (response) => {
+     *     console.log('User:', response.user);
+     *     console.log('Tokens:', {
+     *       access: response.accessToken,
+     *       refresh: response.refreshToken
+     *     });
+     *   },
+     *   error: (error) => {
+     *     console.error('Failed to get auth response:', error);
+     *   }
+     * });
+     * ```
+     *
+     * @see {@link AccessToken} Type representing access tokens
+     * @see {@link AuthResponse} Interface for complete authentication response
+     * @see {@link AuthEndpoint.GET_AUTH_RESPONSE} Backend endpoint for token exchange
+     * @see {@link googleSignIn} Method that provides access tokens for this operation
+     */
+    getAuthResponse(accessToken) {
+        return this.http
+            .post(`${Endpoint.AUTH}/${AuthEndpoint.GET_AUTH_RESPONSE}`, {
+            accessToken,
+        })
+            .pipe(take(1), map(res => ({
+            ...res,
+            accessTokenExpiresOn: new Date(res.accessTokenExpiresOn),
+            refreshTokenExpiresOn: new Date(res.refreshTokenExpiresOn),
+        })));
+    }
+    /**
+     * Registers a new user account
+     *
+     * This method sends a registration request to the backend API with the provided
+     * user information. It creates a new user account and returns the user data
+     * upon successful registration.
+     *
+     * Note that this method only creates the user account and does not automatically
+     * sign the user in. After successful registration, you may need to call signIn
+     * or handle email verification depending on your application's configuration.
+     *
+     * @param dto - The sign-up data containing user registration information
+     * @returns Observable that emits the newly created user data
+     *
+     * @example
+     * ```typescript
+     * // Register a new user
+     * this.authService.signUp({
+     *   email: 'newuser@example.com',
+     *   password: 'securePassword123',
+     *   firstName: 'John',
+     *   lastName: 'Doe'
+     * }).subscribe({
+     *   next: (user) => {
+     *     console.log('User registered successfully:', user);
+     *     // Optionally redirect to sign-in or email verification page
+     *     this.router.navigate(['/verify-email']);
+     *   },
+     *   error: (error) => {
+     *     console.error('Registration failed:', error);
+     *     // Handle registration errors (email already exists, etc.)
+     *   }
+     * });
+     * ```
+     *
+     * @see {@link SignUpBody} Interface for user registration data
+     * @see {@link User} Interface for user data returned after registration
+     * @see {@link AuthEndpoint.SIGN_UP} Backend endpoint for user registration
+     * @see {@link signIn} Method to authenticate user after registration
+     */
+    signUp(dto) {
+        return this.http.post(`${Endpoint.AUTH}/${AuthEndpoint.SIGN_UP}`, dto).pipe(take(1));
+    }
+    /**
+     * Refreshes an expired access token using a refresh token
+     *
+     * This method exchanges a valid refresh token for a new set of access and refresh tokens.
+     * It's typically used when the current access token has expired but the refresh token
+     * is still valid, allowing the user to maintain their session without re-authenticating.
+     *
+     * The refresh token mechanism provides a secure way to maintain long-lived sessions
+     * while keeping access tokens short-lived for better security.
+     *
+     * @param refreshToken - The refresh token to exchange for new tokens
+     * @returns Observable that emits the new token response
+     *
+     * @example
+     * ```typescript
+     * // Refresh tokens when access token expires
+     * const storedRefreshToken = localStorage.getItem('refreshToken');
+     * if (storedRefreshToken) {
+     *   this.authService.refreshToken(storedRefreshToken).subscribe({
+     *     next: (tokenResponse) => {
+     *       console.log('Tokens refreshed successfully');
+     *       // Store new tokens
+     *       localStorage.setItem('accessToken', tokenResponse.accessToken);
+     *       localStorage.setItem('refreshToken', tokenResponse.refreshToken);
+     *     },
+     *     error: (error) => {
+     *       console.error('Token refresh failed:', error);
+     *       // Redirect to login page
+     *       this.router.navigate(['/login']);
+     *     }
+     *   });
+     * }
+     * ```
+     *
+     * @see {@link RefreshToken} Type representing refresh tokens
+     * @see {@link TokenResponse} Interface for token refresh response
+     * @see {@link AuthEndpoint.REFRESH_TOKEN} Backend endpoint for token refresh
+     * @see {@link signIn} Method to get initial tokens through authentication
+     */
+    refreshToken(refreshToken) {
+        return this.http
+            .post(`${Endpoint.AUTH}/${AuthEndpoint.REFRESH_TOKEN}`, {
+            refreshToken,
+        })
+            .pipe(take(1));
+    }
+    /**
+     * Signs out the current user and invalidates their session
+     *
+     * This method sends a sign-out request to the backend API to invalidate the user's
+     * current session and tokens. It effectively logs the user out of the application
+     * and clears their authentication state on the server.
+     *
+     * After calling this method, you should also clear any client-side authentication
+     * data such as tokens stored in localStorage, sessionStorage, or application state.
+     *
+     * @returns Observable that emits a success response when sign-out is complete
+     *
+     * @example
+     * ```typescript
+     * // Sign out the current user
+     * this.authService.signOut().subscribe({
+     *   next: (response) => {
+     *     console.log('User signed out successfully');
+     *     // Clear client-side authentication data
+     *     localStorage.removeItem('accessToken');
+     *     localStorage.removeItem('refreshToken');
+     *     // Redirect to login page
+     *     this.router.navigate(['/login']);
+     *   },
+     *   error: (error) => {
+     *     console.error('Sign out failed:', error);
+     *     // Even if server sign-out fails, clear local data
+     *     localStorage.clear();
+     *     this.router.navigate(['/login']);
+     *   }
+     * });
+     * ```
+     *
+     * @example
+     * ```typescript
+     * // Sign out with state management
+     * async signOut() {
+     *   try {
+     *     await this.authService.signOut().toPromise();
+     *     // Clear authentication state
+     *     this.authState.clearUser();
+     *     this.notificationService.showSuccess('Signed out successfully');
+     *   } catch (error) {
+     *     console.error('Sign out error:', error);
+     *   } finally {
+     *     // Always redirect to login
+     *     this.router.navigate(['/login']);
+     *   }
+     * }
+     * ```
+     *
+     * @see {@link SuccessResponse} Interface for success response
+     * @see {@link AuthEndpoint.SIGN_OUT} Backend endpoint for user sign-out
+     * @see {@link signIn} Method to authenticate user after sign-out
+     */
+    signOut() {
+        // this.app.startSpinner();
+        return this.http.post(`${Endpoint.AUTH}/${AuthEndpoint.SIGN_OUT}`, {}).pipe(take(1));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AuthService, deps: [{ token: i1.HttpClient }, { token: AUTH_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AuthService, providedIn: "root" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AuthService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: "root",
+                }]
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [AUTH_CONFIG]
+                }] }] });
+
+/* eslint-disable */
+// noinspection JSUnusedGlobalSymbols
+const initialState = {
+    signedIn: false,
+    sessionId: null,
+    user: null,
+    accessToken: null,
+    refreshToken: null,
+    accessTokenExpiresOn: null,
+    refreshTokenExpiresOn: null,
+};
+/**
+ * Authentication state management store using NgRx Signals
+ *
+ * This signal store provides centralized state management for authentication in Angular applications.
+ * It manages user authentication state, tokens, and provides methods for authentication operations.
+ * The store automatically persists state to browser storage and provides reactive computed values.
+ *
+ * Key features:
+ * - Automatic state persistence with browser storage sync
+ * - Reactive computed properties for common authentication checks
+ * - Built-in methods for sign-in, sign-out, and token management
+ * - Integration with Angular Router for navigation after authentication
+ * - Type-safe state management with TypeScript
+ *
+ * The store is provided at the root level and can be injected into any component or service.
+ * It uses NgRx Signals for reactive state management and provides a modern alternative
+ * to traditional NgRx store patterns.
+ *
+ * @example
+ * ```typescript
+ * // In a component
+ * export class AppComponent {
+ *   private authState = inject(AuthState)
+ *
+ *   // Access reactive state
+ *   isSignedIn = this.authState.signedIn;
+ *   currentUser = this.authState.user;
+ *   hasAccessToken = this.authState.hasAccessToken;
+ *
+ *   // Sign in user
+ *   async signIn() {
+ *     this.authState.signIn({
+ *       email: 'user@example.com',
+ *       password: 'password123'
+ *     }, '/dashboard').subscribe({
+ *       next: (response) => console.log('Signed in:', response.user),
+ *       error: (error) => console.error('Sign in failed:', error)
+ *     });
+ *   }
+ *
+ *   // Sign out user
+ *   signOut() {
+ *     this.authState.signOut('/login').subscribe();
+ *   }
+ * }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // In a guard
+ * export class AuthGuard {
+ *   private authState = inject(AuthState)
+ *
+ *   canActivate(): boolean {
+ *     return this.authState.signedIn() && this.authState.hasAccessToken();
+ *   }
+ * }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Using computed properties
+ * export class HeaderComponent {
+ *   private authState = inject(AuthState)
+ *
+ *   // Reactive computed values
+ *   userRole = this.authState.role;
+ *   isEmailVerified = this.authState.emailVerified;
+ *   hasValidToken = this.authState.hasAccessToken;
+ * }
+ * ```
+ *
+ * @see {@link AuthStateModel} Interface defining the state structure
+ * @see {@link AuthService} Service used for authentication operations
+ * @see {@link signalStore} NgRx Signals store factory function
+ * @see {@link withStorageSync} Storage synchronization feature
+ */
+const AuthState = signalStore({ providedIn: "root" }, withState(initialState), withStorageSync({ key: "auth" }), withComputed(({ accessToken, user }) => ({
+    hasAccessToken: computed(() => Boolean(accessToken())),
+    role: computed(() => user()?.role),
+    emailVerified: computed(() => Boolean(user()?.emailVerified)),
+})), withMethods((store, router = inject(Router), authService = inject(AuthService)) => ({
+    reset() {
+        patchState(store, initialState);
+    },
+    setTokens(tokenResponse) {
+        const { accessToken, refreshToken, accessTokenExpiresOn, refreshTokenExpiresOn } = tokenResponse;
+        patchState(store, state => ({
+            ...state,
+            accessToken,
+            refreshToken,
+            accessTokenExpiresOn,
+            refreshTokenExpiresOn,
+        }));
+    },
+    signIn(signInBody, redirect) {
+        return authService.signIn(signInBody).pipe(tap((res) => {
+            patchState(store, { ...res, signedIn: true });
+            if (redirect) {
+                void router.navigateByUrl(typeof redirect === "string" ? redirect : redirect(res));
+            }
+        }));
+    },
+    authenticateWithToken: (accessToken, redirect) => {
+        return authService.getAuthResponse(accessToken).pipe(tap((res) => {
+            patchState(store, { ...res, signedIn: Boolean(res.user.role) });
+            if (redirect) {
+                void router.navigateByUrl(typeof redirect === "string" ? redirect : redirect(res));
+            }
+        }), catchError(() => EMPTY));
+    },
+    signOut: (redirect) => {
+        return authService.signOut().pipe(tap({
+            next: () => {
+                patchState(store, initialState);
+                if (redirect) {
+                    void router.navigateByUrl(redirect);
+                }
+            },
+        }), catchError(() => EMPTY));
+    },
+})));
+
+/* eslint-disable @angular-eslint/no-output-on-prefix */
+class AuthFormComponent {
+    config;
+    fb;
+    authService;
+    local = input(true);
+    google = input(true);
+    facebook = input(true);
+    onError = output();
+    onSignIn = output();
+    onSignUp = output();
+    isLoading = signal(false);
+    isSignUp = signal(false);
+    isError = signal(false);
+    authField = signal(AuthField.EMAIL);
+    authFieldLabel = signal(toFirstCase(AuthField.EMAIL));
+    error = signal(null);
+    authState = inject(AuthState);
+    authForm;
+    constructor(config, fb, authService) {
+        this.config = config;
+        this.fb = fb;
+        this.authService = authService;
+        this.authField.set(config.authField === AuthField.USERNAME ? AuthField.USERNAME : AuthField.EMAIL);
+        this.authFieldLabel.set(toFirstCase(this.authField()));
+        this.authForm = this.fb.group({
+            firstName: ["", Validators.required],
+            lastName: ["", Validators.required],
+            authFieldValue: ["", [Validators.required]],
+            password: ["", Validators.required],
+        });
+        effect(() => {
+            if (this.isSignUp()) {
+                this.authForm.controls?.firstName?.enable();
+                this.authForm.controls?.lastName?.enable();
+            }
+            else {
+                this.authForm.controls?.firstName?.disable();
+                this.authForm.controls?.lastName?.disable();
+            }
+        });
+    }
+    async handleGoogleSignIn() {
+        const accessToken = await this.authService.googleSignIn();
+        this.authState.authenticateWithToken(accessToken).subscribe({
+            next: authResponse => {
+                this.isLoading.set(false);
+                this.onSignIn.emit(authResponse);
+            },
+            error: this.handleError.bind(this),
+        });
+    }
+    handleLocalAuth(signInBody) {
+        this.isLoading.set(true);
+        this.isError.set(false);
+        this.authState.signIn(signInBody).subscribe({
+            next: authResponse => {
+                this.isLoading.set(false);
+                this.onSignIn.emit(authResponse);
+            },
+            error: this.handleError.bind(this),
+        });
+    }
+    handleSignUp(signUpBody) {
+        this.isLoading.set(true);
+        this.isError.set(false);
+        this.authService.signUp(signUpBody).subscribe({
+            next: user => {
+                this.isLoading.set(false);
+                this.onSignUp.emit(user);
+            },
+            error: this.handleError.bind(this),
+        });
+    }
+    handleSubmit(e) {
+        e.preventDefault();
+        if (this.isSignUp()) {
+            const formData = validatedFormData(this.authForm);
+            if (formData) {
+                this.handleSignUp({
+                    firstName: formData.firstName,
+                    lastName: formData.lastName,
+                    [this.authField()]: formData.authFieldValue,
+                    password: formData.password,
+                });
+            }
+        }
+        else {
+            const formData = validatedFormData(this.authForm);
+            if (formData) {
+                this.handleLocalAuth({
+                    [this.authField()]: formData.authFieldValue,
+                    password: formData.password,
+                });
+            }
+        }
+    }
+    handleError(error) {
+        this.isLoading.set(false);
+        this.isError.set(true);
+        this.error.set(error);
+        this.onError.emit(error);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AuthFormComponent, deps: [{ token: AUTH_CONFIG }, { token: i1$1.FormBuilder }, { token: AuthService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: AuthFormComponent, isStandalone: false, selector: "hc-auth-card", inputs: { local: { classPropertyName: "local", publicName: "local", isSignal: true, isRequired: false, transformFunction: null }, google: { classPropertyName: "google", publicName: "google", isSignal: true, isRequired: false, transformFunction: null }, facebook: { classPropertyName: "facebook", publicName: "facebook", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onError: "onError", onSignIn: "onSignIn", onSignUp: "onSignUp" }, ngImport: i0, template: "<!--<div class=\"auth-container d-flex justify-content-center align-items-center\">-->\r\n<!--    -->\r\n<!--</div>-->\r\n<hc-card>\r\n    <!--    @if (isLoading()) {-->\r\n    <!--        <div class=\"loading-overlay w-100 h-100\"></div>-->\r\n    <!--    }-->\r\n    <form\r\n        class=\"d-inline-flex flex-column align-items-center w-100\"\r\n        [formGroup]=\"authForm\"\r\n        (ngSubmit)=\"handleSubmit($event)\"\r\n    >\r\n        @if (isSignUp()) {\r\n            <div class=\"form-group w-100\">\r\n                <label for=\"firstName\" class=\"form-label\">First Name</label>\r\n                <input\r\n                    id=\"firstName\"\r\n                    type=\"text\"\r\n                    class=\"form-control w-100\"\r\n                    formControlName=\"firstName\"\r\n                    placeholder=\"Enter your first name\"\r\n                />\r\n            </div>\r\n\r\n            <div class=\"form-group w-100\">\r\n                <label for=\"lastName\" class=\"form-label\">Last Name</label>\r\n                <input\r\n                    id=\"lastName\"\r\n                    type=\"text\"\r\n                    class=\"form-control w-100\"\r\n                    formControlName=\"lastName\"\r\n                    placeholder=\"Enter your last name\"\r\n                />\r\n            </div>\r\n        }\r\n\r\n        <div class=\"form-group w-100\">\r\n            <label for=\"authField\" class=\"form-label\">{{ authFieldLabel() }}</label>\r\n            <input\r\n                id=\"authField\"\r\n                type=\"text\"\r\n                class=\"form-control w-100\"\r\n                formControlName=\"authFieldValue\"\r\n                [placeholder]=\"'Enter your ' + authFieldLabel().toLowerCase()\"\r\n            />\r\n        </div>\r\n\r\n        <div class=\"form-group w-100\">\r\n            <label for=\"password\" class=\"form-label\">Password</label>\r\n            <input\r\n                id=\"password\"\r\n                type=\"password\"\r\n                class=\"form-control w-100\"\r\n                formControlName=\"password\"\r\n                placeholder=\"Enter your password\"\r\n            />\r\n        </div>\r\n\r\n        <button type=\"submit\" class=\"btn btn-primary mb-3 w-100\" [disabled]=\"isLoading()\">\r\n            {{ isSignUp() ? (isLoading() ? \"Signing Up...\" : \"Sign Up\") : isLoading() ? \"Signing In...\" : \"Sign In\" }}\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"btn btn-link p-0 mb-3\" (click)=\"isSignUp.set(!isSignUp())\">\r\n            {{ isSignUp() ? \"Already have an account? Sign In\" : \"Don't have an account? Sign Up\" }}\r\n        </button>\r\n\r\n        @if (!isSignUp()) {\r\n            @if (local() && (google() || facebook())) {\r\n                <hc-separator label=\"OR\"></hc-separator>\r\n            }\r\n\r\n            @if (google()) {\r\n                <button type=\"button\" class=\"btn google-btn btn-light mb-3 w-100\" (click)=\"handleGoogleSignIn()\">\r\n                    <div class=\"icon\"></div>\r\n                    Sign in with Google\r\n                </button>\r\n            }\r\n\r\n            @if (facebook()) {\r\n                <button type=\"button\" class=\"btn facebook-btn btn-light mb-3 w-100\">\r\n                    <div class=\"icon\"></div>\r\n                    Sign in with Facebook\r\n                </button>\r\n            }\r\n\r\n            @if (isError()) {\r\n                <div class=\"error-message w-100\">\r\n                    {{ error()?.error?.message || \"Something went wrong!\" }}\r\n                </div>\r\n            }\r\n        }\r\n    </form>\r\n</hc-card>\r\n", styles: [".auth-form{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:16px;margin:8px;padding:2rem;position:relative;z-index:1}.loading-overlay{background:#ffffffe6;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--secondary-color);font-size:1.1rem;position:absolute;top:0;left:0}.loading-overlay:after{content:\"\";width:50px;height:50px;border:5px solid var(--secondary-color);border-top:5px solid transparent;border-radius:50%;animation:spin 1s linear infinite;margin-left:10px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.form-group{position:relative;margin-bottom:1.5rem}.form-label{font-weight:600;color:var(--text-color);margin-bottom:.5rem;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}.form-control{border:2px solid var(--border-color);border-radius:12px;padding:.75rem 1rem;font-size:1rem;transition:all .3s ease;background:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.form-control:focus{border-color:var(--secondary-color);box-shadow:0 0 0 3px #667eea1a;background:#fffffff2}.form-control::placeholder{color:var(--text-light)}.btn{border-radius:12px;padding:.75rem 1.5rem;font-weight:600;font-size:1rem;transition:all .3s ease;border:none;position:relative;overflow:hidden}.btn:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.btn:hover:before{left:100%}.btn-primary{background:var(--secondary-gradient);color:#fff;box-shadow:var(--shadow-md)}.btn-primary:hover{box-shadow:var(--shadow-lg)}.btn-link{color:var(--text-light);text-decoration:none;font-size:.9rem;transition:all .3s ease}.btn-link:hover{color:var(--secondary-color);text-decoration:underline}.google-btn,.facebook-btn{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--text-color);background:#ffffffe6;border:2px solid var(--border-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:600;transition:all .3s ease}.google-btn:hover,.facebook-btn:hover{background:#fff;border-color:var(--secondary-color);box-shadow:var(--shadow-md)}.google-btn .icon,.facebook-btn .icon{height:24px;width:24px;background-repeat:no-repeat;background-size:contain;background-position:center}.google-btn .icon{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=)}.facebook-btn .icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAmJJREFUaEPtmj9oFEEUxr9v7nIpzkIRLQQVFLUSBBs7IbfGwkrhtNHbvYiiRTqbNKIRbGwD/iFkd88uISmsEtwErRQsLEVUiGIbsDAK8W6e3IESkuzt3eVucwMz7b5hvt/73rwZluHwtcr+Wrb6BMJhgnkYMASyKlotDGZqt1goT81R1EUDdG+SqDXnWPD8n6ZkfiNB3Qk6XiAmZv+fZguw0+5ZBzp3QITAOw1EiupDrYYVZvFHaZ0DkNfCHCn7ILwAwolbZ0ccEMgCtRqLKu77pAQ45eAOBI/6CID3oqA0DrCl7tdfAIKJKPRGk7K+/nsfAci3Pav5YzMzl9fMBCBHI9+daEd8PbZvHKhmswdfTV79biSACD4tht7xOPHF4nTux65fD7RIEcIDJAZbBU2ljYrm0mLFLcSJKpSD+xTcbVX0+rhUADT19JI/ciUWwAveEDjTtwAAn0eBW4oT6LjBFxBHzAUohctQctgCdJKB1uYklJB1oLU0JkYJMZ7ReLExUFFW5oPycuwm9vyTSli/Rm8aNWKSwKmUbqNyPQrKU4mkbQQ4nv8V4CEjAU7ffDqwey33m2DGSIAhNziqiM/NDOvySdzdEiqMhA61vDQWwPH8GwCfGQtwzg0eCjGWGoCGvFbkxy0WfBv5nh8npCFUYe8WPfQslJxIDSB+IXsSx+amy10otls3v07bu1AbR3tnoXYP2D3QWeX8n2VLyJaQLaGm/4XsQbbNAkmebrtQfBdK56lBbxxoPDUYKoWzSsml5DLYTkRvAADMsv7cpkp5TKXP9+7RR3cBGpkH5weob/8FwaStQs990hUAAAAASUVORK5CYII=)}.separator{position:relative;width:calc(100% - 40px);height:1px;background:linear-gradient(90deg,transparent,var(--border-color),transparent);margin:2rem auto}.separator:after{content:\"OR\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#ffffffe6;padding:0 1rem;font-size:.8rem;font-weight:600;color:var(--text-light);letter-spacing:1px}.error-message{color:var(--danger-color);margin-top:1rem;font-weight:600;text-align:center}@keyframes slideIn{0%{opacity:0}to{opacity:1}}@media (max-width: 480px){.auth-container{margin:1rem;border-radius:16px}.auth-form{padding:1.5rem;margin:4px}.btn{padding:.875rem 1.25rem;font-size:.95rem}}\n"], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3.HcCardComponent, selector: "hc-card" }, { kind: "component", type: i3.HcSeparatorComponent, selector: "hc-separator", inputs: ["label"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: AuthFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "hc-auth-card", standalone: false, template: "<!--<div class=\"auth-container d-flex justify-content-center align-items-center\">-->\r\n<!--    -->\r\n<!--</div>-->\r\n<hc-card>\r\n    <!--    @if (isLoading()) {-->\r\n    <!--        <div class=\"loading-overlay w-100 h-100\"></div>-->\r\n    <!--    }-->\r\n    <form\r\n        class=\"d-inline-flex flex-column align-items-center w-100\"\r\n        [formGroup]=\"authForm\"\r\n        (ngSubmit)=\"handleSubmit($event)\"\r\n    >\r\n        @if (isSignUp()) {\r\n            <div class=\"form-group w-100\">\r\n                <label for=\"firstName\" class=\"form-label\">First Name</label>\r\n                <input\r\n                    id=\"firstName\"\r\n                    type=\"text\"\r\n                    class=\"form-control w-100\"\r\n                    formControlName=\"firstName\"\r\n                    placeholder=\"Enter your first name\"\r\n                />\r\n            </div>\r\n\r\n            <div class=\"form-group w-100\">\r\n                <label for=\"lastName\" class=\"form-label\">Last Name</label>\r\n                <input\r\n                    id=\"lastName\"\r\n                    type=\"text\"\r\n                    class=\"form-control w-100\"\r\n                    formControlName=\"lastName\"\r\n                    placeholder=\"Enter your last name\"\r\n                />\r\n            </div>\r\n        }\r\n\r\n        <div class=\"form-group w-100\">\r\n            <label for=\"authField\" class=\"form-label\">{{ authFieldLabel() }}</label>\r\n            <input\r\n                id=\"authField\"\r\n                type=\"text\"\r\n                class=\"form-control w-100\"\r\n                formControlName=\"authFieldValue\"\r\n                [placeholder]=\"'Enter your ' + authFieldLabel().toLowerCase()\"\r\n            />\r\n        </div>\r\n\r\n        <div class=\"form-group w-100\">\r\n            <label for=\"password\" class=\"form-label\">Password</label>\r\n            <input\r\n                id=\"password\"\r\n                type=\"password\"\r\n                class=\"form-control w-100\"\r\n                formControlName=\"password\"\r\n                placeholder=\"Enter your password\"\r\n            />\r\n        </div>\r\n\r\n        <button type=\"submit\" class=\"btn btn-primary mb-3 w-100\" [disabled]=\"isLoading()\">\r\n            {{ isSignUp() ? (isLoading() ? \"Signing Up...\" : \"Sign Up\") : isLoading() ? \"Signing In...\" : \"Sign In\" }}\r\n        </button>\r\n\r\n        <button type=\"button\" class=\"btn btn-link p-0 mb-3\" (click)=\"isSignUp.set(!isSignUp())\">\r\n            {{ isSignUp() ? \"Already have an account? Sign In\" : \"Don't have an account? Sign Up\" }}\r\n        </button>\r\n\r\n        @if (!isSignUp()) {\r\n            @if (local() && (google() || facebook())) {\r\n                <hc-separator label=\"OR\"></hc-separator>\r\n            }\r\n\r\n            @if (google()) {\r\n                <button type=\"button\" class=\"btn google-btn btn-light mb-3 w-100\" (click)=\"handleGoogleSignIn()\">\r\n                    <div class=\"icon\"></div>\r\n                    Sign in with Google\r\n                </button>\r\n            }\r\n\r\n            @if (facebook()) {\r\n                <button type=\"button\" class=\"btn facebook-btn btn-light mb-3 w-100\">\r\n                    <div class=\"icon\"></div>\r\n                    Sign in with Facebook\r\n                </button>\r\n            }\r\n\r\n            @if (isError()) {\r\n                <div class=\"error-message w-100\">\r\n                    {{ error()?.error?.message || \"Something went wrong!\" }}\r\n                </div>\r\n            }\r\n        }\r\n    </form>\r\n</hc-card>\r\n", styles: [".auth-form{background:#fffffff2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:16px;margin:8px;padding:2rem;position:relative;z-index:1}.loading-overlay{background:#ffffffe6;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-radius:16px;display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--secondary-color);font-size:1.1rem;position:absolute;top:0;left:0}.loading-overlay:after{content:\"\";width:50px;height:50px;border:5px solid var(--secondary-color);border-top:5px solid transparent;border-radius:50%;animation:spin 1s linear infinite;margin-left:10px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.form-group{position:relative;margin-bottom:1.5rem}.form-label{font-weight:600;color:var(--text-color);margin-bottom:.5rem;font-size:.9rem;text-transform:uppercase;letter-spacing:.5px}.form-control{border:2px solid var(--border-color);border-radius:12px;padding:.75rem 1rem;font-size:1rem;transition:all .3s ease;background:#fffc;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.form-control:focus{border-color:var(--secondary-color);box-shadow:0 0 0 3px #667eea1a;background:#fffffff2}.form-control::placeholder{color:var(--text-light)}.btn{border-radius:12px;padding:.75rem 1.5rem;font-weight:600;font-size:1rem;transition:all .3s ease;border:none;position:relative;overflow:hidden}.btn:before{content:\"\";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.btn:hover:before{left:100%}.btn-primary{background:var(--secondary-gradient);color:#fff;box-shadow:var(--shadow-md)}.btn-primary:hover{box-shadow:var(--shadow-lg)}.btn-link{color:var(--text-light);text-decoration:none;font-size:.9rem;transition:all .3s ease}.btn-link:hover{color:var(--secondary-color);text-decoration:underline}.google-btn,.facebook-btn{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--text-color);background:#ffffffe6;border:2px solid var(--border-color);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:600;transition:all .3s ease}.google-btn:hover,.facebook-btn:hover{background:#fff;border-color:var(--secondary-color);box-shadow:var(--shadow-md)}.google-btn .icon,.facebook-btn .icon{height:24px;width:24px;background-repeat:no-repeat;background-size:contain;background-position:center}.google-btn .icon{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNMTcuNiA5LjJsLS4xLTEuOEg5djMuNGg0LjhDMTMuNiAxMiAxMyAxMyAxMiAxMy42djIuMmgzYTguOCA4LjggMCAwIDAgMi42LTYuNnoiIGZpbGw9IiM0Mjg1RjQiIGZpbGwtcnVsZT0ibm9uemVybyIvPjxwYXRoIGQ9Ik05IDE4YzIuNCAwIDQuNS0uOCA2LTIuMmwtMy0yLjJhNS40IDUuNCAwIDAgMS04LTIuOUgxVjEzYTkgOSAwIDAgMCA4IDV6IiBmaWxsPSIjMzRBODUzIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNNCAxMC43YTUuNCA1LjQgMCAwIDEgMC0zLjRWNUgxYTkgOSAwIDAgMCAwIDhsMy0yLjN6IiBmaWxsPSIjRkJCQzA1IiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48cGF0aCBkPSJNOSAzLjZjMS4zIDAgMi41LjQgMy40IDEuM0wxNSAyLjNBOSA5IDAgMCAwIDEgNWwzIDIuNGE1LjQgNS40IDAgMCAxIDUtMy43eiIgZmlsbD0iI0VBNDMzNSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PHBhdGggZD0iTTAgMGgxOHYxOEgweiIvPjwvZz48L3N2Zz4=)}.facebook-btn .icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAmJJREFUaEPtmj9oFEEUxr9v7nIpzkIRLQQVFLUSBBs7IbfGwkrhtNHbvYiiRTqbNKIRbGwD/iFkd88uISmsEtwErRQsLEVUiGIbsDAK8W6e3IESkuzt3eVucwMz7b5hvt/73rwZluHwtcr+Wrb6BMJhgnkYMASyKlotDGZqt1goT81R1EUDdG+SqDXnWPD8n6ZkfiNB3Qk6XiAmZv+fZguw0+5ZBzp3QITAOw1EiupDrYYVZvFHaZ0DkNfCHCn7ILwAwolbZ0ccEMgCtRqLKu77pAQ45eAOBI/6CID3oqA0DrCl7tdfAIKJKPRGk7K+/nsfAci3Pav5YzMzl9fMBCBHI9+daEd8PbZvHKhmswdfTV79biSACD4tht7xOPHF4nTux65fD7RIEcIDJAZbBU2ljYrm0mLFLcSJKpSD+xTcbVX0+rhUADT19JI/ciUWwAveEDjTtwAAn0eBW4oT6LjBFxBHzAUohctQctgCdJKB1uYklJB1oLU0JkYJMZ7ReLExUFFW5oPycuwm9vyTSli/Rm8aNWKSwKmUbqNyPQrKU4mkbQQ4nv8V4CEjAU7ffDqwey33m2DGSIAhNziqiM/NDOvySdzdEiqMhA61vDQWwPH8GwCfGQtwzg0eCjGWGoCGvFbkxy0WfBv5nh8npCFUYe8WPfQslJxIDSB+IXsSx+amy10otls3v07bu1AbR3tnoXYP2D3QWeX8n2VLyJaQLaGm/4XsQbbNAkmebrtQfBdK56lBbxxoPDUYKoWzSsml5DLYTkRvAADMsv7cpkp5TKXP9+7RR3cBGpkH5weob/8FwaStQs990hUAAAAASUVORK5CYII=)}.separator{position:relative;width:calc(100% - 40px);height:1px;background:linear-gradient(90deg,transparent,var(--border-color),transparent);margin:2rem auto}.separator:after{content:\"OR\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#ffffffe6;padding:0 1rem;font-size:.8rem;font-weight:600;color:var(--text-light);letter-spacing:1px}.error-message{color:var(--danger-color);margin-top:1rem;font-weight:600;text-align:center}@keyframes slideIn{0%{opacity:0}to{opacity:1}}@media (max-width: 480px){.auth-container{margin:1rem;border-radius:16px}.auth-form{padding:1.5rem;margin:4px}.btn{padding:.875rem 1.25rem;font-size:.95rem}}\n"] }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [AUTH_CONFIG]
+                }] }, { type: i1$1.FormBuilder }, { type: AuthService }] });
+
+/**
+ * Angular structural directive for permission-based conditional rendering
+ *
+ * This directive conditionally displays or hides DOM elements based on the current user's permissions.
+ * It integrates with the authentication state to check if the authenticated user has the required
+ * permission to view the content. The directive uses Angular's structural directive pattern and
+ * automatically updates when the user's authentication state or permissions change.
+ *
+ * The directive works by checking the user's role permissions against the required permission string.
+ * If the user has the required permission, the template content is rendered; otherwise, it's removed
+ * from the DOM.
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage - show content only if user has 'users.read' permission -->
+ * <div *hcPermission="'users.read'">
+ *   <p>This content is only visible to users with read permission</p>
+ * </div>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Using with component properties -->
+ * <button *hcPermission="'users.delete'" (click)="deleteUser()">
+ *   Delete User
+ * </button>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Using with multiple permissions (user needs at least one) -->
+ * <div *hcPermission="['users.read', 'users.write']">
+ *   <p>This content is visible to users with either read OR write permission</p>
+ * </div>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Using with dynamic permissions -->
+ * <ng-container *hcPermission="requiredPermission">
+ *   <app-admin-panel></app-admin-panel>
+ * </ng-container>
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Component usage with dynamic permission
+ * export class UserListComponent {
+ *   requiredPermission = 'users.manage';
+ *   // Or with multiple permissions
+ *   requiredPermissions = ['users.read', 'users.write'];
+ * }
+ * ```
+ *
+ * @see {@link AuthState} Authentication state service that provides user information
+ * @see {@link User} User interface that contains role and permission information
+ * @see {@link isRoleObject} Utility function to check if role is an object with permissions
+ * @see {@link NgxHichchiAuthModule} Module that provides this directive
+ */
+class PermissionDirective {
+    /**
+     * Template reference for the content to be conditionally rendered
+     * @private
+     */
+    templateRef = inject(TemplateRef);
+    /**
+     * View container reference for managing the template rendering
+     * @private
+     */
+    viewContainerRef = inject(ViewContainerRef);
+    /**
+     * Authentication state service for accessing current user information
+     * @private
+     */
+    authState = inject(AuthState);
+    /**
+     * Required permission string or array of strings input signal
+     *
+     * This input defines the permission(s) that the current user must have
+     * for the template content to be displayed. The permission string(s)
+     * should match the permissions defined in the user's role.
+     *
+     * When an array is provided, the user needs to have at least one of
+     * the specified permissions (OR logic).
+     *
+     * @example
+     * ```html
+     * <!-- Single permission -->
+     * <div *hcPermission="'users.read'">Content</div>
+     *
+     * <!-- Multiple permissions (user needs at least one) -->
+     * <div *hcPermission="['users.read', 'users.write']">Content</div>
+     * ```
+     */
+    hcPermission = input.required();
+    /**
+     * Constructor that sets up the permission checking effect
+     *
+     * Initializes an Angular effect that automatically re-evaluates permission
+     * whenever the authentication state or required permission changes. This
+     * ensures the UI stays in sync with the user's current permissions.
+     */
+    constructor() {
+        effect(() => {
+            if (this.hasPermission(this.authState.user(), this.hcPermission())) {
+                if (this.viewContainerRef.length === 0) {
+                    this.viewContainerRef.createEmbeddedView(this.templateRef);
+                }
+            }
+            else {
+                this.viewContainerRef.clear();
+            }
+        });
+    }
+    /**
+     * Checks if the user has the required permission(s)
+     *
+     * This method evaluates whether the provided user has the specified permission(s)
+     * by checking their role and associated permissions. It handles cases where
+     * the user is null, has no role, or the role doesn't contain permissions.
+     *
+     * When an array of permissions is provided, the method returns true if the user
+     * has at least one of the specified permissions (OR logic).
+     *
+     * @param user - The user object to check permissions for, can be null
+     * @param requiredPermission - The permission string or array of strings that must be present in the user's role
+     * @returns True if the user has the required permission(s), false otherwise
+     *
+     * @example
+     * ```typescript
+     * // Single permission
+     * const hasPermission = this.hasPermission(currentUser, 'users.delete');
+     *
+     * // Multiple permissions (user needs at least one)
+     * const hasAnyPermission = this.hasPermission(currentUser, ['users.read', 'users.write']);
+     * ```
+     *
+     * @private
+     */
+    hasPermission(user, requiredPermission) {
+        if (!user || !user.role) {
+            return false;
+        }
+        return isRoleObject(user.role) && user.role.permissions?.length
+            ? Array.isArray(requiredPermission)
+                ? requiredPermission.some(permission => user.role.permissions?.includes(permission))
+                : user.role.permissions.includes(requiredPermission)
+            : false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PermissionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: PermissionDirective, isStandalone: true, selector: "[hcPermission]", inputs: { hcPermission: { classPropertyName: "hcPermission", publicName: "hcPermission", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PermissionDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: "[hcPermission]",
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Enumeration of authentication guard conditions
+ *
+ * This enum defines the different conditions that authentication guards can check
+ * to determine whether a user should be allowed to access a route. Each condition
+ * represents a different aspect of the user's authentication state.
+ *
+ * These conditions are used in conjunction with AuthGuardOption to create
+ * flexible route protection rules that can handle various authentication scenarios.
+ *
+ * @example
+ * ```typescript
+ * // Check if user is signed in
+ * const guardOption: AuthGuardOption = {
+ *   condition: AuthGuardCondition.SIGNED_IN,
+ *   state: true,
+ *   redirect: '/login'
+ * };
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Check if user has a valid token
+ * const tokenGuardOption: AuthGuardOption = {
+ *   condition: AuthGuardCondition.HAS_TOKEN,
+ *   state: true,
+ *   redirect: '/unauthorized'
+ * };
+ * ```
+ *
+ * @see {@link AuthGuardOption} Interface that uses these conditions
+ */
+var AuthGuardCondition;
+(function (AuthGuardCondition) {
+    /** Check if the user is signed in to the application */
+    AuthGuardCondition["SIGNED_IN"] = "signed-in";
+    /** Check if the user has a valid access token */
+    AuthGuardCondition["HAS_TOKEN"] = "has-token";
+})(AuthGuardCondition || (AuthGuardCondition = {}));
+
+/**
+ * Retrieves all authentication guard options from a route and its parent routes
+ *
+ * This utility function extracts authentication guard options from the current route
+ * and recursively collects options from parent routes in the route hierarchy. It handles
+ * the inheritance and merging of guard options, ensuring that parent route guards are
+ * applied alongside child route guards.
+ *
+ * The function implements a hierarchical guard system where:
+ * - Child route options take precedence over parent options for the same condition
+ * - Parent options are inherited when no conflicting child option exists
+ * - Options are collected recursively up the route tree
+ * - The final array contains all applicable guard options for the route
+ *
+ * This enables complex authentication scenarios where different route levels can
+ * specify different authentication requirements, with child routes able to override
+ * or supplement parent route authentication rules.
+ *
+ * @param currentRoute - The activated route snapshot to extract guard options from
+ * @returns Array of authentication guard options applicable to the route
+ *
+ * @example
+ * ```typescript
+ * // Route configuration with nested guards
+ * const routes: Routes = [
+ *   {
+ *     path: 'admin',
+ *     component: AdminLayoutComponent,
+ *     canActivate: [authGuard(AuthGuardCondition.SIGNED_IN, true, '/login')],
+ *     children: [
+ *       {
+ *         path: 'users',
+ *         component: UsersComponent,
+ *         canActivate: [authGuard(AuthGuardCondition.HAS_TOKEN, true, '/unauthorized')]
+ *       }
+ *     ]
+ *   }
+ * ];
+ *
+ * // In the guard, get all applicable options
+ * const allOptions = getAllAuthGuardOptions(route);
+ * // Result: [
+ * //   { condition: 'signed-in', state: true, redirect: '/login' },
+ * //   { condition: 'has-token', state: true, redirect: '/unauthorized' }
+ * // ]
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Using in a custom guard implementation
+ * export const customAuthGuard: CanActivateFn = (route, state) => {
+ *   const authState = inject(AuthState);
+ *   const router = inject(Router);
+ *
+ *   const guardOptions = getAllAuthGuardOptions(route);
+ *
+ *   for (const option of guardOptions) {
+ *     const conditionMet = checkAuthCondition(option.condition, authState);
+ *     if (option.state !== conditionMet) {
+ *       router.navigateByUrl(option.redirect);
+ *       return false;
+ *     }
+ *   }
+ *
+ *   return true;
+ * };
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Route hierarchy with inherited guards
+ * const routes: Routes = [
+ *   {
+ *     path: 'app',
+ *     data: { [AUTH_GUARD_OPTIONS_KEY]: [
+ *       { condition: AuthGuardCondition.SIGNED_IN, state: true, redirect: '/login' }
+ *     ]},
+ *     children: [
+ *       {
+ *         path: 'profile',
+ *         component: ProfileComponent,
+ *         data: { [AUTH_GUARD_OPTIONS_KEY]: [
+ *           { condition: AuthGuardCondition.HAS_TOKEN, state: true, redirect: '/expired' }
+ *         ]}
+ *       }
+ *     ]
+ *   }
+ * ];
+ *
+ * // When accessing /app/profile, both parent and child guards apply
+ * ```
+ *
+ * @see {@link AuthGuardOption} Interface defining the structure of guard options
+ * @see {@link AUTH_GUARD_OPTIONS_KEY} Constant for the route data key
+ * @see {@link authGuard} Function that uses this utility to process guard options
+ * @see {@link ActivatedRouteSnapshot} Angular router interface for route snapshots
+ */
+const getAllAuthGuardOptions = (currentRoute) => {
+    const options = currentRoute.data?.[AUTH_GUARD_OPTIONS_KEY] || [];
+    if (!currentRoute.parent?.data?.[AUTH_GUARD_OPTIONS_KEY]) {
+        return options;
+    }
+    const parentOptions = getAllAuthGuardOptions(currentRoute.parent);
+    for (const parentOption of parentOptions) {
+        const currentConditionIndex = options.findIndex(option => option.condition === parentOption.condition);
+        if (currentConditionIndex !== -1) {
+            // options[currentConditionIndex] = parentOption;
+        }
+        else {
+            options.unshift(parentOption);
+        }
+    }
+    return options;
+};
+
+/**
+ * Authentication guard factory function for Angular route protection
+ *
+ * This function creates a route guard that protects routes based on authentication state.
+ * It supports both simple single-condition guards and complex multi-condition guards.
+ * The guard evaluates authentication conditions and redirects users when conditions are not met.
+ *
+ * The guard integrates with the AuthState service to check the current authentication status
+ * and uses the Angular Router for navigation when redirects are needed. It supports checking
+ * whether users are signed in, have valid tokens, and other authentication-related conditions.
+ *
+ * Key features:
+ * - Multiple authentication condition support
+ * - Automatic redirection on failed conditions
+ * - Integration with AuthState for reactive authentication checks
+ * - Support for both simple and complex guard configurations
+ * - Type-safe condition checking
+ *
+ * @param param - Either a single AuthGuardCondition or an array of AuthGuardOption objects
+ * @param state - Required state for single condition (ignored when using options array)
+ * @param redirect - Redirect path for single condition (ignored when using options array)
+ * @returns A CanActivateFn that evaluates authentication conditions and handles navigation
+ *
+ * @example
+ * ```typescript
+ * // Protecting a route that requires authentication
+ * const routes: Routes = [
+ *   {
+ *     path: 'dashboard',
+ *     component: DashboardComponent,
+ *     canActivate: [authGuard(AuthGuardCondition.SIGNED_IN, true, '/login')]
+ *   }
+ * ];
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Complex guard with multiple conditions
+ * const routes: Routes = [
+ *   {
+ *     path: 'admin',
+ *     component: AdminComponent,
+ *     canActivate: [authGuard([
+ *       { condition: AuthGuardCondition.SIGNED_IN, state: true, redirect: '/login' },
+ *       { condition: AuthGuardCondition.HAS_TOKEN, state: true, redirect: '/unauthorized' }
+ *     ])]
+ *   }
+ * ];
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Preventing authenticated users from accessing login page
+ * const routes: Routes = [
+ *   {
+ *     path: 'login',
+ *     component: LoginComponent,
+ *     canActivate: [authGuard(AuthGuardCondition.SIGNED_IN, false, '/dashboard')]
+ *   }
+ * ];
+ * ```
+ *
+ * @see {@link AuthState} Service that provides authentication state information
+ * @see {@link AuthGuardOption} Interface for configuring guard options
+ * @see {@link AuthGuardCondition} Enum defining available authentication conditions
+ * @see {@link getAllAuthGuardOptions} Utility function for extracting guard options from routes
+ * @see {@link AUTH_GUARD_OPTIONS_KEY} Constant for storing guard options in route data
+ */
+function authGuard(param, state, redirect) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    return async (route, _state) => {
+        const router = inject(Router);
+        const authState = inject(AuthState);
+        route.data = {
+            ...route.data,
+            [AUTH_GUARD_OPTIONS_KEY]: Array.isArray(param)
+                ? param
+                : [{ condition: param, state: state, redirect: redirect }],
+        };
+        const conditionCheckers = {
+            [AuthGuardCondition.SIGNED_IN]: authState.signedIn,
+            [AuthGuardCondition.HAS_TOKEN]: authState.hasAccessToken,
+        };
+        const authGuardOptions = getAllAuthGuardOptions(route);
+        if (!authGuardOptions.length) {
+            return true;
+        }
+        const conditionsMet = authGuardOptions.every(option => {
+            return option.state === conditionCheckers[option.condition]();
+        });
+        if (!conditionsMet) {
+            const option = authGuardOptions.pop();
+            const redirectPath = option.redirect.startsWith("/") ? option.redirect : `/${option.redirect}`;
+            await router.navigateByUrl(redirectPath);
+            return false;
+        }
+        return true;
+    };
+}
+
+// noinspection JSUnusedGlobalSymbols
+function roleGuard(param, state, redirect) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    return async (route, _state) => {
+        const router = inject(Router);
+        const authState = inject(AuthState);
+        route.data = {
+            ...route.data,
+            [AUTH_GUARD_OPTIONS_KEY]: Array.isArray(param)
+                ? param
+                : [{ condition: param, state: state, redirect: redirect }],
+        };
+        const conditionCheckers = {
+            [AuthGuardCondition.SIGNED_IN]: authState.signedIn,
+            [AuthGuardCondition.HAS_TOKEN]: authState.hasAccessToken,
+        };
+        const authGuardOptions = getAllAuthGuardOptions(route);
+        if (!authGuardOptions.length) {
+            return true;
+        }
+        const conditionsMet = authGuardOptions.every(option => {
+            return option.state === conditionCheckers[option.condition]();
+        });
+        if (!conditionsMet) {
+            const option = authGuardOptions.pop();
+            const redirectPath = option.redirect.startsWith("/") ? option.redirect : `/${option.redirect}`;
+            await router.navigateByUrl(redirectPath);
+            return false;
+        }
+        return true;
+    };
+}
+
+/**
+ * Array of authentication error codes that should trigger token refresh instead of immediate redirect
+ *
+ * These error codes indicate authentication issues that can potentially be resolved
+ * by refreshing the access token. When these errors are encountered, the interceptor
+ * will attempt to refresh the token before redirecting the user to the login page.
+ *
+ * @example
+ * ```typescript
+ * // The interceptor checks if the error code is in this array
+ * if (SKIPPED_ERRORS.includes(error.error?.code)) {
+ *   // Attempt token refresh instead of immediate redirect
+ *   return refreshToken(req, next);
+ * }
+ * ```
+ *
+ * @see {@link AuthErrorResponseCode} Enum containing all authentication error codes
+ * @see {@link authInterceptor} Function that uses this array for error handling
+ */
+const SKIPPED_ERRORS = [
+    AuthErrorResponseCode.AUTH_401_EXPIRED_TOKEN,
+    AuthErrorResponseCode.AUTH_401_INVALID_TOKEN,
+    AuthErrorResponseCode.AUTH_401_NOT_LOGGED_IN,
+];
+/**
+ * Flag to prevent multiple simultaneous token refresh operations
+ *
+ * This global flag ensures that only one token refresh operation can be in progress
+ * at any given time. This prevents race conditions and duplicate refresh requests
+ * when multiple HTTP requests fail simultaneously due to expired tokens.
+ *
+ * @private
+ */
+let refreshingInProgress = false;
+/**
+ * Checks if an HTTP request is a token refresh request
+ *
+ * This utility function determines whether the given HTTP request is attempting
+ * to refresh authentication tokens. This is important to avoid intercepting
+ * and modifying token refresh requests themselves, which could cause infinite loops.
+ *
+ * @param req - The HTTP request to check
+ * @returns True if the request is a token refresh request, false otherwise
+ *
+ * @example
+ * ```typescript
+ * // Used in the interceptor to avoid processing refresh token requests
+ * if (!isRefreshTokenReq(req)) {
+ *   // Apply authentication logic
+ * }
+ * ```
+ *
+ * @private
+ * @see {@link AuthEndpoint.REFRESH_TOKEN} Endpoint constant for token refresh
+ * @see {@link Endpoint.AUTH} Base authentication endpoint
+ */
+const isRefreshTokenReq = (req) => req.url.includes(`${Endpoint.AUTH}/${AuthEndpoint.REFRESH_TOKEN}`);
+/**
+ * Subject for coordinating token refresh operations across multiple HTTP requests
+ *
+ * This ReplaySubject is used to coordinate token refresh operations when multiple
+ * HTTP requests fail simultaneously due to expired tokens. It ensures that all
+ * waiting requests receive the new token once the refresh operation completes.
+ *
+ * The subject emits the new access token when refresh succeeds, or an error when
+ * refresh fails. It uses ReplaySubject to ensure late subscribers still receive
+ * the last emitted value.
+ *
+ * @private
+ * @see {@link ReplaySubject} RxJS subject type used for token coordination
+ * @see {@link AccessToken} Type representing access tokens
+ */
+let tokenSubject = new ReplaySubject(1);
+/**
+ * Creates an HTTP interceptor for handling authentication tokens and automatic token refresh
+ *
+ * This interceptor automatically adds authentication tokens to outgoing HTTP requests
+ * and handles token refresh when requests fail due to expired tokens. It provides
+ * seamless authentication management for Angular applications using JWT tokens.
+ *
+ * Key features:
+ * - Automatic token attachment to HTTP requests
+ * - Automatic token refresh on authentication errors
+ * - Prevention of multiple simultaneous refresh operations
+ * - Coordinated handling of multiple failed requests during token refresh
+ * - Automatic redirect to login page when refresh fails
+ * - Configurable redirect behavior with optional callback
+ *
+ * The interceptor works by:
+ * 1. Adding the current access token to outgoing requests
+ * 2. Monitoring responses for authentication errors
+ * 3. Attempting token refresh when authentication errors occur
+ * 4. Retrying failed requests with the new token
+ * 5. Redirecting to login when refresh fails or no refresh token is available
+ *
+ * @param redirect - The path to redirect to when authentication fails completely
+ * @param onRedirect - Optional callback function to execute before redirecting
+ * @returns An HttpInterceptorFn that can be used in Angular HTTP interceptor configuration
+ *
+ * @example
+ * ```typescript
+ * // Basic usage in app configuration
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideHttpClient(
+ *       withInterceptors([
+ *         authInterceptor('/login')
+ *       ])
+ *     )
+ *   ]
+ * };
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // With custom redirect callback
+ * export const appConfig: ApplicationConfig = {
+ *   providers: [
+ *     provideHttpClient(
+ *       withInterceptors([
+ *         authInterceptor('/login', () => {
+ *           console.log('Redirecting to login due to authentication failure');
+ *           // Clear any cached data
+ *           localStorage.clear();
+ *         })
+ *       ])
+ *     )
+ *   ]
+ * };
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // In a module-based application
+ * @NgModule({
+ *   providers: [
+ *     {
+ *       provide: HTTP_INTERCEPTORS,
+ *       useValue: authInterceptor('/auth/login'),
+ *       multi: true
+ *     }
+ *   ]
+ * })
+ * export class AppModule {}
+ * ```
+ *
+ * @see {@link AuthState} Service that provides authentication state and tokens
+ * @see {@link AuthService} Service that handles token refresh operations
+ * @see {@link HttpInterceptorFn} Angular HTTP interceptor function type
+ * @see {@link SKIPPED_ERRORS} Array of error codes that trigger token refresh
+ */
+function authInterceptor(redirect, onRedirect) {
+    return (req, next) => {
+        const authState = inject(AuthState);
+        const authService = inject(AuthService);
+        const router = inject(Router);
+        const setAccessToken = (req, accessToken) => {
+            return req.clone({
+                headers: req.headers.set("Authorization", `Bearer ${accessToken}`),
+            });
+        };
+        const gotoSignIn = () => {
+            onRedirect?.();
+            authState.reset();
+            // eslint-disable-next-line no-void
+            void router.navigateByUrl(redirect);
+        };
+        const refreshToken = (req, next) => {
+            if (!refreshingInProgress) {
+                refreshingInProgress = true;
+                tokenSubject.next(null);
+                const refreshToken = authState.refreshToken();
+                if (!refreshToken) {
+                    refreshingInProgress = false;
+                    gotoSignIn();
+                    return throwError(() => new Error("Refresh token not found."));
+                }
+                return authService.refreshToken(refreshToken).pipe(switchMap((tokenResponse) => {
+                    authState.setTokens(tokenResponse);
+                    tokenSubject.next(tokenResponse.accessToken);
+                    tokenSubject.complete();
+                    tokenSubject = new ReplaySubject(1);
+                    refreshingInProgress = false;
+                    return next(setAccessToken(req, tokenResponse.accessToken));
+                }), catchError((error) => {
+                    refreshingInProgress = false;
+                    tokenSubject.error(error);
+                    tokenSubject.complete();
+                    tokenSubject = new ReplaySubject(1);
+                    gotoSignIn();
+                    return throwError(() => error);
+                }));
+            }
+            return tokenSubject.pipe(filter(result => result !== null), take(1), switchMap(token => {
+                return next(setAccessToken(req, token));
+            }));
+        };
+        const handleRequest = (req, next) => {
+            return next(req).pipe(catchError((error) => {
+                if (error.status === HttpClientErrorStatus.UNAUTHORIZED &&
+                    error.error?.code &&
+                    SKIPPED_ERRORS.includes(error.error?.code) &&
+                    !isRefreshTokenReq(req)) {
+                    if (authState.signedIn()) {
+                        return refreshToken(req, next);
+                    }
+                }
+                return throwError(() => error);
+            }));
+        };
+        if (authState.accessToken()) {
+            const tokenizedRequest = req.clone({
+                headers: req.headers.set("Authorization", `Bearer ${authState.accessToken()}`),
+            });
+            return handleRequest(tokenizedRequest, next);
+        }
+        return handleRequest(req, next);
+    };
+}
+
+/**
+ * Angular module for authentication functionality
+ *
+ * This module provides comprehensive authentication features for Angular applications,
+ * including authentication forms, permission-based directives, and authentication services.
+ * It integrates with the Hichchi authentication system and provides both components
+ * and directives for building secure Angular applications.
+ *
+ * The module exports:
+ * - AuthFormComponent: A ready-to-use authentication form component
+ * - PermissionDirective: A structural directive for permission-based conditional rendering
+ *
+ * The module must be configured using the forRoot() method to provide the necessary
+ * authentication configuration.
+ *
+ * @example
+ * ```typescript
+ * // Basic module configuration
+ * @NgModule({
+ *   imports: [
+ *     NgxHichchiAuthModule.forRoot({
+ *       apiBaseURL: 'https://api.example.com'
+ *     })
+ *   ]
+ * })
+ * export class AppModule { }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Advanced configuration with custom authentication field
+ * @NgModule({
+ *   imports: [
+ *     NgxHichchiAuthModule.forRoot({
+ *       apiBaseURL: 'https://api.example.com',
+ *       authField: AuthField.EMAIL
+ *     })
+ *   ]
+ * })
+ * export class AppModule { }
+ * ```
+ *
+ * @see {@link AuthConfig} Configuration interface for the authentication module
+ * @see {@link AuthFormComponent} Authentication form component
+ * @see {@link PermissionDirective} Permission-based conditional rendering directive
+ * @see {@link AuthService} Authentication service for managing user sessions
+ */
+class NgxHichchiAuthModule {
+    /**
+     * Configures the NgxHichchiAuthModule with the provided authentication configuration
+     *
+     * This static method sets up the module with the necessary providers and configuration
+     * for authentication functionality. It provides the AuthService, HTTP client, and
+     * authentication configuration token that are required for the module to function properly.
+     *
+     * @param config - The authentication configuration object containing API endpoints and settings
+     * @returns A ModuleWithProviders object configured with authentication providers
+     *
+     * @example
+     * ```typescript
+     * // Basic configuration
+     * NgxHichchiAuthModule.forRoot({
+     *   apiBaseURL: 'https://api.example.com'
+     * })
+     * ```
+     *
+     * @example
+     * ```typescript
+     * // Configuration with environment variables and authentication field
+     * NgxHichchiAuthModule.forRoot({
+     *   apiBaseURL: environment.apiUrl,
+     *   authField: AuthField.USERNAME
+     * })
+     * ```
+     *
+     * @see {@link AuthConfig} Interface defining the configuration structure
+     * @see {@link AUTH_CONFIG} Injection token for the authentication configuration
+     * @see {@link AuthService} Service that uses the provided configuration
+     */
+    static forRoot(config) {
+        return {
+            ngModule: NgxHichchiAuthModule,
+            providers: [{ provide: AUTH_CONFIG, useValue: config }, provideHttpClient(), AuthService],
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgxHichchiAuthModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: NgxHichchiAuthModule, declarations: [AuthFormComponent], imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            ButtonComponent,
+            HcCardComponent,
+            HcCardComponent,
+            HcSeparatorComponent,
+            PermissionDirective], exports: [AuthFormComponent, PermissionDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgxHichchiAuthModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            ButtonComponent,
+            HcCardComponent,
+            HcCardComponent,
+            HcSeparatorComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NgxHichchiAuthModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [AuthFormComponent],
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        ButtonComponent,
+                        HcCardComponent,
+                        HcCardComponent,
+                        HcSeparatorComponent,
+                        PermissionDirective,
+                    ],
+                    exports: [AuthFormComponent, PermissionDirective],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AuthFormComponent, AuthGuardCondition, AuthService, AuthState, NgxHichchiAuthModule, PermissionDirective, SKIPPED_ERRORS, authGuard, authInterceptor, roleGuard };
+//# sourceMappingURL=hichchi-ngx-auth.mjs.map