feat: oauth

Adding oauth. This is barely working. The refresh token code in
particular doesn't work correctly as it allows the current request to
fail while it sends a request for a new token. But it's a start.

Author: ProgrammingByPermutation

src/package-lock.json

@@ -1,14 +1,17 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {StandardBannerComponent} from './standard-banner.component';
+import {provideHttpClientTesting} from '@angular/common/http/testing';
+import {provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
 
 describe('StandardBannerComponent', () => {
   let component: StandardBannerComponent;
   let fixture: ComponentFixture<StandardBannerComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [StandardBannerComponent]
+      imports: [StandardBannerComponent],
+      providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
     })
       .compileComponents();
 

src/src/app/common/components/standard-banner/standard-banner.component.spec.ts

@@ -1,7 +1,8 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, inject, OnInit} from '@angular/core';
 import {LogoComponent} from '../logo/logo.component';
 import {environment} from '../../../../environments/environment';
 import {MatButton} from '@angular/material/button';
+import {AuthService} from "../../../service/auth.service";
 
 @Component({
   selector: 'app-standard-banner',
@@ -13,17 +14,18 @@ import {MatButton} from '@angular/material/button';
   styleUrl: './standard-banner.component.scss'
 })
 export class StandardBannerComponent implements OnInit {
+  private auth = inject(AuthService);
   public userIsLoggedIn: boolean = false;
 
   constructor() {
   }
 
   ngOnInit(): void {
-    this.userIsLoggedIn = null !== localStorage.getItem('auth-token');
+    this.userIsLoggedIn = null !== this.auth.getToken();
   }
 
   onLogout(): void {
-    localStorage.removeItem('auth-token');
+    this.auth.clearToken();
 
     // Need to use window.location here instead of the router because if you're already on the home page and you
     // router.navigate to it, it doesn't refresh the page and update the state.

src/src/app/common/components/standard-banner/standard-banner.component.ts

@@ -1,5 +1,5 @@
 export interface OAuth {
-  bearer: string,
-  refresh: string,
-  expiresUtc: string
+  AccessToken: string,
+  RefreshToken: string,
+  ExpiresUtc: string
 }

src/src/app/common/interface/oauth.ts

@@ -1,18 +1,18 @@
 import {CanActivateFn} from '@angular/router';
 import {environment} from "../../environments/environment";
 import {inject} from "@angular/core";
-import {NullinsideService} from "../service/nullinside.service";
 import {of, tap} from "rxjs";
+import {AuthService} from "../service/auth.service";
 
 export const authGuard: CanActivateFn = (_, __) => {
   // TODO: Hook up the "returnUrl" in the rest of the application. GitHub issue #
-  const token = localStorage.getItem('auth-token');
+  const token = inject(AuthService).getToken();
   if (!token) {
     window.location.href = `${environment.siteUrl}`;
     return of(false);
   }
 
-  return inject(NullinsideService).validateToken(token).pipe(
+  return inject(AuthService).validateToken(token).pipe(
     tap({
         next: success => {
           if (!success) {

src/src/app/middleware/auth.guard.ts

@@ -1,26 +1,48 @@
-import {Injectable} from '@angular/core';
+import {inject, Injectable} from '@angular/core';
 import {HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
 
 import {Observable} from 'rxjs';
 import {environment} from "../../environments/environment";
+import {AuthService} from "../service/auth.service";
 
 @Injectable()
 export class BearerTokenInterceptor implements HttpInterceptor {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
     const url = req.url.toLowerCase().replace('https://www.', 'https://');
-    if (!url.startsWith(`${environment.apiUrl}/`) && !url.startsWith(`${environment.nullApiUrl}/`) &&
-      !url.startsWith(`${environment.twitchBotApiUrl}/`)) {
+
+    if (
+      // Prevent infinite loop
+      url.endsWith(`/user/token/refresh`) ||
+      (
+        // Our services, no need to send our bearer tokens to other apis
+        !url.startsWith(`${environment.apiUrl}/`) &&
+        !url.startsWith(`${environment.nullApiUrl}/`) &&
+        !url.startsWith(`${environment.twitchBotApiUrl}/`)
+      )
+    ) {
       return next.handle(req);
     }
 
-    const token = localStorage.getItem('auth-token');
-    if (!token) {
+    const oAuth = inject(AuthService).getOAuth();
+    if (!oAuth) {
       return next.handle(req);
     }
 
+    if (new Date(oAuth.ExpiresUtc) < new Date()) {
+      inject(AuthService).clearToken();
+      inject(AuthService).refreshToken(oAuth.RefreshToken).subscribe({
+        next: oAuth => {
+          inject(AuthService).setToken(oAuth);
+        },
+        error: err => {
+          console.error(err);
+        }
+      });
+    }
+
     req = req.clone({
-      setHeaders: {Authorization: `Bearer ${token}`}
+      setHeaders: {Authorization: `Bearer ${inject(AuthService).getToken()}`}
     });
 
     return next.handle(req);

src/src/app/middleware/bearer-token-interceptor.ts

@@ -0,0 +1,18 @@
+import {TestBed} from '@angular/core/testing';
+
+import {AuthService} from './auth.service';
+import {provideHttpClientTesting} from '@angular/common/http/testing';
+import {provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
+
+describe('AuthService', () => {
+  let service: AuthService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]});
+    service = TestBed.inject(AuthService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/src/app/service/auth.service.spec.ts

@@ -0,0 +1,69 @@
+import {inject, Injectable} from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs";
+import {OAuth} from "../common/interface/oauth";
+import {environment} from "../../environments/environment";
+import {UserRolesResponse} from "../common/interface/user-roles-response";
+import {FeatureToggleResponse} from "../common/interface/feature-toggle-response";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthService {
+  private httpClient = inject(HttpClient);
+  private oauth: OAuth | null = null;
+
+  constructor() {
+    this.oauth = {
+      AccessToken: localStorage.getItem('auth-AccessToken') ?? '',
+      RefreshToken: localStorage.getItem('auth-RefreshToken') ?? '',
+      ExpiresUtc: localStorage.getItem('auth-ExpiresUtc') ?? ''
+    };
+
+    if (!this.oauth.AccessToken) {
+      this.oauth = null;
+    }
+  }
+
+  setToken(token: OAuth): void {
+    console.log('Setting token', token);
+    this.oauth = token;
+    localStorage.setItem('auth-AccessToken', token.AccessToken);
+    localStorage.setItem('auth-RefreshToken', token.RefreshToken);
+    localStorage.setItem('auth-ExpiresUtc', token.ExpiresUtc);
+  }
+
+  getToken(): string | null {
+    console.log('Getting token', this.oauth);
+    console.log('Getting token', this.oauth?.AccessToken);
+    return this.oauth?.AccessToken ?? null;
+  }
+
+  clearToken(): void {
+    console.log('Clearing token');
+    this.oauth = null;
+    localStorage.removeItem('auth-AccessToken');
+    localStorage.removeItem('auth-RefreshToken');
+    localStorage.removeItem('auth-ExpiresUtc');
+  }
+
+  getOAuth(): OAuth | null {
+    return this.oauth;
+  }
+
+  refreshToken(token: string): Observable<OAuth> {
+    return this.httpClient.post<OAuth>(`${environment.apiUrl}/user/token/refresh`, {token: token});
+  }
+
+  validateToken(token: string): Observable<boolean> {
+    return this.httpClient.post<boolean>(`${environment.apiUrl}/user/token/validate`, {token: token});
+  }
+
+  getUserRoles(): Observable<UserRolesResponse> {
+    return this.httpClient.get<UserRolesResponse>(`${environment.apiUrl}/user/roles`);
+  }
+
+  getFeatureToggles(): Observable<FeatureToggleResponse[]> {
+    return this.httpClient.get<FeatureToggleResponse[]>(`${environment.apiUrl}/featureToggle`);
+  }
+}

src/src/app/service/auth.service.ts

@@ -2,34 +2,19 @@ import {inject, Injectable} from '@angular/core';
 import {HttpClient} from "@angular/common/http";
 import {Observable} from "rxjs";
 import {environment} from "../../environments/environment";
-import {UserRolesResponse} from "../common/interface/user-roles-response";
 import {DockerResource} from '../common/interface/docker-resource';
-import {FeatureToggleResponse} from "../common/interface/feature-toggle-response";
 
 @Injectable({
   providedIn: 'root'
 })
 export class NullinsideService {
   private httpClient = inject(HttpClient);
 
-
-  validateToken(token: string): Observable<boolean> {
-    return this.httpClient.post<boolean>(`${environment.apiUrl}/user/token/validate`, {token: token});
-  }
-
-  getUserRoles(): Observable<UserRolesResponse> {
-    return this.httpClient.get<UserRolesResponse>(`${environment.apiUrl}/user/roles`);
-  }
-
   getVirtualMachines(): Observable<DockerResource[]> {
     return this.httpClient.get<DockerResource[]>(`${environment.apiUrl}/docker`);
   }
 
   setVirtualMachinePowerState(id: number, turnOn: boolean): Observable<boolean> {
     return this.httpClient.post<boolean>(`${environment.apiUrl}/docker/${id}`, {turnOn: turnOn});
   }
-
-  getFeatureToggles(): Observable<FeatureToggleResponse[]> {
-    return this.httpClient.get<FeatureToggleResponse[]>(`${environment.apiUrl}/featureToggle`);
-  }
 }

src/src/app/service/nullinside.service.ts

@@ -1,14 +1,17 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 
 import {BackgroundWebglExampleComponent} from './background-webgl-example.component';
+import {provideHttpClientTesting} from '@angular/common/http/testing';
+import {provideHttpClient, withInterceptorsFromDi} from '@angular/common/http';
 
 describe('BackgroundWebglExampleComponent', () => {
   let component: BackgroundWebglExampleComponent;
   let fixture: ComponentFixture<BackgroundWebglExampleComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [BackgroundWebglExampleComponent]
+      imports: [BackgroundWebglExampleComponent],
+      providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
     })
       .compileComponents();