feat(ngx-auth): Add interceptor and authenticated http client

Author: IbenTesara

apps/docs/src/app/pages/docs/angular/authentication/implementation/index.md

@@ -4,7 +4,7 @@ keyword: ImplementationPage
 
 ## Setup
 
-In order to use `ngx-auth`, we use the `provideNgxAuthenticationConfiguration` provider that requires an implementation of the `NgxAuthenticationAbstractService` to provide the service to the application. We advise you to provide this in the root of your application.
+In order to use `ngx-auth`, we use the `provideNgxAuthenticationConfiguration` provider that requires an implementation of the `NgxAuthenticationAbstractService` to provide the service to the application. We advise you to provide this in the `bootstrapApplication` of your project.
 
 ```ts
 providers: [
@@ -68,6 +68,55 @@ The services provides access to the user, session and metadata by providing the
 
 By default, features are provided on a user basis. However, we are aware that certain features might be set globally regardless of the authentication status of the user. You can do so be calling the `setGlobalFeatures` method. These features will always be available to any user, anonymous or not.
 
+## NgxAuthenticatedHttpClient
+
+Additionally, you can use the `NgxAuthenticatedHttpClient` to further enhance your developer experience. Given its opinionated nature, it's entirely optional withing the `ngx-auth` package.
+
+By providing additional `httpClientConfiguration` to the `provideNgxAuthenticationConfiguration` function, as seen below, we can now use the `HttpClient` wrapper. We no longer have to provide the `HttpClient` itself by calling `provideHttpClient`, this is done automatically by the configuration provider.
+
+```ts
+providers: [
+    ...,
+    provideNgxAuthenticationConfiguration({
+        service: YourAuthenticationService,
+        httpClientConfiguration: {
+            baseUrl: () => environment.baseUrl,
+            interceptors: [MyCustomInterceptor],
+            authenticatedCallHandler: MyAuthenticatedCallHandler
+        }
+        })
+]
+
+```
+
+The configuration has three optional items. `baseUrl` is a function that will be called at injection time and provides the base url we'll add to each request url. We do this according to the `baseurl/request-url` pattern.
+
+Using the optional `interceptors`, we can provide other custom made interceptors to the application. By providing `authenticatedCallHandler` we can make changes to any request that is considered an authenticated request, which will be explained further below.
+
+The `NgxAuthenticatedHttpClient` comes with two added benefits. On one hand, it automatically adds a base-url to all of your request calls. On the other, it integrates with the `NgxAuthenticatedHttpInterceptor` which will automatically call your interceptor function whenever a call with authentication is made.
+
+Our `HttpClient` wrapper provides an implementation for `get`, `post`, `push`, `patch` and `delete` calls. On top of that, it also provides an extra method, `download`, which adds extra information to a `GET` request specifically for downloading `Blobs`. In the example below you see can see the `get` method in action.
+
+```ts
+const httpClient = inject(NgxAuthenticatedHttpClient);
+
+public getData(): Observable<Data> {
+    return httpClient.get<Data>('get-data')
+}
+```
+
+In the example above we do a simple get call to fetch data from an end-point. We have the ability to pass params as the second parameter.
+
+As this is an opinionated wrapper, we assume that most calls are made within an authenticated state. Because of that, the base assumption is that we can set the `withCredentials` flag to true by default. In the example below, we show how you can overwrite that.
+
+```ts
+const httpClient = inject(NgxAuthenticatedHttpClient);
+
+public loginUser(data: HttParams): Observable<Data> {
+    return httpClient.post<Data>('login', data, false )
+}
+```
+
 ## Guards
 
 All guards depend on being provided specific data in the `data` block of the route. We strongly advise to type your routes as the provided `NgxAuthenticatedRoute` instead of the default `Route`. This way, you'll ensure that your routes always provide the necessary data for the guards.
@@ -127,9 +176,7 @@ The `ngxHasFeature`and `ngxHasPermission` directives have added options to handl
 <p *ngxHasPermission="['Admin']; shouldHavePermission: false">
 	I will be shown if the user is not an Admin!
 </p>
-<p *ngxIsAuthenticated="true">
-	I will be shown if the user is authenticated!
-</p>
+<p *ngxIsAuthenticated="true">I will be shown if the user is authenticated!</p>
 ```
 
 ## Pipes

