mesauth-angular 0.2.14 → 0.2.20

package/README.md

@@ -121,76 +121,69 @@ Avatars are loaded directly from your API using the pattern: `GET /auth/{userId}
      };
      ```
 
-4. Initialize in your app (e.g. `AppComponent` constructor or `AppModule` bootstrap):
+4. Initialize in your app (recommended in `AppComponent` constructor):
+
+    **⚠️ IMPORTANT:** Starting from v0.2.16, `MesAuthService` requires `HttpClient` and optionally `Router` to be passed to the `init()` method. This prevents dependency injection timing issues.
 
     ```ts
-    // in AppComponent
-    constructor(private mesAuth: MesAuthService) {
-      this.mesAuth.init({
-        apiBaseUrl: 'https://api.example.com',
-        withCredentials: true,
-        userBaseUrl: 'https://api.example.com/users'
-      });
+    // In AppComponent constructor (recommended)
+    import { HttpClient } from '@angular/common/http';
+    import { Router } from '@angular/router';
+    import { inject } from '@angular/core';
+    import { MesAuthService } from 'mesauth-angular';
+
+    export class AppComponent {
+      readonly #mesAuthService = inject(MesAuthService);
+      readonly #router = inject(Router);
 
-      this.mesAuth.currentUser$.subscribe(user => console.log('user', user));
-      this.mesAuth.notifications$.subscribe(n => console.log('notif', n));
+      constructor() {
+        // Initialize MesAuth with HttpClient and Router
+        this.#mesAuthService.init(
+          {
+            apiBaseUrl: 'https://api.example.com',
+            withCredentials: true,
+            userBaseUrl: 'https://api.example.com/users'
+          },
+          inject(HttpClient),  // Required: pass HttpClient
+          this.#router         // Optional: pass Router for automatic user refresh on navigation
+        );
+
+        // Subscribe to observables
+        this.#mesAuthService.currentUser$.subscribe(user => console.log('user', user));
+        this.#mesAuthService.notifications$.subscribe(n => console.log('notif', n));
+      }
     }
     ```
 
