@aurorajs.dev/catalyst-cli 1.0.0

package/dist/templates/frontend/application/src/app/domains/auth/sign-out/sign-out.component.ts

@@ -0,0 +1,124 @@
+import { HttpClient } from '@angular/common/http';
+import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthenticationService, TokenStore } from '@aurora';
+import { catchError, of, switchMap } from 'rxjs';
+import { environment } from 'environments/environment';
+import { AUTH_STRATEGY, type AuthStrategy } from '../../../../environments/environment.type';
+
+/**
+ * Returns the Angular router path the app should navigate to after a local sign-out,
+ * or `null` when the component must perform a top-level BFF navigation instead.
+ *
+ * Exported so unit tests can assert the correct destination for each strategy
+ * without mounting the full component. Inverting the condition in this function
+ * will immediately break those tests.
+ *
+ *   - AUTH_STRATEGY.PASSWORD            → '/auth/sign-in' (local login form).
+ *   - AUTH_STRATEGY.AUTHORIZATION_CODE  → null (component navigates to the BFF
+ *                                         via window.location.href — RP-initiated
+ *                                         logout, D2/D8).
+ */
+export const signOutDestinationForStrategy = (strategy: AuthStrategy): string | null => {
+  if (strategy === AUTH_STRATEGY.AUTHORIZATION_CODE) {
+    // Under AUTHORIZATION_CODE the hub session must be terminated by navigating
+    // to the satellite's OWN BFF logout endpoint (GET /auth/logout), which
+    // issues a 302 to the hub. The frontend must NOT know the hub URL — only
+    // the BFF does (D2). Returning null signals that window.location.href is
+    // used instead of Angular Router.
+    return null;
+  }
+
+  return '/auth/sign-in';
+};
+
+/**
+ * Builds the BFF logout URL that the satellite navigates to for RP-initiated logout.
+ *
+ * Per design decision D2/D8, the frontend navigates to its OWN origin BFF endpoint
+ * (`GET ${bffRestBase}/auth/logout`), NOT directly to the hub. The BFF owns the hub
+ * URL and issues the 302 redirect to the hub — symmetric to how login works:
+ * the frontend navigates to `${bffRestBase}/auth/login` and the BFF redirects to
+ * the hub's `/authorize`.
+ *
+ * No query parameters are added by the frontend — the BFF constructs `client_id`,
+ * `post_logout_redirect_uri`, and `state` from its own backend config.
+ *
+ * Exported for unit testing.
+ *
+ * @param bffRestBase - The satellite BFF REST base URL (`environment.api.rest`).
+ * @returns The full BFF logout URL to assign to `window.location.href`.
+ */
+export const buildBffLogoutUrl = (bffRestBase: string): string => {
+  return `${bffRestBase}/auth/logout`;
+};
+
+@Component({
+  selector: 'app-sign-out',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'block' },
+  template: `
+    <div class="text-muted-foreground flex min-h-svh items-center justify-center text-sm">
+      Signing out…
+    </div>
+  `,
+})
+export default class SignOutComponent implements OnInit {
+  private readonly authenticationService = inject(AuthenticationService);
+  private readonly router = inject(Router);
+  // TokenStore is injected in @app (not @aurora) so that the hub revocation HTTP call
+  // lives here (D6 / HR-PORTS-001): the @aurora adapter stays framework-agnostic and
+  // only handles GraphQL revocation + tokenStore.clear(). The @app sign-out layer reads
+  // the refresh token before signOut() clears it, then calls POST /auth/logout (BFF
+  // revocation) as a best-effort step.
+  private readonly tokenStore = inject(TokenStore);
+  private readonly http = inject(HttpClient);
+
+  ngOnInit(): void {
+    // Under AUTHORIZATION_CODE (D6 / Task 6.2):
+    //   1. Read the refresh token BEFORE signOut() clears the store.
+    //   2. Call POST /auth/logout with the token (best-effort hub revocation via BFF).
+    //      A failure MUST NOT block the rest of the flow.
+    //   3. Call signOut() to revoke the GraphQL session + clear local credentials.
+    //   4. Navigate to the BFF logout endpoint (GET /auth/logout) for hub-session termination.
+    //
+    // Under PASSWORD: proceed directly to signOut() + Angular Router navigation.
+    //
+    // The frontend MUST NOT navigate directly to the hub — the BFF owns the hub URL
+    // and constructs the full hub redirect including client_id, post_logout_redirect_uri,
+    // and state (D2). This is symmetric to how login works.
+
+    const strategy = environment.authStrategy;
+
+    if (strategy === AUTH_STRATEGY.AUTHORIZATION_CODE) {
+      // Step 1: read the refresh token synchronously BEFORE signOut() clears it.
+      const refreshToken = this.tokenStore.refreshToken();
+
+      // Step 2: best-effort hub token revocation via BFF.
+      // The BFF POST /auth/logout performs a server-to-server revocation of the hub
+      // refresh token (RFC 7009). Its failure (network error, hub down) must not block
+      // the sign-out flow — it is defense-in-depth, not a gate.
+      const revokeUrl = `${environment.api.rest}/auth/logout`;
+      const revoke$ = this.http
+        .post(revokeUrl, { refreshToken }, { withCredentials: true })
+        .pipe(catchError(() => of(null)));
+
+      // Steps 3 + 4: after best-effort revocation (regardless of outcome), signOut()
+      // clears local credentials and then we navigate to the BFF GET /auth/logout
+      // to terminate the hub session.
+      revoke$
+        .pipe(switchMap(() => this.authenticationService.signOut()))
+        .subscribe(() => {
+          window.location.href = buildBffLogoutUrl(environment.api.rest);
+        });
+
+      return;
+    }
+
+    // PASSWORD strategy: signOut() revokes the satellite token + clears local credentials,
+    // then navigate via Angular Router to the local login form.
+    this.authenticationService.signOut().subscribe(() => {
+      this.router.navigate(['/auth/sign-in']);
+    });
+  }
+}