libs/angular/authentication/package.json

@@ -4,8 +4,8 @@
 	"peerDependencies": {
 		"@angular/core": "^19.0.0",
 		"rxjs": "7.8.1",
-		"@studiohyperdrive/types-auth": "^2.0.0",
-		"@angular/router": "19.0.3"
+		"@angular/common": "19.0.3",
+		"obj-clean": "3.0.1"
 	},
 	"sideEffects": false
 }

libs/angular/authentication/src/lib/index.ts

@@ -5,3 +5,4 @@ export * from './pipes';
 export * from './types';
 export * from './providers';
 export * from './mocks';
+export * from './services';

libs/angular/authentication/src/lib/interceptors/authentication/authentication.interceptor.spec.ts

@@ -0,0 +1,42 @@
+import { TestBed } from '@angular/core/testing';
+import { of } from 'rxjs';
+import { HttpRequest } from '@angular/common/http';
+
+import { NgxAuthenticationInterceptorToken } from '../../tokens';
+import { NgxAuthenticatedHttpInterceptor } from './authentication.interceptor';
+
+describe('NgxAuthenticatedHttpInterceptor', () => {
+	let handler;
+	const httpHandler = (request) => of(request);
+
+	beforeEach(() => {
+		handler = jest.fn();
+
+		TestBed.configureTestingModule({
+			imports: [],
+			providers: [{ provide: NgxAuthenticationInterceptorToken, useValue: handler }],
+		});
+	});
+
+	it('should call the handler when the request has an withCredentials value', () => {
+		TestBed.runInInjectionContext(() => {
+			const request = new HttpRequest('GET', 'test', { withCredentials: true });
+			handler.mockReturnValue(request);
+
+			NgxAuthenticatedHttpInterceptor(request, httpHandler).subscribe();
+
+			expect(handler).toHaveBeenCalled();
+		});
+	});
+
+	it('should not call the handler when the request has an withCredentials value', () => {
+		TestBed.runInInjectionContext(() => {
+			const request = new HttpRequest('GET', 'test', { withCredentials: false });
+			handler.mockReturnValue(request);
+
+			NgxAuthenticatedHttpInterceptor(request, httpHandler).subscribe();
+
+			expect(handler).not.toHaveBeenCalled();
+		});
+	});
+});

libs/angular/authentication/src/lib/interceptors/authentication/authentication.interceptor.ts

@@ -0,0 +1,27 @@
+import { HttpEvent, HttpHandlerFn, HttpRequest } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { inject } from '@angular/core';
+
+import { NgxAuthenticationInterceptorToken } from '../../tokens';
+
+/**
+ * An interceptor that will handle any request that needs to be authenticated
+ *
+ * @param request - The provided request
+ * @param next - The HttpHandler
+ */
+export function NgxAuthenticatedHttpInterceptor(
+	request: HttpRequest<unknown>,
+	next: HttpHandlerFn
+): Observable<HttpEvent<unknown>> {
+	// Iben: Get the authenticatedCallHandler
+	const authenticatedCallHandler = inject(NgxAuthenticationInterceptorToken);
+
+	// Iben: If the request does not need to be made in an authenticated state or if no authenticatedCallHandler was provided, we return the request as is
+	if (!request.withCredentials || !authenticatedCallHandler) {
+		return next(request);
+	}
+
+	// Iben: Handle the authenticated call
+	return next(authenticatedCallHandler(request));
+}

libs/angular/authentication/src/lib/interceptors/index.ts

@@ -0,0 +1 @@
+export * from './authentication/authentication.interceptor';

libs/angular/authentication/src/lib/mocks/authenticated-http-client.mock.ts

@@ -0,0 +1,25 @@
+import { of } from 'rxjs';
+
+export /**
+ * Returns a mock for the NgxAuthenticatedHttpClient. By default each methods returns an empty observable
+ *
+ * @param  configuration - Configuration to replace one of the methods with a custom method
+ */
+const NgxMockAuthenticatedHttpClient = (configuration: {
+	download?: unknown;
+	get?: unknown;
+	patch?: unknown;
+	put?: unknown;
+	delete?: unknown;
+	post?: unknown;
+}) => {
+	const defaultFunction = () => of();
+	return {
+		get: configuration.get || defaultFunction,
+		download: configuration.download || defaultFunction,
+		delete: configuration.delete || defaultFunction,
+		patch: configuration.patch || defaultFunction,
+		post: configuration.post || defaultFunction,
+		put: configuration.put || defaultFunction,
+	};
+};