-    Alternatively, for standalone components or functions (where constructor injection isn't available), use Angular's `inject()`:
+    **Why this change?**
+    - Previous versions injected `HttpClient` and `Router` directly in the service constructor
+    - This caused `NG0203` injection context errors during route loading and early bootstrap
+    - The new pattern delays dependency access until after the app is fully initialized
 
-    ```ts
-    // In a standalone component or function
-    const mesAuth = inject(MesAuthService);
-    mesAuth.init({
-      apiBaseUrl: 'https://api.example.com',
-      withCredentials: true,
-      userBaseUrl: 'https://api.example.com/users'
-    });
+    **For Module-based Apps:**
 
-    mesAuth.currentUser$.subscribe(user => console.log('user', user));
-    mesAuth.notifications$.subscribe(n => console.log('notif', n));
+    ```ts
+    // In AppComponent
+    import { HttpClient } from '@angular/common/http';
+    import { Router } from '@angular/router';
+
+    constructor(
+      private mesAuth: MesAuthService,
+      private http: HttpClient,
+      private router: Router
+    ) {
+      this.mesAuth.init(
+        {
+          apiBaseUrl: 'https://api.example.com',
+          withCredentials: true,
+          userBaseUrl: 'https://api.example.com/users'
+        },
+        this.http,    // Required
+        this.router   // Optional
+      );
+    }
     ```
 
-    **For Standalone Apps (using `bootstrapApplication`):**
-    - After providing the service as above, initialize it using `APP_INITIALIZER` in your `app.config.ts` for app-wide setup, or in the root component.
-    - Example in `app.config.ts` (add to providers):
-
-      ```ts
-      import { APP_INITIALIZER } from '@angular/core';
-      import { MesAuthService } from 'mesauth-angular';
-
-      export const appConfig: ApplicationConfig = {
-        providers: [
-          // ... other providers ...
-          MesAuthService,
-          {
-            provide: APP_INITIALIZER,
-            useFactory: (mesAuth: MesAuthService) => () => {
-              mesAuth.init({
-                apiBaseUrl: 'https://api.example.com',
-                withCredentials: true,
-                userBaseUrl: 'https://api.example.com/users'
-              });
-            },
-            deps: [MesAuthService],
-            multi: true
-          }
-        ]
-      };
-      ```
-
-    - Then, in your root component (e.g., `AppComponent`), subscribe to observables as usual:
-
-      ```ts
-      // In AppComponent (standalone)
-      constructor() {
-        const mesAuth = inject(MesAuthService);
-        mesAuth.currentUser$.subscribe(user => console.log('user', user));
-        mesAuth.notifications$.subscribe(n => console.log('notif', n));
-      }
-      ```
-
 5. Build the package for publishing:
 
     ```bash
@@ -258,7 +251,25 @@ A standalone component for displaying a slide-out notification panel with real-t
 
 ## Changelog
 
-### v0.2.13 (Latest)
+### v0.2.18 (Latest)
+- 🔗 **Interceptor Improvement**: `MesAuthInterceptor` now uses `router.url` instead of `window.location.href` for cleaner returnUrl parameters
+- 📍 **Shorter URLs**: Return URLs are now relative paths (`/dashboard`) instead of full URLs (`https://domain.com/dashboard`)
+- 🔄 **Better Fallback**: Falls back to `window.location.pathname + search` if router URL is unavailable
+
+### v0.2.17
+- 🐛 **ViewChild Fix**: Fixed `MaUserComponent` ViewChild query error by adding `AfterViewInit` lifecycle and `{ static: false }` option
+- ✅ **Error Handling**: Added graceful error handling for 401/403 responses on auth endpoints (silent handling when user not logged in)
+- 🧹 **Clean Console**: Auth errors no longer pollute the console - expected authentication failures are handled silently
+- 🛡️ **Null Safety**: Added null check in `onNotificationRead()` to prevent errors when userProfile is not yet initialized
+
+### v0.2.16
+- 🔧 **Breaking Change**: `init()` method now requires `HttpClient` and optionally `Router` as parameters
+- 🚫 **Injection Fix**: Removed `HttpClient` and `Router` from service constructor to prevent `NG0203` injection context errors
+- ⚡ **Improved Initialization**: Dependencies are now passed explicitly to `init()` method, resolving timing issues during route loading
+- 📝 **API Change**: `init(config: MesAuthConfig, httpClient: HttpClient, router?: Router)`
+- 🎯 **Why**: Fixes dependency injection errors that occurred during lazy route loading and early bootstrap phases
+
+### v0.2.13
 - 🎨 **Notification Format**: Cleaned up notification title format by removing redundant `[sourceAppName]` prefix
 - 📱 **Improved Layout**: Source app name now displayed separately in metadata row for better organization
 - 🔔 **Consistent Toasts**: Toast notifications also updated to use clean title format without app name prefix
@@ -326,6 +337,73 @@ A standalone component for displaying a slide-out notification panel with real-t
 - Avatar endpoint: `GET {apiBaseUrl}/auth/{userId}/avatar`
 - SignalR events used: `ReceiveNotification` (adjust to your backend).
 
+## Migration Guide
+
+### Upgrading from v0.2.15 or earlier to v0.2.16+
+
+The initialization pattern has changed to fix dependency injection timing issues. Follow these steps:
+
+**Before (v0.2.15 and earlier):**
+```ts
+constructor(private mesAuth: MesAuthService) {
+  this.mesAuth.init({
+    apiBaseUrl: 'https://api.example.com',
+    withCredentials: true,
+    userBaseUrl: 'https://api.example.com/users'
+  });
+}
+```
+
+**After (v0.2.16+):**
+```ts
+import { HttpClient } from '@angular/common/http';
+import { Router } from '@angular/router';
+import { inject } from '@angular/core';
+
+export class AppComponent {
+  readonly #mesAuthService = inject(MesAuthService);
+  readonly #router = inject(Router);
+
+  constructor() {
+    // Pass HttpClient and Router to init()
+    this.#mesAuthService.init(
+      {
+        apiBaseUrl: 'https://api.example.com',
+        withCredentials: true,
+        userBaseUrl: 'https://api.example.com/users'
+      },
+      inject(HttpClient),  // Required: add this parameter
+      this.#router         // Optional: add this parameter for auto user refresh
+    );
+  }
+}
+```
+
+**For module-based apps:**
+```ts
+constructor(
+  private mesAuth: MesAuthService,
+  private http: HttpClient,    // Add this
+  private router: Router       // Add this (optional)
+) {
+  this.mesAuth.init(
+    {
+      apiBaseUrl: 'https://api.example.com',
+      withCredentials: true,
+      userBaseUrl: 'https://api.example.com/users'
+    },
+    this.http,    // Add this parameter
+    this.router   // Add this parameter (optional)
+  );
+}
+```
+
+**What changed and why:**
+- `HttpClient` is now required as the 2nd parameter to `init()`
+- `Router` is optional as the 3rd parameter (recommended for SPA user refresh)
+- This fixes `NG0203` injection errors that occurred during route lazy-loading
+- The service constructor is now empty - all dependencies are passed to `init()`
+
 ## Troubleshooting
 
 ### JIT Compiler Error in Production or AOT Mode

package/dist/README.md

@@ -121,76 +121,69 @@ Avatars are loaded directly from your API using the pattern: `GET /auth/{userId}
      };
      ```
 
-4. Initialize in your app (e.g. `AppComponent` constructor or `AppModule` bootstrap):
+4. Initialize in your app (recommended in `AppComponent` constructor):
+
+    **⚠️ IMPORTANT:** Starting from v0.2.16, `MesAuthService` requires `HttpClient` and optionally `Router` to be passed to the `init()` method. This prevents dependency injection timing issues.
 
     ```ts
-    // in AppComponent
-    constructor(private mesAuth: MesAuthService) {
-      this.mesAuth.init({
-        apiBaseUrl: 'https://api.example.com',
-        withCredentials: true,
-        userBaseUrl: 'https://api.example.com/users'
-      });
+    // In AppComponent constructor (recommended)
+    import { HttpClient } from '@angular/common/http';
+    import { Router } from '@angular/router';
+    import { inject } from '@angular/core';
+    import { MesAuthService } from 'mesauth-angular';
+
+    export class AppComponent {
+      readonly #mesAuthService = inject(MesAuthService);
+      readonly #router = inject(Router);
 
-      this.mesAuth.currentUser$.subscribe(user => console.log('user', user));
-      this.mesAuth.notifications$.subscribe(n => console.log('notif', n));
+      constructor() {
+        // Initialize MesAuth with HttpClient and Router
+        this.#mesAuthService.init(
+          {
+            apiBaseUrl: 'https://api.example.com',
+            withCredentials: true,
+            userBaseUrl: 'https://api.example.com/users'
+          },
+          inject(HttpClient),  // Required: pass HttpClient
+          this.#router         // Optional: pass Router for automatic user refresh on navigation
+        );
+
+        // Subscribe to observables
+        this.#mesAuthService.currentUser$.subscribe(user => console.log('user', user));
+        this.#mesAuthService.notifications$.subscribe(n => console.log('notif', n));
+      }
     }
     ```
 
-    Alternatively, for standalone components or functions (where constructor injection isn't available), use Angular's `inject()`:
+    **Why this change?**
+    - Previous versions injected `HttpClient` and `Router` directly in the service constructor
+    - This caused `NG0203` injection context errors during route loading and early bootstrap
+    - The new pattern delays dependency access until after the app is fully initialized
 
-    ```ts
-    // In a standalone component or function
-    const mesAuth = inject(MesAuthService);
-    mesAuth.init({
-      apiBaseUrl: 'https://api.example.com',
-      withCredentials: true,
-      userBaseUrl: 'https://api.example.com/users'
-    });
+    **For Module-based Apps:**
 
-    mesAuth.currentUser$.subscribe(user => console.log('user', user));
-    mesAuth.notifications$.subscribe(n => console.log('notif', n));
+    ```ts
+    // In AppComponent
+    import { HttpClient } from '@angular/common/http';
+    import { Router } from '@angular/router';
+
+    constructor(
+      private mesAuth: MesAuthService,
+      private http: HttpClient,
+      private router: Router
+    ) {
+      this.mesAuth.init(
+        {
+          apiBaseUrl: 'https://api.example.com',
+          withCredentials: true,
+          userBaseUrl: 'https://api.example.com/users'
+        },
+        this.http,    // Required
+        this.router   // Optional
+      );
+    }
     ```
 
-    **For Standalone Apps (using `bootstrapApplication`):**
-    - After providing the service as above, initialize it using `APP_INITIALIZER` in your `app.config.ts` for app-wide setup, or in the root component.
-    - Example in `app.config.ts` (add to providers):
-
-      ```ts
-      import { APP_INITIALIZER } from '@angular/core';
-      import { MesAuthService } from 'mesauth-angular';
-
-      export const appConfig: ApplicationConfig = {
-        providers: [
-          // ... other providers ...
-          MesAuthService,
-          {
-            provide: APP_INITIALIZER,
-            useFactory: (mesAuth: MesAuthService) => () => {
-              mesAuth.init({
-                apiBaseUrl: 'https://api.example.com',
-                withCredentials: true,
-                userBaseUrl: 'https://api.example.com/users'
-              });
-            },
-            deps: [MesAuthService],
-            multi: true
-          }
-        ]
-      };
-      ```
-
-    - Then, in your root component (e.g., `AppComponent`), subscribe to observables as usual:
-
-      ```ts
-      // In AppComponent (standalone)
-      constructor() {
-        const mesAuth = inject(MesAuthService);
-        mesAuth.currentUser$.subscribe(user => console.log('user', user));
-        mesAuth.notifications$.subscribe(n => console.log('notif', n));
-      }
-      ```
-
 5. Build the package for publishing:
 
     ```bash
@@ -258,7 +251,25 @@ A standalone component for displaying a slide-out notification panel with real-t
 
 ## Changelog
 
-### v0.2.13 (Latest)
+### v0.2.18 (Latest)
+- 🔗 **Interceptor Improvement**: `MesAuthInterceptor` now uses `router.url` instead of `window.location.href` for cleaner returnUrl parameters
+- 📍 **Shorter URLs**: Return URLs are now relative paths (`/dashboard`) instead of full URLs (`https://domain.com/dashboard`)
+- 🔄 **Better Fallback**: Falls back to `window.location.pathname + search` if router URL is unavailable
+
+### v0.2.17
+- 🐛 **ViewChild Fix**: Fixed `MaUserComponent` ViewChild query error by adding `AfterViewInit` lifecycle and `{ static: false }` option
+- ✅ **Error Handling**: Added graceful error handling for 401/403 responses on auth endpoints (silent handling when user not logged in)
+- 🧹 **Clean Console**: Auth errors no longer pollute the console - expected authentication failures are handled silently
+- 🛡️ **Null Safety**: Added null check in `onNotificationRead()` to prevent errors when userProfile is not yet initialized
+
+### v0.2.16
+- 🔧 **Breaking Change**: `init()` method now requires `HttpClient` and optionally `Router` as parameters
+- 🚫 **Injection Fix**: Removed `HttpClient` and `Router` from service constructor to prevent `NG0203` injection context errors
+- ⚡ **Improved Initialization**: Dependencies are now passed explicitly to `init()` method, resolving timing issues during route loading
+- 📝 **API Change**: `init(config: MesAuthConfig, httpClient: HttpClient, router?: Router)`
+- 🎯 **Why**: Fixes dependency injection errors that occurred during lazy route loading and early bootstrap phases
+
+### v0.2.13
 - 🎨 **Notification Format**: Cleaned up notification title format by removing redundant `[sourceAppName]` prefix
 - 📱 **Improved Layout**: Source app name now displayed separately in metadata row for better organization
 - 🔔 **Consistent Toasts**: Toast notifications also updated to use clean title format without app name prefix
@@ -326,6 +337,73 @@ A standalone component for displaying a slide-out notification panel with real-t
 - Avatar endpoint: `GET {apiBaseUrl}/auth/{userId}/avatar`
 - SignalR events used: `ReceiveNotification` (adjust to your backend).
 
+## Migration Guide
+
+### Upgrading from v0.2.15 or earlier to v0.2.16+
+
+The initialization pattern has changed to fix dependency injection timing issues. Follow these steps:
+
+**Before (v0.2.15 and earlier):**
+```ts
+constructor(private mesAuth: MesAuthService) {
+  this.mesAuth.init({
+    apiBaseUrl: 'https://api.example.com',
+    withCredentials: true,
+    userBaseUrl: 'https://api.example.com/users'
+  });
+}
+```
+
+**After (v0.2.16+):**
+```ts
+import { HttpClient } from '@angular/common/http';
+import { Router } from '@angular/router';
+import { inject } from '@angular/core';
+
+export class AppComponent {
+  readonly #mesAuthService = inject(MesAuthService);
+  readonly #router = inject(Router);
+
+  constructor() {
+    // Pass HttpClient and Router to init()
+    this.#mesAuthService.init(
+      {
+        apiBaseUrl: 'https://api.example.com',
+        withCredentials: true,
+        userBaseUrl: 'https://api.example.com/users'
+      },
+      inject(HttpClient),  // Required: add this parameter
+      this.#router         // Optional: add this parameter for auto user refresh
+    );
+  }
+}
+```
+
+**For module-based apps:**
+```ts
+constructor(
+  private mesAuth: MesAuthService,
+  private http: HttpClient,    // Add this
+  private router: Router       // Add this (optional)
+) {
+  this.mesAuth.init(
+    {
+      apiBaseUrl: 'https://api.example.com',
+      withCredentials: true,
+      userBaseUrl: 'https://api.example.com/users'
+    },
+    this.http,    // Add this parameter
+    this.router   // Add this parameter (optional)
+  );
+}
+```
+
+**What changed and why:**
+- `HttpClient` is now required as the 2nd parameter to `init()`
+- `Router` is optional as the 3rd parameter (recommended for SPA user refresh)
+- This fixes `NG0203` injection errors that occurred during route lazy-loading
+- The service constructor is now empty - all dependencies are passed to `init()`
+
 ## Troubleshooting
 
 ### JIT Compiler Error in Production or AOT Mode