package/dist/templates/frontend/application/src/app/domains/auth/sign-up/sign-up.component.ts

@@ -0,0 +1,49 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideGalleryVerticalEnd } from '@ng-icons/lucide';
+
+import { SignupForm } from './signup-form';
+
+@Component({
+  selector: 'app-sign-up',
+  imports: [RouterLink, SignupForm, NgIcon],
+  providers: [provideIcons({ lucideGalleryVerticalEnd })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'block' },
+  template: `
+    <div class="grid min-h-svh lg:grid-cols-2">
+      <div class="flex flex-col gap-4 p-6 md:p-10">
+        <div class="flex justify-center gap-2 md:justify-start">
+          <a
+            class="flex items-center gap-2 font-medium"
+            routerLink="/"
+          >
+            <div
+              class="bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md"
+            >
+              <ng-icon
+                name="lucideGalleryVerticalEnd"
+                class="text-base"
+              />
+            </div>
+            Aurora Catalyst
+          </a>
+        </div>
+        <div class="flex flex-1 items-center justify-center">
+          <div class="w-full max-w-xs">
+            <app-signup-form />
+          </div>
+        </div>
+      </div>
+      <div class="bg-muted relative hidden lg:block">
+        <img
+          alt="Sign up background"
+          class="absolute inset-0 h-full w-full object-cover brightness-60 grayscale dark:brightness-[0.2] dark:grayscale"
+          src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0"
+        />
+      </div>
+    </div>
+  `,
+})
+export default class SignUpComponent {}

package/dist/templates/frontend/application/src/app/domains/auth/sign-up/signup-form.ts

