@nauth-toolkit/client-angular 0.1.53 → 0.1.55

package/src/ngmodule/http-adapter.ts

@@ -0,0 +1,79 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { firstValueFrom } from 'rxjs';
+import { HttpAdapter, HttpRequest, HttpResponse, NAuthClientError, NAuthErrorCode } from '@nauth-toolkit/client';
+
+/**
+ * HTTP adapter for Angular using HttpClient.
+ *
+ * This adapter:
+ * - Uses Angular's HttpClient for all requests
+ * - Works with Angular's HTTP interceptors (including authInterceptor)
+ * - Auto-provided via Angular DI (providedIn: 'root')
+ * - Converts HttpClient responses to HttpResponse format
+ * - Converts HttpErrorResponse to NAuthClientError
+ *
+ * Users don't need to configure this manually - it's automatically
+ * injected when using AuthService in Angular apps.
+ *
+ * @example
+ * ```typescript
+ * // Automatic usage (no manual setup needed)
+ * // AuthService automatically injects AngularHttpAdapter
+ * constructor(private auth: AuthService) {}
+ * ```
+ */
+@Injectable()
+export class AngularHttpAdapter implements HttpAdapter {
+  constructor(private readonly http: HttpClient) {}
+
+  /**
+   * Execute HTTP request using Angular's HttpClient.
+   *
+   * @param config - Request configuration
+   * @returns Response with parsed data
+   * @throws NAuthClientError if request fails
+   */
+  async request<T>(config: HttpRequest): Promise<HttpResponse<T>> {
+    try {
+      // Use Angular's HttpClient - goes through ALL interceptors
+      const data = await firstValueFrom(
+        this.http.request<T>(config.method, config.url, {
+          body: config.body,
+          headers: config.headers,
+          withCredentials: config.credentials === 'include',
+          observe: 'body', // Only return body data
+        }),
+      );
+
+      return {
+        data,
+        status: 200, // HttpClient only returns data on success
+        headers: {}, // Can extract from observe: 'response' if needed
+      };
+    } catch (error) {
+      if (error instanceof HttpErrorResponse) {
+        // Convert Angular's HttpErrorResponse to NAuthClientError
+        const errorData = error.error || {};
+        const code =
+          typeof errorData['code'] === 'string' ? (errorData.code as NAuthErrorCode) : NAuthErrorCode.INTERNAL_ERROR;
+        const message =
+          typeof errorData['message'] === 'string'
+            ? (errorData.message as string)
+            : error.message || `Request failed with status ${error.status}`;
+        const timestamp = typeof errorData['timestamp'] === 'string' ? errorData.timestamp : undefined;
+        const details = errorData['details'] as Record<string, unknown> | undefined;
+
+        throw new NAuthClientError(code, message, {
+          statusCode: error.status,
+          timestamp,
+          details,
+          isNetworkError: error.status === 0, // Network error (no response from server)
+        });
+      }
+
+      // Re-throw non-HTTP errors
+      throw error;
+    }
+  }
+}

package/src/ngmodule/nauth.module.ts

@@ -0,0 +1,59 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { NAUTH_CLIENT_CONFIG } from './tokens';
+import { AuthService } from './auth.service';
+import { AngularHttpAdapter } from './http-adapter';
+import { AuthInterceptor } from './auth.interceptor.class';
+import { NAuthClientConfig } from '@nauth-toolkit/client';
+
+/**
+ * NgModule for nauth-toolkit Angular integration.
+ *
+ * Use this for NgModule-based apps (Angular 17+ with NgModule or legacy apps).
+ *
+ * @example
+ * ```typescript
+ * // app.module.ts
+ * import { NAuthModule } from '@nauth-toolkit/client-angular';
+ *
+ * @NgModule({
+ *   imports: [
+ *     NAuthModule.forRoot({
+ *       baseUrl: 'http://localhost:3000/auth',
+ *       tokenDelivery: 'cookies',
+ *     }),
+ *   ],
+ * })
+ * export class AppModule {}
+ * ```
+ */
+@NgModule({
+  imports: [HttpClientModule],
+  exports: [HttpClientModule],
+})
+export class NAuthModule {
+  static forRoot(config: NAuthClientConfig): ModuleWithProviders<NAuthModule> {
+    return {
+      ngModule: NAuthModule,
+      providers: [
+        {
+          provide: NAUTH_CLIENT_CONFIG,
+          useValue: config,
+        },
+        AngularHttpAdapter,
+        {
+          provide: AuthService,
+          useFactory: (httpAdapter: AngularHttpAdapter) => {
+            return new AuthService(config, httpAdapter);
+          },
+          deps: [AngularHttpAdapter],
+        },
+        {
+          provide: HTTP_INTERCEPTORS,
+          useClass: AuthInterceptor,
+          multi: true,
+        },
+      ],
+    };
+  }
+}