libs/angular/authentication/src/lib/mocks/index.ts

@@ -1,2 +1,3 @@
 export * from './authentication.service.mock';
 export * from './authentication.response.mock';
+export * from './authenticated-http-client.mock';

libs/angular/authentication/src/lib/providers/authentication-configuration.provider.ts

@@ -1,18 +1,44 @@
-import { Provider, Type } from '@angular/core';
-import { NgxAuthenticationAbstractService } from '../abstracts';
-import { NgxAuthenticationServiceToken } from '../tokens';
+import { EnvironmentProviders, Provider } from '@angular/core';
+import { provideHttpClient, withInterceptors } from '@angular/common/http';
+
+import {
+	NgxAuthenticationInterceptorToken,
+	NgxAuthenticationServiceToken,
+	NgxAuthenticationUrlHandlerToken,
+} from '../tokens';
+import { NgxAuthenticationConfiguration } from '../types';
+import { NgxAuthenticatedHttpInterceptor } from '../interceptors';
 /**
  * Configures the provided implementation of the NgxAuthenticationAbstract service to the application
  *
  * @param configuration - The configuration with the provided service implementation
  */
-export const provideNgxAuthenticationConfiguration = (configuration: {
-	service: Type<NgxAuthenticationAbstractService>;
-}): Provider[] => {
+export const provideNgxAuthenticationConfiguration = (
+	configuration: NgxAuthenticationConfiguration
+): Provider | EnvironmentProviders[] => {
 	return [
 		{
 			provide: NgxAuthenticationServiceToken,
 			useExisting: configuration.service,
 		},
+		// Iben: If the HttpClientConfiguration is provided, we assume the user wants to use the NgxAuthenticatedHttpClient
+		...(!configuration.httpClientConfiguration
+			? []
+			: [
+					{
+						provide: NgxAuthenticationUrlHandlerToken,
+						useValue: configuration.httpClientConfiguration.baseUrl,
+					},
+					{
+						provide: NgxAuthenticationInterceptorToken,
+						useValue: configuration.httpClientConfiguration.authenticatedCallHandler,
+					},
+					provideHttpClient(
+						withInterceptors([
+							NgxAuthenticatedHttpInterceptor,
+							...(configuration.httpClientConfiguration.interceptors || []),
+						])
+					),
+				]),
 	];
 };

libs/angular/authentication/src/lib/services/authenticated-http-client/authenticated-http-client.service.spec.ts

@@ -0,0 +1,49 @@
+import { HttpClient } from '@angular/common/http';
+import { TestBed } from '@angular/core/testing';
+
+import { of } from 'rxjs';
+import { NgxAuthenticationUrlHandlerToken } from '../../tokens';
+import { NgxAuthenticatedHttpClient } from './authenticated-http-client.service';
+
+describe('NgxAuthenticatedHttpClient', () => {
+	let service: NgxAuthenticatedHttpClient;
+
+	const baseUrl = () => 'www.test.be';
+
+	const httpClient: any = {
+		get: jest.fn().mockReturnValue(of('test')),
+	};
+
+	beforeEach(() => {
+		TestBed.configureTestingModule({
+			imports: [],
+			providers: [
+				NgxAuthenticatedHttpClient,
+				{ provide: HttpClient, useValue: httpClient },
+				{ provide: NgxAuthenticationUrlHandlerToken, useValue: baseUrl },
+			],
+		});
+
+		service = TestBed.inject(NgxAuthenticatedHttpClient);
+	});
+
+	it('should set the base url when provided and add withCredentials', () => {
+		TestBed.runInInjectionContext(() => {
+			service.get<string>('api-a').subscribe();
+
+			expect(httpClient.get).toHaveBeenCalledWith('www.test.be/api-a', {
+				withCredentials: true,
+			});
+		});
+	});
+
+	it('should set the base url when provided', () => {
+		TestBed.runInInjectionContext(() => {
+			service.get<string>('api-a', undefined, false).subscribe();
+
+			expect(httpClient.get).toHaveBeenCalledWith('www.test.be/api-a', {
+				withCredentials: false,
+			});
+		});
+	});
+});