@@ -0,0 +1,218 @@
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import {
+  AbstractControl,
+  FormBuilder,
+  ReactiveFormsModule,
+  ValidationErrors,
+  ValidatorFn,
+  Validators,
+} from '@angular/forms';
+import { RouterLink } from '@angular/router';
+import { NgIcon, provideIcons } from '@ng-icons/core';
+import { lucideGithub } from '@ng-icons/lucide';
+import { HlmButtonImports } from '@spartan-ng/helm/button';
+import { HlmFieldImports } from '@spartan-ng/helm/field';
+import { HlmInputImports } from '@spartan-ng/helm/input';
+
+@Component({
+  selector: 'app-signup-form',
+  imports: [
+    ReactiveFormsModule,
+    RouterLink,
+    HlmFieldImports,
+    HlmInputImports,
+    HlmButtonImports,
+    NgIcon,
+  ],
+  providers: [provideIcons({ lucideGithub })],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <form
+      [formGroup]="form"
+      (ngSubmit)="signup()"
+    >
+      <hlm-field-group>
+        <div class="flex flex-col items-center gap-1 text-center">
+          <h1 class="text-2xl font-bold">Create your account</h1>
+          <p class="text-muted-foreground text-sm text-balance">
+            Fill in the form below to create your account
+          </p>
+        </div>
+        <hlm-field>
+          <label
+            hlmFieldLabel
+            for="name"
+          >
+            Full Name
+          </label>
+          <input
+            id="name"
+            type="text"
+            hlmInput
+            placeholder="John Doe"
+            formControlName="name"
+          />
+          @if (form.controls.name.touched && form.controls.name.invalid) {
+            <hlm-field-error>
+              @if (form.controls.name.errors?.['required']) {
+                Name is required.
+              }
+            </hlm-field-error>
+          }
+        </hlm-field>
+        <hlm-field>
+          <label
+            hlmFieldLabel
+            for="email"
+          >
+            Email
+          </label>
+          <input
+            id="email"
+            type="email"
+            hlmInput
+            placeholder="you&#64;example.com"
+            formControlName="email"
+          />
+          @if (!(form.controls.email.touched && form.controls.email.invalid)) {
+            <hlm-field-description>
+              We'll use this to contact you. We will not share your email with anyone else.
+            </hlm-field-description>
+          }
+          @if (form.controls.email.touched && form.controls.email.invalid) {
+            <hlm-field-error>
+              @if (form.controls.email.errors?.['required']) {
+                Email is required.
+              }
+              @if (form.controls.email.errors?.['email']) {
+                Enter a valid email address.
+              }
+            </hlm-field-error>
+          }
+        </hlm-field>
+        <hlm-field>
+          <label
+            hlmFieldLabel
+            for="password"
+          >
+            Password
+          </label>
+          <input
+            id="password"
+            type="password"
+            hlmInput
+            formControlName="password"
+          />
+          @if (!(form.controls.password.touched && form.controls.password.invalid)) {
+            <hlm-field-description>Must be at least 8 characters long.</hlm-field-description>
+          }
+          @if (form.controls.password.touched && form.controls.password.invalid) {
+            <hlm-field-error>
+              @if (form.controls.password.errors?.['required']) {
+                Password is required.
+              }
+              @if (form.controls.password.errors?.['minlength']) {
+                Password must be at least 8 characters long.
+              }
+            </hlm-field-error>
+          }
+        </hlm-field>
+        <hlm-field>
+          <label
+            hlmFieldLabel
+            for="confirmPassword"
+          >
+            Confirm Password
+          </label>
+          <input
+            id="confirmPassword"
+            type="password"
+            hlmInput
+            formControlName="confirmPassword"
+          />
+          @if (
+            !(
+              form.controls.confirmPassword.touched &&
+              (form.controls.confirmPassword.invalid || form.errors?.['passwordMismatch'])
+            )
+          ) {
+            <hlm-field-description>Please confirm your password.</hlm-field-description>
+          }
+          @if (
+            form.controls.confirmPassword.touched &&
+            (form.controls.confirmPassword.invalid || form.errors?.['passwordMismatch'])
+          ) {
+            <hlm-field-error>
+              @if (form.controls.confirmPassword.errors?.['required']) {
+                Confirming your password is required.
+              }
+              @if (
+                form.errors?.['passwordMismatch'] &&
+                !form.controls.confirmPassword.errors?.['required']
+              ) {
+                Passwords must match.
+              }
+            </hlm-field-error>
+          }
+        </hlm-field>
+        <hlm-field>
+          <button
+            type="submit"
+            [disabled]="form.invalid"
+            hlmBtn
+          >
+            Create Account
+          </button>
+        </hlm-field>
+        <hlm-field-separator>Or continue with</hlm-field-separator>
+        <hlm-field>
+          <button
+            type="button"
+            hlmBtn
+            variant="outline"
+          >
+            <ng-icon
+              name="lucideGithub"
+              class="text-xl"
+            />
+            Sign up with GitHub
+          </button>
+          <p
+            class="text-center"
+            hlmFieldDescription
+          >
+            Already have an account?
+            <a routerLink="/auth/sign-in">Sign in</a>
+          </p>
+        </hlm-field>
+      </hlm-field-group>
+    </form>
+  `,
+})
+export class SignupForm {
+  private readonly _fb = inject(FormBuilder);
+
+  readonly form = this._fb.group(
+    {
+      name: ['', [Validators.required]],
+      email: ['', [Validators.required, Validators.email]],
+      password: ['', [Validators.required, Validators.minLength(8)]],
+      confirmPassword: ['', [Validators.required]],
+    },
+    { validators: passwordMatch() },
+  );
+
+  signup() {
+    if (this.form.valid) {
+      console.log(this.form.value);
+    }
+  }
+}
+
+function passwordMatch(): ValidatorFn {
+  return (group: AbstractControl): ValidationErrors | null => {
+    const password = group.get('password')?.value;
+    const confirm = group.get('confirmPassword')?.value;
+    return password === confirm ? null : { passwordMismatch: true };
+  };
+}

package/dist/templates/frontend/application/src/app/domains/auth/signed-out/signed-out.component.ts

@@ -0,0 +1,46 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { provideTranslocoScope, TranslocoDirective } from '@jsverse/transloco';
+import { environment } from 'environments/environment';
+
+/**
+ * Terminal "signed out" page shown after a sign-out in authorization-code mode.
+ *
+ * Reachable at /signed-out — this route carries NO authentication guard so it is
+ * always a safe landing place and can NEVER trigger a re-authentication loop (unlike
+ * /auth/sign-in which is gated by noLocalAuthGuard and would immediately bounce the
+ * user back to the hub if the hub cookie is still valid).
+ *
+ * This page is used as the `post_logout_redirect_uri` in the RP-initiated hub logout
+ * flow. After the hub clears the `hub_session` cookie, it 302-redirects the browser
+ * back to this URL, so the user lands here with both the local session and the hub
+ * session fully terminated.
+ *
+ * The "Sign in again" link sends the user back to the hub launcher explicitly,
+ * which is the only safe way to start a new authorize round-trip in this mode.
+ */
+@Component({
+  selector: 'app-signed-out',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [TranslocoDirective],
+  providers: [provideTranslocoScope('auth')],
+  template: `
+    <ng-container *transloco="let t; scope: 'auth'">
+      <div class="flex min-h-svh flex-col items-center justify-center gap-4 p-6 text-center">
+        <h1 class="text-2xl font-semibold">{{ t('auth.signedOut.Headline') }}</h1>
+        <p class="text-muted-foreground max-w-sm text-sm">
+          {{ t('auth.signedOut.Message') }}
+        </p>
+        <a
+          class="bg-primary text-primary-foreground hover:bg-primary/90 inline-flex items-center rounded-md px-4 py-2 text-sm font-medium"
+          [href]="hubLoginUrl"
+        >
+          {{ t('auth.signedOut.SignInButton') }}
+        </a>
+      </div>
+    </ng-container>
+  `,
+})
+export default class SignedOutComponent {
+  /** Direct link to the hub launcher — triggers a fresh authorize round-trip. */
+  readonly hubLoginUrl: string = `${environment.api.rest}/auth/login`;
+}

package/dist/templates/frontend/application/src/app/transloco-loader.ts

@@ -0,0 +1,12 @@
+import { HttpClient } from '@angular/common/http';
+import { inject, Injectable } from '@angular/core';
+import { Translation, TranslocoLoader } from '@jsverse/transloco';
+
+@Injectable({ providedIn: 'root' })
+export class TranslocoHttpLoader implements TranslocoLoader {
+  private http = inject(HttpClient);
+
+  getTranslation(lang: string) {
+    return this.http.get<Translation>(`/i18n/${lang}.json`);
+  }
+}

package/dist/templates/frontend/application/src/environments/environment.dev.ts

@@ -0,0 +1,24 @@
+import type { Environment } from './environment.type';
+
+export const environment: Environment = {
+  production: false,
+  debug: true,
+  authStrategy: 'password',
+  api: {
+    graphql: 'http://localhost:8080/graphql',
+    rest: 'http://localhost:8080/api',
+  },
+  lang: {
+    base: 'es',
+    fallback: 'es',
+    langs: ['es', 'en'],
+  },
+  oAuth: {
+    applicationCode: 'aurora',
+    applicationSecret: '$2y$10$EOA/SKEwKRgHPw64kO4LZ.6oy5b8kl6JzW/mCROMfSq6S38/IiywG',
+  },
+  appearance: {
+    theme: 'theme-default',
+    layout: 'classy',
+  },
+};

package/dist/templates/frontend/application/src/environments/environment.local.ts

@@ -0,0 +1,24 @@
+import type { Environment } from './environment.type';
+
+export const environment: Environment = {
+  production: false,
+  debug: true,
+  authStrategy: 'password',
+  api: {
+    graphql: 'http://localhost:8080/graphql',
+    rest: 'http://localhost:8080/api',
+  },
+  lang: {
+    base: 'es',
+    fallback: 'es',
+    langs: ['es', 'en', 'pt'],
+  },
+  oAuth: {
+    applicationCode: 'aurora',
+    applicationSecret: '$2y$10$EOA/SKEwKRgHPw64kO4LZ.6oy5b8kl6JzW/mCROMfSq6S38/IiywG',
+  },
+  appearance: {
+    theme: 'theme-default',
+    layout: 'classy',
+  }
+};

package/dist/templates/frontend/application/src/environments/environment.prod.ts

@@ -0,0 +1,24 @@
+import type { Environment } from './environment.type';
+
+export const environment: Environment = {
+  production: true,
+  debug: false,
+  authStrategy: 'password',
+  api: {
+    graphql: 'http://localhost:8080/graphql',
+    rest: 'http://localhost:8080/api',
+  },
+  lang: {
+    base: 'es',
+    fallback: 'es',
+    langs: ['es', 'en'],
+  },
+  oAuth: {
+    applicationCode: 'aurora',
+    applicationSecret: '$2y$10$EOA/SKEwKRgHPw64kO4LZ.6oy5b8kl6JzW/mCROMfSq6S38/IiywG',
+  },
+  appearance: {
+    theme: 'theme-default',
+    layout: 'classy',
+  },
+};

package/dist/templates/frontend/application/src/environments/environment.qa.ts

@@ -0,0 +1,24 @@
+import type { Environment } from './environment.type';
+
+export const environment: Environment = {
+  production: false,
+  debug: true,
+  authStrategy: 'password',
+  api: {
+    graphql: 'http://localhost:8080/graphql',
+    rest: 'http://localhost:8080/api',
+  },
+  lang: {
+    base: 'es',
+    fallback: 'es',
+    langs: ['es', 'en'],
+  },
+  oAuth: {
+    applicationCode: 'aurora',
+    applicationSecret: '$2y$10$EOA/SKEwKRgHPw64kO4LZ.6oy5b8kl6JzW/mCROMfSq6S38/IiywG',
+  },
+  appearance: {
+    theme: 'theme-default',
+    layout: 'classy',
+  },
+};

package/dist/templates/frontend/application/src/environments/environment.ts

@@ -0,0 +1,24 @@
+import type { Environment } from './environment.type';
+
+export const environment: Environment = {
+  production: false,
+  debug: false,
+  authStrategy: 'password',
+  api: {
+    graphql: 'http://localhost:8080/graphql',
+    rest: 'http://localhost:8080/api',
+  },
+  lang: {
+    base: 'es',
+    fallback: 'es',
+    langs: ['es', 'en'],
+  },
+  oAuth: {
+    applicationCode: 'aurora',
+    applicationSecret: '$2y$10$EOA/SKEwKRgHPw64kO4LZ.6oy5b8kl6JzW/mCROMfSq6S38/IiywG',
+  },
+  appearance: {
+    theme: 'theme-default',
+    layout: 'classy',
+  }
+};

package/dist/templates/frontend/application/src/environments/environment.type.ts

@@ -0,0 +1,50 @@
+/**
+ * Compile-time constants for the authentication strategy options.
+ * Follows the const-object-then-extract pattern to keep a single source of truth.
+ */
+export const AUTH_STRATEGY = {
+  PASSWORD: 'password',
+  AUTHORIZATION_CODE: 'authorization-code',
+} as const;
+
+export type AuthStrategy = (typeof AUTH_STRATEGY)[keyof typeof AUTH_STRATEGY];
+
+/**
+ * Shape of the `environment` object imported via `environments/environment`.
+ * All environment files must satisfy this interface.
+ */
+export interface Environment {
+  production: boolean;
+  debug: boolean;
+  /**
+   * Authentication strategy for this deployment.
+   * - 'password': local login form + Password Grant against this app's backend.
+   * - 'authorization-code': satellite mode — delegates ALL auth to a remote hub
+   *   via OAuth Authorization Code; no local login UI is shown.
+   */
+  authStrategy: AuthStrategy;
+  api: {
+    graphql: string;
+    rest: string;
+  };
+  lang: {
+    base: string;
+    fallback: string;
+    langs: string[];
+  };
+  oAuth: {
+    applicationCode: string;
+    applicationSecret: string;
+  };
+  appearance?: {
+    theme: string;
+    layout: string;
+  };
+  msEntraId?: {
+    tenant: string;
+    authority: string;
+    clientId: string;
+    redirectUri: string;
+    scopes: string[];
+  };
+}

package/dist/templates/frontend/application/src/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Frontend</title>
+    <base href="/" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1"
+    />
+    <link
+      type="image/x-icon"
+      rel="icon"
+      href="favicon.ico"
+    />
+  </head>
+  <body class="theme-neutral">
+    <app-root></app-root>
+  </body>
+</html>

package/dist/templates/frontend/application/src/main.ts

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