package/src/ngmodule/tokens.ts

@@ -0,0 +1,7 @@
+import { InjectionToken } from '@angular/core';
+import { NAuthClientConfig } from '@nauth-toolkit/client';
+
+/**
+ * Injection token for providing NAuthClientConfig in Angular apps.
+ */
+export const NAUTH_CLIENT_CONFIG = new InjectionToken<NAuthClientConfig>('NAUTH_CLIENT_CONFIG');

package/src/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@nauth-toolkit/client-angular",
+  "ngPackage": {
+    "$schema": "../ng-package.schema.json",
+    "dest": "../dist",
+    "lib": {
+      "entryFile": "public-api.ts"
+    }
+  }
+}
+

package/src/public-api.ts

@@ -0,0 +1,21 @@
+/**
+ * Public API Surface of @nauth-toolkit/client-angular (NgModule)
+ *
+ * This is the default entry point for NgModule-based Angular apps.
+ * For standalone components, use: @nauth-toolkit/client-angular/standalone
+ */
+
+// Re-export core client types and utilities
+export * from '@nauth-toolkit/client';
+
+// Export NgModule-specific components (class-based)
+export * from './ngmodule/tokens';
+export * from './ngmodule/auth.service';
+export * from './ngmodule/http-adapter';
+export * from './ngmodule/auth.interceptor.class';
+export * from './ngmodule/nauth.module';
+
+// Export functional components (for flexibility in NgModule apps too)
+export * from './lib/auth.interceptor';
+export * from './lib/auth.guard';
+export * from './lib/social-redirect-callback.guard';

package/src/standalone/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../ng-package.schema.json",
+  "lib": {
+    "entryFile": "public-api.ts"
+  }
+}
+

package/src/standalone/package.json

@@ -0,0 +1,8 @@
+{
+  "ngPackage": {
+    "lib": {
+      "entryFile": "public-api.ts"
+    }
+  }
+}
+

package/src/standalone/public-api.ts

@@ -0,0 +1,12 @@
+/**
+ * Public API Surface of @nauth-toolkit/client-angular/standalone
+ *
+ * This entry point is for standalone component-based Angular apps (Angular 14+).
+ * For NgModule apps, use: @nauth-toolkit/client-angular
+ *
+ * NOTE: This simply re-exports the main entry point since both share the same code for now.
+ * The split allows future additions like `provideNAuth()` for standalone apps.
+ */
+
+// Re-export everything from the main entry point
+export * from '@nauth-toolkit/client-angular';

package/standalone/auth.guard.ts

