@acontplus/ng-auth 2.1.0 → 2.1.1

package/README.md

@@ -56,13 +56,13 @@ export const appConfig: ApplicationConfig = {
     provideHttpClient(
       withInterceptors([
         authRedirectInterceptor, // Handles 401 errors
-        csrfInterceptor,         // CSRF protection
-      ])
+        csrfInterceptor, // CSRF protection
+      ]),
     ),
-    
+
     // Auth services
     ...authProviders,
-    
+
     // Environment config
     {
       provide: ENVIRONMENT,
@@ -86,11 +86,11 @@ import { authGuard } from '@acontplus/ng-auth';
 export const routes: Routes = [
   {
     path: 'auth',
-    loadComponent: () => import('./pages/auth').then(m => m.AuthPage),
+    loadComponent: () => import('./pages/auth').then((m) => m.AuthPage),
   },
   {
     path: 'dashboard',
-    loadComponent: () => import('./pages/dashboard').then(m => m.Dashboard),
+    loadComponent: () => import('./pages/dashboard').then((m) => m.Dashboard),
     canActivate: [authGuard], // 👈 Protected route
   },
 ];
@@ -108,11 +108,11 @@ import { AuthState } from '@acontplus/ng-auth';
   template: `
     <h1>Welcome, {{ authState.user()?.displayName }}!</h1>
     <p>Email: {{ authState.user()?.email }}</p>
-    
+
     @if (authState.isLoading()) {
       <p>Loading...</p>
     }
-    
+
     <button (click)="logout()">Logout</button>
   `,
 })
@@ -139,10 +139,10 @@ const authState = inject(AuthState);
 
 // Reactive state (signals)
 authState.isAuthenticated(); // Signal<boolean>
-authState.user();            // Signal<UserData | null>
-authState.isLoading();       // Signal<boolean>
-authState.mfaRequired();     // Signal<boolean>
-authState.emailVerified();   // Signal<boolean>
+authState.user(); // Signal<UserData | null>
+authState.isLoading(); // Signal<boolean>
+authState.mfaRequired(); // Signal<boolean>
+authState.emailVerified(); // Signal<boolean>
 
 // Authentication methods
 authState.login({ email, password, rememberMe }).subscribe();
