Authentication

CHANGELOG.md

@@ -14,6 +14,10 @@ This project tries to follow [SemVer 2.0.0](https://semver.org/).
 
 ## v1.6.0 (WIP)
 
+- Adds the ability to login. While logged in this will forward the OIDC
+  access token to the backend such that a secure user access control is
+  established. (#70)
+
 - Changed function calls and type names to match the regenerated rest clients
   using: (#91)
 

angular.json

@@ -71,7 +71,8 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "wharf:build"
+            "browserTarget": "wharf:build",
+            "proxyConfig": "src/proxy/docker.dev.conf.json"
           },
           "configurations": {
             "production": {

package.json

@@ -4,6 +4,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
+    "start-local": "ng serve --proxy-config src/proxy/local.dev.conf.json",
     "build": "ng build",
     "build-prod": "node deploy/collect-licenses/collect-licenses.mjs && ng build -c production",
     "build-clients": "ng build api-client && ng build import-gitlab-client && ng build import-github-client && ng build import-azuredevops-client",
@@ -28,10 +29,12 @@
     "@angular/platform-browser-dynamic": "^12.1.1",
     "@angular/router": "^12.1.1",
     "@fortawesome/fontawesome-free": "^5.15.3",
+    "angular-auth-oidc-client": "^13.1.0",
     "ng-event-source": "^1.0.14",
     "primeicons": "^4.1.0",
     "primeng": "^12.0.0",
     "prismjs": "^1.27.0",
+    "rfc4648": "^1.5.1",
     "rxjs": "^7.2.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"
@@ -42,7 +45,7 @@
     "@angular-eslint/builder": "12.2.0",
     "@angular-eslint/eslint-plugin": "12.2.0",
     "@angular-eslint/eslint-plugin-template": "12.2.0",
-    "@angular-eslint/schematics": "12.2.0",
+    "@angular-eslint/schematics": "12.3.1",
     "@angular-eslint/template-parser": "12.2.0",
     "@angular/cli": "^12.1.1",
     "@angular/compiler-cli": "^12.1.1",

src/app/app-routing.module.ts

@@ -4,13 +4,19 @@ import { ProjectListComponent } from './projects/project-list/project-list.compo
 import { ProjectDetailsComponent } from './projects/project-details/project-details.component';
 import { BuildDetailsComponent } from './builds/build-details/build-details.component';
 import { LicensesComponent } from './licenses/licenses.component';
+import { LoginComponent } from './auth/login/login.component';
+import { UnauthorizedComponent } from './auth/unauthorized/unauthorized.component';
+import { ForbiddenComponent } from './auth/forbidden/forbidden.component';
 
 
 const routes: Routes = [
   { path: '', component: ProjectListComponent },
   { path: 'project/:projectId', component: ProjectDetailsComponent },
   { path: 'build/:projectId/:buildId', component: BuildDetailsComponent },
   { path: 'third-party-licenses', component: LicensesComponent },
+  { path: 'login', component: LoginComponent },
+  { path: 'unauthorized', component: UnauthorizedComponent},
+  { path: 'forbidden', component: ForbiddenComponent},
 ];
 
 @NgModule({

src/app/app.component.ts

@@ -1,10 +1,24 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
 
 @Component({
   selector: 'wh-app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class AppComponent {
+export class AppComponent implements OnInit{
   title = 'wharf';
+
+  constructor(
+    private oidcSecurityService: OidcSecurityService,
+  ) {
+  }
+
+  ngOnInit() {
+    // The method checkAuth() is needed to process the redirect from your Security Token Service and set the
+    // correct states. This method must be used to ensure the correct functioning of the library.
+    this.oidcSecurityService.checkAuth().subscribe(({ isAuthenticated, userData, accessToken, idToken }) => {
+      console.warn('Authenticated: ', isAuthenticated);
+    });
+  }
 }

src/app/app.module.ts

@@ -16,6 +16,7 @@ import { SyntaxHighlightService } from './shared/syntax-highlight/syntax-highlig
 import { SharedModule } from './shared/pipes/shared.module';
 import { NavModule } from './nav/nav.module';
 import { LicensesModule } from './licenses/licenses.module';
+import { AuthModule } from './auth/auth.module';
 
 @NgModule({
   declarations: [
@@ -34,6 +35,7 @@ import { LicensesModule } from './licenses/licenses.module';
     MenuModule,
     TooltipModule,
     SharedModule,
+    AuthModule,
   ],
   providers: [
     {

src/app/auth/auth-config.module.ts

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import {
+  AuthModule, OidcSecurityService,
+  StsConfigHttpLoader,
+  StsConfigLoader,
+} from 'angular-auth-oidc-client';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { WharfAuthInterceptor } from './wharf-auth.interceptor';
+import { ConfigService } from '../shared/config/config.service';
+
+const authFactory = (configService: ConfigService) => new StsConfigHttpLoader(configService.getOidcConfig$());
+
+@NgModule({
+  imports: [
+    AuthModule.forRoot({
+      loader: {
+        provide: StsConfigLoader,
+        useFactory: authFactory,
+        deps: [ConfigService],
+      },
+    }),
+  ],
+  exports: [AuthModule],
+  declarations: [],
+  providers: [
+    {provide: HTTP_INTERCEPTORS, useClass: WharfAuthInterceptor, multi: true},
+  ],
+})
+export class AuthConfigModule {}

src/app/auth/auth.module.ts

@@ -0,0 +1,40 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { filter } from 'rxjs/operators';
+import { DialogModule } from 'primeng/dialog';
+import { ButtonModule } from 'primeng/button';
+import { EventTypes, OidcSecurityService, PublicEventsService } from 'angular-auth-oidc-client';
+import { AuthConfigModule } from './auth-config.module';
+import { ForbiddenComponent } from './forbidden/forbidden.component';
+import { UnauthorizedComponent } from './unauthorized/unauthorized.component';
+import { LoginComponent } from './login/login.component';
+import { CardModule } from 'primeng/card';
+
+@NgModule({
+  declarations: [
+    ForbiddenComponent,
+    UnauthorizedComponent,
+    LoginComponent,
+  ],
+  imports: [
+    CommonModule,
+    AuthConfigModule,
+    DialogModule,
+    RouterModule,
+    ButtonModule,
+    CardModule,
+  ],
+})
+export class AuthModule {
+  constructor(
+    private readonly eventService: PublicEventsService,
+  ) {
+    this.eventService
+      .registerForEvents()
+      .pipe(filter((notification) => notification.type === EventTypes.ConfigLoaded))
+      .subscribe((config) => {
+        console.log('ConfigLoaded', config);
+      });
+  }
+}

src/app/auth/forbidden/forbidden.component.html

@@ -0,0 +1,4 @@
+<div class="p-d-flex p-ac-center p-ai-center">
+  <h1>Forbidden</h1>
+  <p>Code 403</p>
+</div>

src/app/auth/forbidden/forbidden.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ForbiddenComponent } from './forbidden.component';
+
+describe('ForbiddenComponent', () => {
+  let component: ForbiddenComponent;
+  let fixture: ComponentFixture<ForbiddenComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ForbiddenComponent ],
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ForbiddenComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/auth/forbidden/forbidden.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'wh-forbidden',
+  templateUrl: './forbidden.component.html',
+  styleUrls: ['./forbidden.component.scss'],
+})
+export class ForbiddenComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/auth/login/login.component.html

@@ -0,0 +1,23 @@
+<!-- From https://github.com/damienbod/angular-auth-oidc-client/tree/main/projects/sample-code-flow-refresh-tokens/src/app -->
+<div *ngIf="isAuthenticated$|async; else noAuth">
+  <p-button (click)="logout()">Logout</p-button>
+  <p-button (click)="logoffAndRevokeTokens()">Logout and revoke tokens</p-button>
+  <p-button (click)="revokeAccessToken()">Revoke access token</p-button>
+  <p-button (click)="revokeRefreshToken()">Revoke refresh token</p-button>
+  <p-button (click)="refreshSession()">Refresh session</p-button>
+  <hr />
+  <br />
+  Is Authenticated: {{ isAuthenticated$|async }}
+  <br />
+  userData
+  <pre>{{ userData$ | async | json }}</pre>
+  <br />
+</div>
+
+<ng-template #noAuth>
+  <p-button (click)="login()">Login</p-button>
+  <hr />
+</ng-template>
+
+Configuration loaded:
+<pre>{{ configuration | json }}</pre>