@@ -0,0 +1,86 @@
+import { inject } from '@angular/core';
+import { CanActivateFn, Router, UrlTree } from '@angular/router';
+import { AuthService } from './auth.service';
+
+/**
+ * Functional route guard for authentication (Angular 17+).
+ *
+ * Protects routes by checking if user is authenticated.
+ * Redirects to login page if not authenticated.
+ *
+ * @param redirectTo - Path to redirect to if not authenticated (default: '/login')
+ * @returns CanActivateFn guard function
+ *
+ * @example
+ * ```typescript
+ * // In route configuration
+ * const routes: Routes = [
+ *   {
+ *     path: 'home',
+ *     component: HomeComponent,
+ *     canActivate: [authGuard()]
+ *   },
+ *   {
+ *     path: 'admin',
+ *     component: AdminComponent,
+ *     canActivate: [authGuard('/admin/login')]
+ *   }
+ * ];
+ * ```
+ */
+export function authGuard(redirectTo = '/login'): CanActivateFn {
+  return (): boolean | UrlTree => {
+    const auth = inject(AuthService);
+    const router = inject(Router);
+
+    if (auth.isAuthenticated()) {
+      return true;
+    }
+
+    return router.createUrlTree([redirectTo]);
+  };
+}
+
+/**
+ * Class-based authentication guard for NgModule compatibility.
+ *
+ * @example
+ * ```typescript
+ * // In route configuration (NgModule)
+ * const routes: Routes = [
+ *   {
+ *     path: 'home',
+ *     component: HomeComponent,
+ *     canActivate: [AuthGuard]
+ *   }
+ * ];
+ *
+ * // In module providers
+ * @NgModule({
+ *   providers: [AuthGuard]
+ * })
+ * ```
+ */
+export class AuthGuard {
+  /**
+   * @param auth - Authentication service
+   * @param router - Angular router
+   */
+  constructor(
+    private auth: AuthService,
+    private router: Router,
+  ) {}
+
+  /**
+   * Check if route can be activated.
+   *
+   * @returns True if authenticated, otherwise redirects to login
+   */
+  canActivate(): boolean | UrlTree {
+    if (this.auth.isAuthenticated()) {
+      return true;
+    }
+
+    return this.router.createUrlTree(['/login']);
+  }
+}

package/standalone/auth.interceptor.ts

