zitadel

README.md

@@ -19,12 +19,21 @@ You also need to provide your own Terms of Service and Privacy Policy
 documents as a markdown file at the `src/assets/TOS.md` path.
 
 Optionally, you can also link a Posthog project to anonymously track
-page visits, clicks etc via the following environment variables:
+page visits, clicks etc. via the following environment variables:
 
 - NG_APP_POSTHOG_KEY: The Posthog project token
 - NG_APP_POSTHOG_HOST: The Posthog tracking API endpoint,
   e.g. https://us.i.posthog.com
 
+You can use your OIDC provider of choice to authenticate users.
+By default, the project uses the ZITADEL OIDC provider
+Set the following environment variables to configure the OIDC provider:
+
+- NG_APP_ZITADEL_CLIENT_ID: The client ID of the OIDC provider e.g. 123456789123456@sc-www
+- NG_APP_ZITADEL_DOMAIN: The domain of the OIDC provider e.g. https://YOUR-PROJECT.zitadel.cloud
+- NG_APP_ZITADEL_USERINFO_ENDPOINT: The OIDC provider userinfo endpoint e.g. https://YOUR-PROJECT.zitadel.cloud/oidc/v1/userinfo
+- NG_APP_DOMAIN_BASE_URL: The base URL of your Domain with a closing '/' e.g. http://localhost:4200/
+
 ## Development server
 
 Run `ng serve` for a dev server, which listens on `http://localhost:4200/` by default.

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.component.ts

@@ -7,6 +7,7 @@ import { register } from 'swiper/element/bundle';
 import { HeaderComponent } from './layout/header/header.component';
 import { FooterComponent } from './layout/footer/footer.component';
 import { AnalyticsService } from './services/analytics.service';
+import { AuthenticationService } from './services/authentication.service';
 
 @Component({
   selector: 'app-root',
@@ -20,6 +21,7 @@ export class AppComponent implements OnInit, AfterViewInit {
 
   constructor(@Inject(PLATFORM_ID) private platformId: object,
     @Inject(DOCUMENT) private document: Document,
+    private auth: AuthenticationService,
     private router: Router,
     private analytics: AnalyticsService,
     private metaTagService: Meta) {

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

@@ -4,10 +4,29 @@ import { provideRouter } from '@angular/router';
 import { routes } from './app.routes';
 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 { 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, Settings, Star, Trash2 } 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),
@@ -51,10 +70,28 @@ export const appConfig: ApplicationConfig = {
         Leaf,
         ShoppingCart,
         ExternalLink,
-        Info
+        Info,
+        Settings,
+        Star,
+        Trash2
       }),
     ),
     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

@@ -1,6 +1,7 @@
 import { Routes } from '@angular/router';
 import { LandingpageComponent } from './pages/landingpage/landingpage.component';
 import { ServerListingComponent } from './pages/server-listing/server-listing.component';
+import { authGuard } from './guards/auth.guard';
 
 export const routes: Routes = [
   { path: '', component: LandingpageComponent },
@@ -11,5 +12,13 @@ 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),
+    canActivate: [authGuard]
+  },
+
   { 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,33 @@
+import { Component, Inject, OnInit, 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 implements OnInit{
+
+  constructor(
+    @Inject(PLATFORM_ID) private platformId: object,
+    private authService: AuthenticationService,
+    private router: Router
+  ) { }
+
+  ngOnInit() {
+
+    if(isPlatformBrowser(this.platformId)) {
+      this.authService.loginCodeFlow().then(() => {
+        const url = sessionStorage.getItem('prelogin_url') || '/';
+        sessionStorage.removeItem('prelogin_url');
+        this.router.navigateByUrl(url);
+      });
+    }
+
+  }
+
+}

src/app/guards/auth.guard.spec.ts

@@ -0,0 +1,17 @@
+import { TestBed } from '@angular/core/testing';
+import { CanActivateFn } from '@angular/router';
+
+import { authGuard } from './auth.guard';
+
+describe('authGuard', () => {
+  const executeGuard: CanActivateFn = (...guardParameters) => 
+      TestBed.runInInjectionContext(() => authGuard(...guardParameters));
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+  });
+
+  it('should be created', () => {
+    expect(executeGuard).toBeTruthy();
+  });
+});

src/app/guards/auth.guard.ts

@@ -0,0 +1,22 @@
+import { CanActivateFn } from '@angular/router';
+import { AuthenticationService } from '../services/authentication.service';
+import { inject } from '@angular/core';
+import { map, take } from 'rxjs';
+
+export const authGuard: CanActivateFn = (route) => {
+
+  const authService = inject(AuthenticationService);
+
+  return authService.authedState.pipe(
+    take(1),
+    map((isAuthenticated) => {
+      if (isAuthenticated) {
+        return true
+      } else {
+        authService.authenticate('/' +  route.url.join('/'));
+        return authService.isLoggedIn();
+      }
+    })
+  );
+
+};

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

@@ -19,27 +19,41 @@
                   Datacenters
                 </a>
               </li>
-              <li class="hidden lg:flex">
+              <li *ngIf="!isLoggedIn()" class="hidden lg:flex">
                 <a class="navbar_link" routerLink="/vendors" >
                   <lucide-icon class="h-4 w-4" name="home"></lucide-icon>
                   Vendors
                 </a>
               </li>
+              <li *ngIf="isLoggedIn()" class="hidden lg:flex">
+                <a class="navbar_link" routerLink="/dashboard" >
+                  <lucide-icon class="h-4 w-4" name="home"></lucide-icon>
+                  My Spare Cores
+                </a>
+              </li>
               <li class="lg:hidden">
                 <lucide-icon
                   class="navbar_link cursor-pointer h-8 w-8"
                   data-dropdown-toggle="menu_options"
                   name="menu" >
                 </lucide-icon>
               </li>
-              <!--
-              <li>
-                <button class="login_button text-sm items-center">
+              <li *ngIf="!isLoggedIn()">
+                <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()">
+                <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,34 @@
 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',
+  // eslint-disable-next-line @angular-eslint/no-host-metadata-property
+  host: {ngSkipHydration: 'true'},
 })
 export class HeaderComponent {
 
+  constructor(
+    private authService: AuthenticationService
+  ) { }
+
+  isLoggedIn() {
+    return this.authService.isLoggedIn();
+  }
+
+  login() {
+    this.authService.authenticate();
+  }
+
+  logout() {
+    this.authService.signout();
+  }
+
 }