Feat/choose backend (#81)

* fix: optimize login flow

Signed-off-by: Mirko Mollik <[email protected]>

* add login flow to extension

Signed-off-by: Mirko Mollik <[email protected]>

* chore: fix lint issues

Signed-off-by: Mirko Mollik <[email protected]>

---------

Signed-off-by: Mirko Mollik <[email protected]>

apps/holder-app/src/app/app.config.ts

@@ -20,15 +20,16 @@ import {
   ApiModule,
   Configuration,
   AuthServiceInterface,
+  ConfigService,
 } from '@credhub/holder-shared';
 import { AuthService } from './auth/auth.service';
 import { provideServiceWorker } from '@angular/service-worker';
-import { ConfigService } from './config.service';
 import * as Sentry from '@sentry/angular';
 import { environment } from '../environments/environment';
 
 Sentry.init({
   dsn: environment.sentryDsn,
+  enabled: !isDevMode(),
   integrations: [
     Sentry.browserTracingIntegration(),
     Sentry.replayIntegration(),
@@ -73,6 +74,7 @@ export const appConfig: ApplicationConfig = {
           resourceServer: {
             sendAccessToken: true,
             customUrlValidation: (url: string) => {
+              if (configService.isConfigUrl(url)) return true;
               // we need to ignore calls to assets to fetch the config file
               if (url.startsWith('/assets')) return true;
               return url.startsWith(configService.getConfig('backendUrl'));

apps/holder-app/src/app/auth/auth.service.ts

@@ -5,8 +5,7 @@ import { Router } from '@angular/router';
 import { AuthConfig, OAuthService } from 'angular-oauth2-oidc';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
-import { AuthServiceInterface } from '@credhub/holder-shared';
-import { ConfigService } from '../config.service';
+import { AuthServiceInterface, ConfigService } from '@credhub/holder-shared';
 
 @Injectable({ providedIn: 'root' })
 export class AuthService implements AuthServiceInterface {

apps/holder-app/src/app/login/login.component.html

@@ -1,3 +1,8 @@
 <div fxLayout="column" fxLayoutAlign="space-around center" id="content">
-  <button mat-flat-button color="primary" (click)="login()">Login</button>
+  <div fxLayout="column" fxLayoutGap="16px">
+    <img src="assets/icons/icon.svg" alt="Wallet" />
+    <h3>Login into {{ name }}</h3>
+    <button mat-flat-button color="primary" (click)="login()">Login</button>
+    <button mat-button (click)="changeBackend()">Change backend</button>
+  </div>
 </div>

apps/holder-app/src/app/login/login.component.ts

@@ -1,22 +1,47 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { AuthService } from '../auth/auth.service';
 import { MatButtonModule } from '@angular/material/button';
 import { ActivatedRoute } from '@angular/router';
 import { FlexLayoutModule } from 'ng-flex-layout';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { firstValueFrom } from 'rxjs';
+import { BackendDialogComponent, ConfigService } from '@credhub/holder-shared';
 
 @Component({
   selector: 'app-login',
   standalone: true,
-  imports: [MatButtonModule, FlexLayoutModule],
+  imports: [MatButtonModule, FlexLayoutModule, MatDialogModule],
   templateUrl: './login.component.html',
   styleUrl: './login.component.scss',
 })
-export class LoginComponent {
-  constructor(public authService: AuthService, private route: ActivatedRoute) {}
+export class LoginComponent implements OnInit {
+  name!: string;
+
+  constructor(
+    public authService: AuthService,
+    private route: ActivatedRoute,
+    private matDialog: MatDialog,
+    private configService: ConfigService
+  ) {}
+
+  ngOnInit(): void {
+    this.name = this.configService.getConfig('name');
+  }
 
   login() {
     // get the targeturl when passed in the query params
     const targetUrl = this.route.snapshot.queryParams['targetUrl'];
     this.authService.login(targetUrl !== 'login' ? targetUrl : null);
   }
+
+  /**
+   * Open the dialog to change the backend. Reload the page after the dialog is closed so the new backend is used when the application starts.
+   */
+  changeBackend() {
+    firstValueFrom(
+      this.matDialog
+        .open(BackendDialogComponent, { disableClose: true })
+        .afterClosed()
+    ).then(() => window.location.reload());
+  }
 }

apps/holder-app/src/assets/config/config.example.json

@@ -1,6 +1,3 @@
 {
-  "backendUrl": "http://localhost:3000",
-  "oidcUrl": "http://host.docker.internal:8080/realms/wallet",
-  "oidcClient": "wallet",
-  "oidcAllowHttp": true
+  "backendUrl": "http://localhost:3000"
 }

apps/holder-app/src/assets/config/config.json

@@ -1,6 +1,3 @@
 {
-  "backendUrl": "http://localhost:3000",
-  "oidcUrl": "http://host.docker.internal:8080/realms/wallet",
-  "oidcClient": "wallet",
-  "oidcAllowHttp": true
+  "backendUrl": "http://localhost:3000"
 }

apps/holder-app/src/index.html

@@ -14,6 +14,7 @@
     />
     <link rel="manifest" href="manifest.webmanifest" />
     <meta name="theme-color" content="#D7E3FF" />
+    <link rel="icon" type="image/png" href="assets/icons/192x192.png" />
   </head>
   <body class="mat-app-background">
     <app-root></app-root>

apps/holder-app/src/manifest.webmanifest

@@ -23,23 +23,18 @@
   ],
   "icons": [
     {
-      "src": "assets/icons/icon-192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "assets/icons/icon-512.png",
-      "sizes": "512x512",
+      "src": "assets/icons/144x144.png",
+      "sizes": "144x144",
       "type": "image/png"
     },
     {
-      "src": "assets/icons/icon-192-maskable.png",
+      "src": "assets/icons/192x192.png",
       "sizes": "192x192",
       "type": "image/png",
       "purpose": "maskable"
     },
     {
-      "src": "assets/icons/icon-512-maskable.png",
+      "src": "assets/icons/512x512.png",
       "sizes": "512x512",
       "type": "image/png",
       "purpose": "maskable"

apps/holder-app/tsconfig.editor.json

@@ -1,6 +1,9 @@
 {
   "extends": "./tsconfig.json",
-  "include": ["src/**/*.ts"],
+  "include": [
+    "src/**/*.ts",
+    "../../libs/holder-shared/src/lib/config.service.ts"
+  ],
   "compilerOptions": {},
   "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
 }

apps/holder-backend/src/app/auth/auth.controller.ts

@@ -1,16 +1,24 @@
-import { Controller, Delete, UseGuards } from '@nestjs/common';
+import { Controller, Delete, Get, UseGuards } from '@nestjs/common';
 import { ApiOAuth2, ApiOperation, ApiTags } from '@nestjs/swagger';
-import { AuthGuard, AuthenticatedUser } from 'nest-keycloak-connect';
+import { AuthGuard, AuthenticatedUser, Public } from 'nest-keycloak-connect';
 import { KeycloakUser } from './user';
 import { AuthService } from './auth.service';
+import { EndpointResponse } from './dto/endpoint-response.dto';
 
-@UseGuards(AuthGuard)
-@ApiOAuth2([])
 @ApiTags('auth')
 @Controller('auth')
 export class AuthController {
   constructor(private authService: AuthService) {}
 
+  @ApiOperation({ summary: 'give information about the oidc provider' })
+  @Public()
+  @Get()
+  endpoints(): EndpointResponse {
+    return this.authService.endpoints();
+  }
+
+  @UseGuards(AuthGuard)
+  @ApiOAuth2([])
   @ApiOperation({ summary: 'delete account' })
   @Delete()
   deleteAccount(@AuthenticatedUser() user: KeycloakUser) {

apps/holder-backend/src/app/auth/auth.service.ts

@@ -15,6 +15,10 @@ export class AuthService {
     @Inject(oidcclientName) private oidcClient: OIDCClient
   ) {}
 
+  endpoints() {
+    return this.oidcClient.endpoints();
+  }
+
   async deleteAccount(userId: string) {
     const event = new UserDeletedEvent();
     event.id = userId;

apps/holder-backend/src/app/auth/dto/endpoint-response.dto.ts

@@ -0,0 +1,6 @@
+export class EndpointResponse {
+  oidcUrl: string;
+  oidcClient: string;
+  oidcAllowHttp: boolean;
+  name: string;
+}

apps/holder-backend/src/app/auth/oidc-client/keycloak-oidc-client.ts

@@ -4,6 +4,7 @@ import { UserDeletedEvent } from '../auth.service';
 import { Injectable, HttpException, HttpStatus } from '@nestjs/common';
 import { HttpService } from '@nestjs/axios';
 import { firstValueFrom } from 'rxjs';
+import { EndpointResponse } from '../dto/endpoint-response.dto';
 
 /**
  * Keycloak OIDC client implementation
@@ -25,6 +26,15 @@ export class KeycloakOIDCClient implements OIDCClient {
     this.clientSecret = this.configService.get('OIDC_ADMIN_CLIENT_SECRET');
   }
 
+  endpoints(): EndpointResponse {
+    return {
+      oidcUrl: `${this.keycloakUrl}/realms/${this.realm}`,
+      oidcClient: this.configService.get('OIDC_PUBLIC_CLIENT_ID'),
+      oidcAllowHttp: true,
+      name: this.configService.get('WEBAUTHN_RP_NAME'),
+    };
+  }
+
   /**
    * Get access token from Keycloak
    * @returns

apps/holder-backend/src/app/auth/oidc-client/oidc-client.ts

@@ -1,5 +1,7 @@
 import { UserDeletedEvent } from '../auth.service';
+import { EndpointResponse } from '../dto/endpoint-response.dto';
 
 export abstract class OIDCClient {
+  abstract endpoints(): EndpointResponse;
   abstract userDeleteEvent(payload: UserDeletedEvent): void;
 }

apps/holder-browser-extension/src/app/app.config.ts

@@ -1,7 +1,11 @@
-import { type ApplicationConfig, importProvidersFrom } from '@angular/core';
+import {
+  APP_INITIALIZER,
+  type ApplicationConfig,
+  importProvidersFrom,
+} from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';
-import { provideHttpClient } from '@angular/common/http';
+import { HttpClient, provideHttpClient } from '@angular/common/http';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { provideOAuthClient } from 'angular-oauth2-oidc';
@@ -10,6 +14,7 @@ import {
   ApiModule,
   Configuration,
   AuthServiceInterface,
+  ConfigService,
 } from '@credhub/holder-shared';
 import { AuthService } from './auth/auth.service';
 import { HashLocationStrategy, LocationStrategy } from '@angular/common';
@@ -27,6 +32,22 @@ export const appConfig: ApplicationConfig = {
       provide: AuthServiceInterface,
       useClass: AuthService,
     },
+    {
+      provide: APP_INITIALIZER,
+      useFactory:
+        (
+          authService: AuthService,
+          configService: ConfigService,
+          httpClient: HttpClient
+        ) =>
+        async () => {
+          await configService.appConfigLoader(httpClient);
+          //authService.init();
+          //await authService.runInitialLoginSequence();
+        },
+      deps: [AuthService, ConfigService, HttpClient],
+      multi: true,
+    },
     {
       provide: Configuration,
       useFactory: (authService: AuthService) =>

apps/holder-browser-extension/src/app/login/login.component.html

@@ -1,23 +1,8 @@
-<div fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="16px">
-  <img src="assets/images/icon.png" alt="Logo" class="logo" />
-  <form
-    [formGroup]="form"
-    (submit)="login()"
-    fxLayout="column"
-    fxLayoutAlign="start space-between"
-    fxLayoutGap="32px"
-  >
-    <button
-      mat-flat-button
-      color="primary"
-      type="submit"
-      [disabled]="form.invalid"
-    >
-      Login
-    </button>
-    <mat-form-field style="display: none">
-      <mat-label>Endpoint</mat-label>
-      <input matInput formControlName="endpoint" />
-    </mat-form-field>
-  </form>
+<div fxLayout="column" fxLayoutAlign="space-around center" id="content">
+  <div fxLayout="column" fxLayoutGap="16px">
+    <img src="assets/images/icon.svg" alt="Wallet" />
+    <h3>Login into {{ name }}</h3>
+    <button mat-flat-button color="primary" (click)="login()">Login</button>
+    <button mat-button (click)="changeBackend()">Change backend</button>
+  </div>
 </div>