zitadel

package.json

@@ -25,6 +25,7 @@
     "@angular/router": "^17.2.0",
     "@angular/ssr": "^17.2.3",
     "@netlify/functions": "^2.6.0",
+    "angular-oauth2-oidc": "^17.0.2",
     "buffer": "^6.0.3",
     "chart.js": "^4.3.0",
     "express": "^4.19.2",

src/app/app.config.browser.ts

@@ -0,0 +1,14 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { appConfig } from './app.config';
+import { OAuthStorage } from 'angular-oauth2-oidc';
+
+const browserConfig: ApplicationConfig = {
+  providers: [
+    {
+      provide: OAuthStorage,
+      useValue: localStorage,
+    }
+  ]
+};
+
+export const config = mergeApplicationConfig(appConfig, browserConfig);

src/app/app.config.ts

@@ -6,8 +6,27 @@ import { provideClientHydration } from '@angular/platform-browser';
 import { provideHttpClient, withFetch } from '@angular/common/http';
 import { ArrowDownNarrowWide, ArrowDownWideNarrow, BookText, Box, Check, ChevronDown, ChevronLeft, ChevronRight, Codesandbox, Cpu, Database, DollarSign, Facebook, Github, Home, Hotel, Linkedin, LucideAngularModule, MemoryStick, PcCase, Search, Server, SquareKanban, Twitter, User, Building2, Heater, CandlestickChart, MapPinned, Scale, Ellipsis, Menu, Leaf, ShoppingCart, ChevronUp, ExternalLink, Info } from 'lucide-angular';
 import { MarkdownModule } from 'ngx-markdown';
+import { AuthConfig, OAuthModule } from 'angular-oauth2-oidc';
 import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
 
+const ZITADEL_CLIENT_ID = import.meta.env['NG_APP_ZITADEL_CLIENT_ID'];
+const ZITADEL_DOMAIN = import.meta.env['NG_APP_ZITADEL_DOMAIN'];
+const ZITADEL_USERINFO_ENDPOINT = import.meta.env['NG_APP_ZITADEL_USERINFO_ENDPOINT'];
+const DOMAIN_BASE_URL = import.meta.env['NG_APP_DOMAIN_BASE_URL'];
+
+const authConfig: AuthConfig = {
+  scope: 'openid profile email offline_access',
+  responseType: 'code',
+  oidc: true,
+  clientId: ZITADEL_CLIENT_ID,
+  issuer: ZITADEL_DOMAIN,
+  redirectUri: `${DOMAIN_BASE_URL}auth/callback`,
+  postLogoutRedirectUri: `${DOMAIN_BASE_URL}`,
+  requireHttps: false, // required for running locally
+  tokenEndpoint: `${ZITADEL_DOMAIN}/oauth/v2/token`,
+  userinfoEndpoint: ZITADEL_USERINFO_ENDPOINT,
+};
+
 export const appConfig: ApplicationConfig = {
   providers: [
     provideRouter(routes),
@@ -55,6 +74,21 @@ export const appConfig: ApplicationConfig = {
       }),
     ),
     importProvidersFrom(MarkdownModule.forRoot()),
+    importProvidersFrom(
+      OAuthModule.forRoot({
+        resourceServer: {
+          allowedUrls: [
+            `${ZITADEL_DOMAIN}/admin/v1`,
+            `${ZITADEL_DOMAIN}/management/v1`,
+            `${ZITADEL_DOMAIN}/auth/v1/`],
+          sendAccessToken: true,
+        },
+      })
+    ),
+    {
+      provide: AuthConfig,
+      useValue: authConfig,
+    }
   ],
 
 };

src/app/app.routes.ts

@@ -11,5 +11,10 @@ export const routes: Routes = [
   { path: 'legal/tos', loadComponent: () => import('./pages/tos/tos.component').then(m => m.TOSComponent)},
   { path: 'datacenters', loadComponent: () => import('./pages/datacenters/datacenters.component').then(m => m.DatacentersComponent)},
   { path: 'vendors', loadComponent: () => import('./pages/vendors/vendors.component').then(m => m.VendorsComponent)},
+
+  { path: 'auth/callback', loadComponent: () => import('./auth/callback/callback.component').then(m => m.CallbackComponent)},
+
+  { path: 'dashboard', loadComponent: () => import('./pages/my-spare-cores/my-spare-cores.component').then(m => m.MySpareCoresComponent)},
+
   { path: '**', redirectTo: '' }
 ];

src/app/auth/callback/callback.component.html

@@ -0,0 +1,4 @@
+<div class="w-full">
+  <div class="content_section">
+  </div>
+</div>

src/app/auth/callback/callback.component.scss

@@ -0,0 +1,7 @@
+.content_section {
+  @apply bg-primary;
+  @apply text-white;
+
+  padding: 4rem 2rem;
+  height: 100vh;
+}

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

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

src/app/auth/callback/callback.component.ts