@@ -0,0 +1,194 @@
+import { inject, PLATFORM_ID } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+import { HttpHandlerFn, HttpInterceptorFn, HttpRequest, HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { Router } from '@angular/router';
+import { catchError, switchMap, throwError, filter, take, BehaviorSubject, from } from 'rxjs';
+import { NAUTH_CLIENT_CONFIG } from './tokens';
+import { AuthService } from './auth.service';
+
+/**
+ * Refresh state management.
+ * BehaviorSubject pattern is the industry-standard for token refresh.
+ */
+let isRefreshing = false;
+const refreshTokenSubject = new BehaviorSubject<string | null>(null);
+
+/**
+ * Track retried requests to prevent infinite loops.
+ */
+const retriedRequests = new WeakSet<HttpRequest<unknown>>();
+
+/**
+ * Get CSRF token from cookie.
+ */
+function getCsrfToken(cookieName: string): string | null {
+  if (typeof document === 'undefined') return null;
+  const match = document.cookie.match(new RegExp(`(^| )${cookieName}=([^;]+)`));
+  return match ? decodeURIComponent(match[2]) : null;
+}
+
+/**
+ * Angular HTTP interceptor for nauth-toolkit.
+ *
+ * Handles:
+ * - Cookies mode: withCredentials + CSRF tokens + refresh via POST
+ * - JSON mode: refresh via SDK, retry with new token
+ */
+export const authInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next: HttpHandlerFn) => {
+  const config = inject(NAUTH_CLIENT_CONFIG);
+  const http = inject(HttpClient);
+  const authService = inject(AuthService);
+  const platformId = inject(PLATFORM_ID);
+  const router = inject(Router);
+  const isBrowser = isPlatformBrowser(platformId);
+
+  if (!isBrowser) {
+    return next(req);
+  }
+
+  const tokenDelivery = config.tokenDelivery;
+  const baseUrl = config.baseUrl;
+  const endpoints = config.endpoints ?? {};
+  const refreshPath = endpoints.refresh ?? '/refresh';
+  const loginPath = endpoints.login ?? '/login';
+  const signupPath = endpoints.signup ?? '/signup';
+  const socialExchangePath = endpoints.socialExchange ?? '/social/exchange';
+  const refreshUrl = `${baseUrl}${refreshPath}`;
+
+  const isAuthApiRequest = req.url.includes(baseUrl);
+  const isRefreshEndpoint = req.url.includes(refreshPath);
+  const isPublicEndpoint =
+    req.url.includes(loginPath) || req.url.includes(signupPath) || req.url.includes(socialExchangePath);
+
+  // Build request with credentials (cookies mode only)
+  let authReq = req;
+  if (tokenDelivery === 'cookies') {
+    authReq = authReq.clone({ withCredentials: true });
+
+    if (['POST', 'PUT', 'PATCH', 'DELETE'].includes(req.method)) {
+      const csrfCookieName = config.csrf?.cookieName ?? 'nauth_csrf_token';
+      const csrfHeaderName = config.csrf?.headerName ?? 'x-csrf-token';
+      const csrfToken = getCsrfToken(csrfCookieName);
+      if (csrfToken) {
+        authReq = authReq.clone({ setHeaders: { [csrfHeaderName]: csrfToken } });
+      }
+    }
+  }
+
+  return next(authReq).pipe(
+    catchError((error: unknown) => {
+      const shouldHandle =
+        error instanceof HttpErrorResponse &&
+        error.status === 401 &&
+        isAuthApiRequest &&
+        !isRefreshEndpoint &&
+        !isPublicEndpoint &&
+        !retriedRequests.has(req);
+
+      if (!shouldHandle) {
+        return throwError(() => error);
+      }
+
+      if (config.debug) {
+        console.warn('[nauth-interceptor] 401 detected:', req.url);
+      }
+
+      if (!isRefreshing) {
+        isRefreshing = true;
+        refreshTokenSubject.next(null);
+
+        if (config.debug) {
+          console.warn('[nauth-interceptor] Starting refresh...');
+        }
+
+        // Refresh based on mode
+        const refresh$ =
+          tokenDelivery === 'cookies'
+            ? http.post<{ accessToken?: string }>(refreshUrl, {}, { withCredentials: true })
+            : from(authService.refresh());
+
+        return refresh$.pipe(
+          switchMap((response) => {
+            if (config.debug) {
+              console.warn('[nauth-interceptor] Refresh successful');
+            }
+            isRefreshing = false;
+
+            // Get new token (JSON mode) or signal success (cookies mode)
+            const newToken = 'accessToken' in response ? response.accessToken : 'success';
+            refreshTokenSubject.next(newToken ?? 'success');
+
+            // Build retry request
+            const retryReq = buildRetryRequest(authReq, tokenDelivery, newToken);
+            retriedRequests.add(retryReq);
+
+            if (config.debug) {
+              console.warn('[nauth-interceptor] Retrying:', req.url);
+            }
+            return next(retryReq);
+          }),
+          catchError((err) => {
+            if (config.debug) {
+              console.error('[nauth-interceptor] Refresh failed:', err);
+            }
+            isRefreshing = false;
+            refreshTokenSubject.next(null);
+
+            // Handle session expiration - redirect to configured URL
+            if (config.redirects?.sessionExpired) {
+              router.navigateByUrl(config.redirects.sessionExpired).catch((navError) => {
+                if (config.debug) {
+                  console.error('[nauth-interceptor] Navigation failed:', navError);
+                }
+              });
+            }
+
+            return throwError(() => err);
+          }),
+        );
+      } else {
+        // Wait for ongoing refresh
+        if (config.debug) {
+          console.warn('[nauth-interceptor] Waiting for refresh...');
+        }
+        return refreshTokenSubject.pipe(
+          filter((token): token is string => token !== null),
+          take(1),
+          switchMap((token) => {
+            if (config.debug) {
+              console.warn('[nauth-interceptor] Refresh done, retrying:', req.url);
+            }
+            const retryReq = buildRetryRequest(authReq, tokenDelivery, token);
+            retriedRequests.add(retryReq);
+            return next(retryReq);
+          }),
+        );
+      }
+    }),
+  );
+};
+
+/**
+ * Build retry request with appropriate auth.
+ */
+function buildRetryRequest(
+  originalReq: HttpRequest<unknown>,
+  tokenDelivery: string,
+  newToken?: string,
+): HttpRequest<unknown> {
+  if (tokenDelivery === 'json' && newToken && newToken !== 'success') {
+    return originalReq.clone({
+      setHeaders: { Authorization: `Bearer ${newToken}` },
+    });
+  }
+  return originalReq.clone();
+}
+
+/**
+ * Class-based interceptor for NgModule compatibility.
+ */
+export class AuthInterceptor {
+  intercept(req: HttpRequest<unknown>, next: HttpHandlerFn) {
+    return authInterceptor(req, next);
+  }
+}