@@ -189,6 +189,7 @@ const routes: Routes = [
 ```
 
 **How it works:**
+
 1. User tries to access `/admin/settings`
 2. `authGuard` checks authentication
 3. If not authenticated: stores URL → redirects to login
@@ -205,38 +206,36 @@ import { AuthTokenRepositoryImpl } from '@acontplus/ng-auth';
 const tokenRepo = inject(AuthTokenRepositoryImpl);
 
 // Token operations
-tokenRepo.getToken();              // Get access token
-tokenRepo.getRefreshToken();       // Get refresh token
+tokenRepo.getToken(); // Get access token
+tokenRepo.getRefreshToken(); // Get refresh token
 tokenRepo.saveTokens(tokens, rememberMe);
 tokenRepo.clearTokens();
 
 // Validation
-tokenRepo.isAuthenticated();       // Check if token is valid
-tokenRepo.needsRefresh();          // Check if token needs refresh
+tokenRepo.isAuthenticated(); // Check if token is valid
+tokenRepo.needsRefresh(); // Check if token needs refresh
 
 // User data extraction from JWT
-tokenRepo.getUserData();           // Returns UserData | null
-tokenRepo.isRememberMeEnabled();   // Check storage location
+tokenRepo.getUserData(); // Returns UserData | null
+tokenRepo.isRememberMeEnabled(); // Check storage location
 ```
 
 ### Interceptors
 
 **Auth Redirect Interceptor** - Handles 401 errors:
+
 ```typescript
 import { authRedirectInterceptor } from '@acontplus/ng-auth';
 
-provideHttpClient(
-  withInterceptors([authRedirectInterceptor])
-);
+provideHttpClient(withInterceptors([authRedirectInterceptor]));
 ```
 
 **CSRF Interceptor** - Adds CSRF tokens:
+
 ```typescript
 import { csrfInterceptor } from '@acontplus/ng-auth';
 
-provideHttpClient(
-  withInterceptors([csrfInterceptor])
-);
+provideHttpClient(withInterceptors([csrfInterceptor]));
 ```
 
 ## Login Component
@@ -269,10 +268,10 @@ export class AuthPage {}
       [additionalSignupControls]="extraSignupFields"
       [footerContent]="footer"
     />
-    
+
     <ng-template #footer>
       <div class="text-center">
-        <a href="/terms">Terms</a> | 
+        <a href="/terms">Terms</a> |
         <a href="/privacy">Privacy</a>
       </div>
     </ng-template>
@@ -282,7 +281,7 @@ export class AuthPage {
   extraSigninFields = {
     companyId: new FormControl('', Validators.required),
   };
-  
+
   extraSignupFields = {
     role: new FormControl('user', Validators.required),
   };
@@ -291,16 +290,16 @@ export class AuthPage {
 
 ### Component Inputs
 
-| Input | Type | Default | Description |
-|-------|------|---------|-------------|
-| `title` | `string` | `'Login'` | Card title |
-| `showRegisterButton` | `boolean` | `true` | Show register toggle |
-| `showRememberMe` | `boolean` | `true` | Show remember me checkbox |
-| `additionalSigninControls` | `Record<string, AbstractControl>` | `{}` | Extra login fields |
-| `additionalSignupControls` | `Record<string, AbstractControl>` | `{}` | Extra signup fields |
-| `additionalSigninFields` | `TemplateRef` | `null` | Custom login template |
-| `additionalSignupFields` | `TemplateRef` | `null` | Custom signup template |
-| `footerContent` | `TemplateRef` | `null` | Custom footer |
+| Input                      | Type                              | Default   | Description               |
+| -------------------------- | --------------------------------- | --------- | ------------------------- |
+| `title`                    | `string`                          | `'Login'` | Card title                |
+| `showRegisterButton`       | `boolean`                         | `true`    | Show register toggle      |
+| `showRememberMe`           | `boolean`                         | `true`    | Show remember me checkbox |
+| `additionalSigninControls` | `Record<string, AbstractControl>` | `{}`      | Extra login fields        |
+| `additionalSignupControls` | `Record<string, AbstractControl>` | `{}`      | Extra signup fields       |
+| `additionalSigninFields`   | `TemplateRef`                     | `null`    | Custom login template     |
+| `additionalSignupFields`   | `TemplateRef`                     | `null`    | Custom signup template    |
+| `footerContent`            | `TemplateRef`                     | `null`    | Custom footer             |
 
 ## Architecture
 
@@ -330,6 +329,7 @@ ng-auth/
 ```
 
 **Key decisions:**
+
 - ❌ No use cases layer (unnecessary for a library)
 - ✅ AuthState consolidates all auth operations
 - ✅ Signals for reactive state
@@ -353,15 +353,17 @@ import { Login, AuthState } from '@acontplus/ng-auth';
       <acp-login title="Welcome to Acontplus" />
     </div>
   `,
-  styles: [`
-    .auth-container {
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    }
-  `],
+  styles: [
+    `
+      .auth-container {
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      }
+    `,
+  ],
 })
 export class AuthPage {}
 ```
@@ -387,15 +389,15 @@ import { Router } from '@angular/router';
           }
         </div>
       </header>
-      
+
       <main>
         <p>Welcome back, {{ user()?.displayName }}!</p>
         <p>Email: {{ user()?.email }}</p>
-        
+
         @if (user()?.roles?.includes('admin')) {
           <a routerLink="/admin">Admin Panel</a>
         }
-        
+
         @if (!emailVerified()) {
           <div class="warning">
             Please verify your email
@@ -409,17 +411,17 @@ import { Router } from '@angular/router';
 export class Dashboard {
   private readonly authState = inject(AuthState);
   private readonly router = inject(Router);
-  
+
   // Reactive state
   user = this.authState.user;
   emailVerified = this.authState.emailVerified;
-  
+
   logout() {
     this.authState.logout().subscribe(() => {
       this.router.navigate(['/auth']);
     });
   }
-  
+
   resendVerification() {
     const email = this.user()?.email;
     if (email) {
@@ -434,15 +436,16 @@ export class Dashboard {
 If you're upgrading from the old version:
 
 ### ❌ Before (Use Cases)
+
 ```typescript
 import { LoginUseCase, LogoutUseCase } from '@acontplus/ng-auth';
 
 export class MyComponent {
   constructor(
     private loginUseCase: LoginUseCase,
-    private logoutUseCase: LogoutUseCase
+    private logoutUseCase: LogoutUseCase,
   ) {}
-  
+
   login() {
     this.loginUseCase.execute({ email, password }).subscribe();
   }
@@ -450,13 +453,14 @@ export class MyComponent {
 ```
 
 ### ✅ After (AuthState)
+
 ```typescript
 import { inject } from '@angular/core';
 import { AuthState } from '@acontplus/ng-auth';
 
 export class MyComponent {
   private authState = inject(AuthState);
-  
+
   login() {
     this.authState.login({ email, password }).subscribe();
   }
@@ -566,17 +570,13 @@ import { Login } from '@acontplus/ng-auth';
   selector: 'app-auth',
   standalone: true,
   imports: [Login],
-  template: `
-    <acp-login
-      [enableDomainDiscovery]="true"
-      [showSocialLogin]="true"
-    />
-  `,
+  template: ` <acp-login [enableDomainDiscovery]="true" [showSocialLogin]="true" /> `,
 })
 export class AuthPage {}
 ```
 
 **How it works:**
+
 1. User types email: `user@acme.com`
 2. Library calls `/api/auth/domain-discovery` with email
 3. Backend responds with OAuth provider and tenant info
@@ -601,6 +601,7 @@ export const routes: Routes = [
 ```
 
 Configure these redirect URIs in your OAuth provider:
+
 - Google: `https://your-app.com/auth/callback/google`
 - Microsoft: `https://your-app.com/auth/callback/microsoft`
 - GitHub: `https://your-app.com/auth/callback/github`
@@ -617,13 +618,11 @@ import { AuthState } from '@acontplus/ng-auth';
   selector: 'app-custom-login',
   template: `
     <input #emailInput (blur)="checkDomain(emailInput.value)" />
-    
+
     @if (discovery?.requiresOAuth) {
-      <button (click)="loginWithOAuth()">
-        Login with {{ discovery.provider }}
-      </button>
+      <button (click)="loginWithOAuth()">Login with {{ discovery.provider }}</button>
     }
-    
+
     @if (discovery?.allowPasswordLogin) {
       <input type="password" [(ngModel)]="password" />
       <button (click)="loginWithPassword()">Login</button>
@@ -632,11 +631,11 @@ import { AuthState } from '@acontplus/ng-auth';
 })
 export class CustomLogin {
   private authState = inject(AuthState);
-  
+
   email = '';
   password = '';
   discovery: DomainDiscoveryResponse | null = null;
-  
+
   checkDomain(email: string) {
     this.email = email;
     this.authState.discoverDomain(email).subscribe({
@@ -645,10 +644,10 @@ export class CustomLogin {
       },
     });
   }
-  
+
   loginWithOAuth() {
     if (!this.discovery?.provider) return;
-    
+
     // This redirects to OAuth provider
     this.authState.startOAuthFlow({
       provider: this.discovery.provider,
@@ -656,12 +655,14 @@ export class CustomLogin {
       domain: this.discovery.domain,
     });
   }
-  
+
   loginWithPassword() {
-    this.authState.login({
-      email: this.email,
-      password: this.password,
-    }).subscribe();
+    this.authState
+      .login({
+        email: this.email,
+        password: this.password,
+      })
+      .subscribe();
   }
 }
 ```
@@ -682,18 +683,14 @@ import { AuthState } from '@acontplus/ng-auth';
 export class MyOAuthCallback implements OnInit {
   private authState = inject(AuthState);
   private route = inject(ActivatedRoute);
-  
+
   ngOnInit() {
     const provider = this.route.snapshot.paramMap.get('provider');
     const code = this.route.snapshot.queryParamMap.get('code');
     const state = this.route.snapshot.queryParamMap.get('state');
-    
+
     if (provider && code && state) {
-      this.authState.handleOAuthCallback(
-        provider as SocialProvider,
-        code,
-        state
-      ).subscribe({
+      this.authState.handleOAuthCallback(provider as SocialProvider, code, state).subscribe({
         next: () => {
           // Success - AuthState redirects automatically
         },
@@ -715,10 +712,10 @@ Here's a Node.js/Express example for Google Workspace multi-tenant:
 app.post('/api/auth/domain-discovery', async (req, res) => {
   const { email } = req.body;
   const domain = email.split('@')[1];
-  
+
   // Check if domain is configured for OAuth
   const tenant = await db.tenants.findOne({ domain });
-  
+
   if (tenant?.oauthProvider === 'google') {
     return res.json({
       provider: 'google',
@@ -728,7 +725,7 @@ app.post('/api/auth/domain-discovery', async (req, res) => {
       allowPasswordLogin: tenant.allowPasswordFallback,
     });
   }
-  
+
   // Default to password login
   res.json({
     requiresOAuth: false,
@@ -739,25 +736,25 @@ app.post('/api/auth/domain-discovery', async (req, res) => {
 // Get OAuth URL
 app.get('/api/auth/social/google/url', async (req, res) => {
   const { tenantId, domain } = req.query;
-  
+
   const tenant = await db.tenants.findOne({ id: tenantId });
   const state = crypto.randomBytes(32).toString('hex');
-  
+
   // Store state for verification
   await redis.set(`oauth:state:${state}`, tenantId, 'EX', 600);
-  
+
   const authUrl = new URL('https://accounts.google.com/o/oauth2/v2/auth');
   authUrl.searchParams.set('client_id', tenant.googleClientId);
   authUrl.searchParams.set('redirect_uri', 'https://your-app.com/auth/callback/google');
   authUrl.searchParams.set('response_type', 'code');
   authUrl.searchParams.set('scope', 'openid email profile');
   authUrl.searchParams.set('state', state);
-  
+
   // Tenant hint for Google Workspace
   if (domain) {
     authUrl.searchParams.set('hd', domain);
   }
-  
+
   res.json({
     url: authUrl.toString(),
     state,
@@ -767,15 +764,15 @@ app.get('/api/auth/social/google/url', async (req, res) => {
 // OAuth callback
 app.post('/api/auth/social/google/callback', async (req, res) => {
   const { code, state, tenantId } = req.body;
-  
+
   // Verify state
   const storedTenantId = await redis.get(`oauth:state:${state}`);
   if (!storedTenantId) {
     return res.status(400).json({ error: 'Invalid state' });
   }
-  
+
   const tenant = await db.tenants.findOne({ id: tenantId });
-  
+
   // Exchange code for tokens
   const tokenResponse = await fetch('https://oauth2.googleapis.com/token', {
     method: 'POST',
@@ -788,20 +785,20 @@ app.post('/api/auth/social/google/callback', async (req, res) => {
       redirect_uri: 'https://your-app.com/auth/callback/google',
     }),
   });
-  
+
   const tokens = await tokenResponse.json();
-  
+
   // Get user info
   const userInfo = await fetch('https://www.googleapis.com/oauth2/v2/userinfo', {
     headers: { Authorization: `Bearer ${tokens.access_token}` },
-  }).then(r => r.json());
-  
+  }).then((r) => r.json());
+
   // Verify domain matches tenant
   const userDomain = userInfo.email.split('@')[1];
   if (tenant.domain !== userDomain) {
     return res.status(403).json({ error: 'Domain mismatch' });
   }
-  
+
   // Create or update user
   const user = await db.users.upsert({
     email: userInfo.email,
@@ -809,10 +806,10 @@ app.post('/api/auth/social/google/callback', async (req, res) => {
     tenantId: tenant.id,
     emailVerified: userInfo.verified_email,
   });
-  
+
   // Generate JWT
   const jwt = generateJWT(user);
-  
+
   res.json({
     token: jwt,
     refreshToken: generateRefreshToken(user),
@@ -826,23 +823,23 @@ app.post('/api/auth/social/google/callback', async (req, res) => {
 // Tenant configuration for admin panel
 interface TenantConfig {
   tenantId: string;
-  domain: string;              // e.g., "acme.com"
-  displayName: string;          // e.g., "Acme Corporation"
+  domain: string; // e.g., "acme.com"
+  displayName: string; // e.g., "Acme Corporation"
   provider: 'google' | 'microsoft';
-  
+
   // OAuth credentials
   clientId: string;
-  clientSecret: string;         // Stored securely on backend
-  issuer?: string;              // For OIDC providers
-  
+  clientSecret: string; // Stored securely on backend
+  issuer?: string; // For OIDC providers
+
   // Settings
-  allowedDomains?: string[];    // Additional domains
+  allowedDomains?: string[]; // Additional domains
   allowPasswordLogin: boolean;
-  autoProvision: boolean;       // Auto-create users on first login
-  
+  autoProvision: boolean; // Auto-create users on first login
+
   customParameters?: {
-    hd?: string;                // Google Workspace domain hint
-    tenant?: string;            // Azure AD tenant ID
+    hd?: string; // Google Workspace domain hint
+    tenant?: string; // Azure AD tenant ID
   };
 }
 ```
@@ -850,6 +847,7 @@ interface TenantConfig {
 ### Testing OAuth Locally
 
 For local development, use these redirect URIs:
+
 - `http://localhost:4200/auth/callback/google`
 - `http://localhost:4200/auth/callback/microsoft`
 
@@ -870,22 +868,22 @@ Configure your OAuth apps with these URLs in development mode.
 // Tenants table
 interface Tenant {
   id: string;
-  domain: string;              // "acme.com"
-  displayName: string;         // "Acme Corporation"
+  domain: string; // "acme.com"
+  displayName: string; // "Acme Corporation"
   oauthProvider: 'google' | 'microsoft' | 'apple' | null;
-  
+
   // OAuth credentials (encrypted at rest!)
   googleClientId?: string;
   googleClientSecret?: string;
   microsoftClientId?: string;
   microsoftClientSecret?: string;
-  azureTenantId?: string;      // For Azure AD
-  
+  azureTenantId?: string; // For Azure AD
+
   // Settings
   allowPasswordLogin: boolean;
   autoProvisionUsers: boolean; // Auto-create users on first OAuth login
   requireEmailVerification: boolean;
-  
+
   createdAt: Date;
   updatedAt: Date;
 }
@@ -895,15 +893,15 @@ interface User {
   id: string;
   email: string;
   displayName: string;
-  tenantId?: string;           // Reference to tenant
+  tenantId?: string; // Reference to tenant
   emailVerified: boolean;
-  
+
   // Track which auth method they used
   authProvider: 'password' | 'google' | 'microsoft' | 'github' | 'apple';
-  
+
   // OAuth user ID from provider
   oauthProviderId?: string;
-  
+
   createdAt: Date;
   lastLoginAt: Date;
 }
@@ -928,6 +926,7 @@ interface User {
    - Example: `authUrl.searchParams.set('hd', 'acme.com')`
 
 **Scopes needed:**
+
 - `openid` - Basic authentication
 - `email` - User's email address
 - `profile` - User's name and photo
@@ -954,6 +953,7 @@ interface User {
 11. Add: `openid`, `email`, `profile`
 
 **For multi-tenant:**
+
 - Use tenant-specific endpoint: `https://login.microsoftonline.com/{tenantId}/oauth2/v2.0/authorize`
 - Or use common endpoint: `https://login.microsoftonline.com/common/oauth2/v2.0/authorize`
 
@@ -969,6 +969,7 @@ interface User {
 5. Copy **Client ID** and generate **Client Secret**
 
 **Scopes needed:**
+
 - `user:email` - Access user's email address
 - `read:user` - Read user profile information
 
@@ -982,6 +983,7 @@ interface User {
 **Cause**: The redirect URI in your OAuth request doesn't match what's configured in the provider's settings.
 
 **Solutions**:
+
 1. Ensure exact match including protocol (`http://` vs `https://`), port, and path
 2. No trailing slash unless configured that way
 3. Check for typos in domain name
@@ -995,6 +997,7 @@ interface User {
 **Cause**: OAuth state token expired or doesn't match.
 
 **Solutions**:
+
 1. Increase Redis/storage TTL for state tokens (recommended: 600 seconds)
 2. User may have taken too long to complete OAuth flow
 3. Ensure state is properly stored before redirect
@@ -1008,6 +1011,7 @@ interface User {
 **Cause**: User authenticated with an account from a different organization.
 
 **Solutions**:
+
 1. For Google: Use `hd` parameter to force specific domain
 2. Show clear error message explaining which domain is expected
 3. Verify domain matching logic in backend before issuing JWT
@@ -1021,6 +1025,7 @@ interface User {
 **Cause**: Frontend or backend error during token exchange.
 
 **Solutions**:
+
 1. Check browser console for JavaScript errors
 2. Verify backend endpoint is responding
 3. Check CORS configuration on backend
@@ -1036,29 +1041,29 @@ interface User {
 describe('OAuth Flow', () => {
   let authState: AuthState;
   let httpMock: HttpTestingController;
-  
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule],
       providers: [AuthState, ...authProviders],
     });
-    
+
     authState = TestBed.inject(AuthState);
     httpMock = TestBed.inject(HttpTestingController);
   });
-  
+
   it('should discover Google Workspace tenant', (done) => {
-    authState.discoverDomain('user@acme.com').subscribe(result => {
+    authState.discoverDomain('user@acme.com').subscribe((result) => {
       expect(result.provider).toBe('google');
       expect(result.tenantId).toBe('acme-123');
       expect(result.requiresOAuth).toBe(true);
       done();
     });
-    
+
     const req = httpMock.expectOne('/api/auth/domain-discovery');
     expect(req.request.method).toBe('POST');
     expect(req.request.body).toEqual({ email: 'user@acme.com' });
-    
+
     req.flush({
       provider: 'google',
       tenantId: 'acme-123',
@@ -1066,25 +1071,23 @@ describe('OAuth Flow', () => {
       allowPasswordLogin: false,
     });
   });
-  
+
   it('should start OAuth flow with tenant context', () => {
     spyOn(window.location, 'href', 'set');
-    
+
     authState.startOAuthFlow({
       provider: 'google',
       tenantId: 'acme-123',
       domain: 'acme.com',
     });
-    
-    const req = httpMock.expectOne(
-      req => req.url.includes('/api/auth/social/google/url')
-    );
-    
+
+    const req = httpMock.expectOne((req) => req.url.includes('/api/auth/social/google/url'));
+
     req.flush({
       url: 'https://accounts.google.com/o/oauth2/v2/auth?...',
       state: 'test-state-token',
     });
-    
+
     // Verify state stored in session storage
     expect(sessionStorage.getItem('oauth_state')).toBe('test-state-token');
     expect(sessionStorage.getItem('oauth_tenant_id')).toBe('acme-123');