@@ -0,0 +1,41 @@
+import { Component, Inject, PLATFORM_ID } from '@angular/core';
+import { AuthenticationService } from '../../services/authentication.service';
+import { Router, RouterModule } from '@angular/router';
+import { isPlatformBrowser } from '@angular/common';
+
+@Component({
+  selector: 'app-callback',
+  standalone: true,
+  imports: [RouterModule],
+  templateUrl: './callback.component.html',
+  styleUrl: './callback.component.scss'
+})
+export class CallbackComponent {
+
+  constructor(
+    @Inject(PLATFORM_ID) private platformId: object,
+    private authService: AuthenticationService,
+    private router: Router
+  ) { }
+
+  ngOnInit() {
+
+    if(isPlatformBrowser(this.platformId)) {
+      this.authService.loginCodeFlow().then(() => {
+
+        let token = this.authService.getToken();
+        console.log('token', token);
+        let url = sessionStorage.getItem('prelogin_url') || '/';
+        sessionStorage.removeItem('prelogin_url');
+        this.router.navigateByUrl(url);
+        /*
+        this.authService.getOIDCUser().subscribe(user => {
+          console.log('user', user);
+        });
+        */
+      });
+    }
+
+  }
+
+}

src/app/layout/header/header.component.html

@@ -32,14 +32,22 @@
                   name="menu" >
                 </lucide-icon>
               </li>
-              <!--
-              <li>
-                <button class="login_button text-sm items-center">
+              <li *ngIf="!isLoggedIn() || true">
+                <button
+                  class="login_button text-sm items-center"
+                  (click)="login()">
                   <lucide-icon name="user" class="h-4 w-4 mr-1"></lucide-icon>
                   Log in
                 </button>
               </li>
-              -->
+              <li *ngIf="isLoggedIn() || true">
+                <button
+                  class="login_button text-sm items-center"
+                  (click)="logout()">
+                  <lucide-icon name="user" class="h-4 w-4 mr-1"></lucide-icon>
+                  Log out
+                </button>
+              </li>
           </ul>
       </div>
   </div>

src/app/layout/header/header.component.ts

@@ -1,14 +1,33 @@
 import { Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { LucideAngularModule } from 'lucide-angular';
+import { AuthenticationService } from '../../services/authentication.service';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [LucideAngularModule, RouterLink],
+  imports: [LucideAngularModule, RouterLink, CommonModule],
   templateUrl: './header.component.html',
-  styleUrl: './header.component.scss'
+  styleUrl: './header.component.scss',
+  host: {ngSkipHydration: 'true'},
 })
 export class HeaderComponent {
 
+  constructor(
+    private authService: AuthenticationService
+  ) { }
+
+  isLoggedIn() {
+    return this.authService.isLoggedIn();
+  }
+
+  login() {
+    this.authService.authenticate();
+  }
+
+  logout() {
+    this.authService.signout();
+  }
+
 }

src/app/services/authentication.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { AuthenticationService } from './authentication.service';
+
+describe('AuthenticationService', () => {
+  let service: AuthenticationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(AuthenticationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/authentication.service.ts

@@ -0,0 +1,67 @@
+import { Injectable } from '@angular/core';
+import { AuthConfig, OAuthEvent, OAuthService } from 'angular-oauth2-oidc';
+import { BehaviorSubject, from, Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthenticationService {
+
+  authedState = new BehaviorSubject<boolean | undefined>(undefined);
+
+  constructor(
+    private oauthService: OAuthService,
+    private authConfig: AuthConfig,
+  ) {
+    this.oauthService.events.subscribe((event: OAuthEvent) => {
+      console.log('oauth event', event);
+      switch (event.type) {
+        case 'logout':
+          this.authedState.next(false);
+        break;
+      }
+    });
+  }
+
+  public getOIDCUser(): Observable<any> {
+    return from(this.oauthService.loadUserProfile());
+  }
+
+  public async authenticate(): Promise<void> {
+    this.oauthService.configure(this.authConfig);
+    this.oauthService.setupAutomaticSilentRefresh();
+
+    this.oauthService.strictDiscoveryDocumentValidation = false;
+    await this.oauthService.loadDiscoveryDocumentAndTryLogin();
+
+
+    if (!this.oauthService.hasValidIdToken()) {
+      const newState = window.location.pathname;
+      sessionStorage.setItem('prelogin_url', newState);
+      this.oauthService.initImplicitFlow();
+    }
+
+    return;
+  }
+
+  public async loginCodeFlow(): Promise<void> {
+    return this.oauthService.initCodeFlow();
+  }
+
+  public async getToken(): Promise<string> {
+    return this.oauthService.getIdToken();
+  }
+
+  public async getAccessToken(): Promise<string> {
+    return this.oauthService.getAccessToken();
+  }
+
+  public isLoggedIn(): boolean {
+    console.log('hasValidAccessToken', this.oauthService.hasValidAccessToken());
+    return this.oauthService.hasValidAccessToken();
+  }
+
+  public signout(): void {
+    this.oauthService.logOut();
+  }
+}

src/main.ts

@@ -1,7 +1,7 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { AppComponent } from './app/app.component';
-import { appConfig } from './app/app.config';
+import { config } from './app/app.config.browser';
 
 
-bootstrapApplication(AppComponent, appConfig)
+bootstrapApplication(AppComponent, config)
   .catch((err) => console.error(err));