igniteui-cli 15.2.2 → 15.3.1-beta.1

package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/services/fakeBackend.ts

@@ -0,0 +1,88 @@
+// ⚠ DEVELOPMENT ONLY — simulates POST /login, /register, /extlogin using localStorage.
+// Before going to production: remove this interceptor and replace with calls to your real API.
+import type { Login } from '../models/login.js';
+import type { RegisterInfo } from '../models/register-info.js';
+import type { ExternalLogin } from '../models/external-login.js';
+
+const USERS_KEY = '_fake_users';
+
+interface StoredUser {
+  given_name: string;
+  family_name: string;
+  email: string;
+  passwordHash: string;
+  externalId?: string;
+}
+
+function getUsers(): StoredUser[] {
+  try {
+    return JSON.parse(localStorage.getItem(USERS_KEY) ?? '[]');
+  } catch {
+    return [];
+  }
+}
+
+function saveUsers(users: StoredUser[]): void {
+  localStorage.setItem(USERS_KEY, JSON.stringify(users));
+}
+
+async function hashPassword(password: string): Promise<string> {
+  const data = new TextEncoder().encode(password);
+  const digest = await crypto.subtle.digest('SHA-256', data);
+  return Array.from(new Uint8Array(digest), byte => byte.toString(16).padStart(2, '0')).join('');
+}
+
+function makeJwt(payload: object): string {
+  const header = btoa(JSON.stringify({ alg: 'none', typ: 'JWT' }));
+  const body = btoa(JSON.stringify({ exp: Date.now() / 1000 + 3600, ...payload }));
+  return `${header}.${body}.`;
+}
+
+export async function fakeLogin(data: Login): Promise<string> {
+  const users = getUsers();
+  const passwordHash = await hashPassword(data.password);
+  const user = users.find(u => u.email === data.email && u.passwordHash === passwordHash);
+  if (!user) {
+    throw new Error('Invalid email or password.');
+  }
+  return makeJwt({ name: `${user.given_name} ${user.family_name}`, given_name: user.given_name, family_name: user.family_name, email: user.email });
+}
+
+export async function fakeRegister(data: RegisterInfo): Promise<string> {
+  const users = getUsers();
+  if (users.find(u => u.email === data.email)) {
+    throw new Error('An account with this email already exists.');
+  }
+  const newUser: StoredUser = {
+    given_name: data.given_name,
+    family_name: data.family_name,
+    email: data.email,
+    passwordHash: await hashPassword(data.password)
+  };
+  saveUsers([...users, newUser]);
+  return makeJwt({ name: `${data.given_name} ${data.family_name}`, given_name: data.given_name, family_name: data.family_name, email: data.email });
+}
+/** Upsert a user from a social (external) auth provider and return a JWT. */
+export function fakeExtLogin(data: ExternalLogin): string {
+  const users = getUsers();
+  const existing = users.find(u => u.email === data.email && data.email != null)
+    ?? users.find(u => u.externalId === data.id);
+  const given_name = data.given_name ?? data.name?.split(' ')[0] ?? '';
+  const family_name = data.family_name ?? data.name?.split(' ').slice(1).join(' ') ?? '';
+  // Resolve email: prefer what the provider returned, fall back to what we stored previously.
+  const email = data.email ?? existing?.email;
+  if (existing) {
+    // Update profile fields from provider (name/picture may change).
+    // Also store externalId if this user was originally created by email (first social login).
+    existing.given_name = given_name;
+    existing.family_name = family_name;
+    if (!existing.externalId) existing.externalId = data.id;
+    saveUsers(users);
+  } else {
+    if (!email) {
+      throw new Error('Cannot create an account without an email address.');
+    }
+    saveUsers([...users, { given_name, family_name, email, passwordHash: '', externalId: data.id }]);
+  }
+  return makeJwt({ name: data.name, given_name, family_name, email, picture: data.picture });
+}

package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/services/jwtUtil.ts

@@ -0,0 +1,10 @@
+import type { UserJWT } from '../models/user.js';
+
+/** Parse the payload of a JWT string into a UserJWT object. */
+export function parseUser(token: string): UserJWT & { token: string } {
+  const base64url = token.split('.')[1];
+  const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
+  const padded = base64.padEnd(base64.length + (4 - base64.length % 4) % 4, '=');
+  const decoded = JSON.parse(atob(padded));
+  return { ...decoded, token };
+}

package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/services/pkce.ts

@@ -0,0 +1,29 @@
+// PKCE (Proof Key for Code Exchange) utilities for OAuth 2.0 Authorization Code Flow.
+// https://tools.ietf.org/html/rfc7636
+
+function base64UrlEncode(bytes: Uint8Array): string {
+  return btoa(String.fromCharCode(...bytes))
+    .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+/** Generate a cryptographically random PKCE code verifier (43–128 chars, URL-safe). */
+export function generateCodeVerifier(): string {
+  const bytes = crypto.getRandomValues(new Uint8Array(32));
+  return base64UrlEncode(bytes);
+}
+
+/** Compute the S256 code challenge from a code verifier. */
+export async function generateCodeChallenge(verifier: string): Promise<string> {
+  const data = new TextEncoder().encode(verifier);
+  const digest = await crypto.subtle.digest('SHA-256', data);
+  return base64UrlEncode(new Uint8Array(digest));
+}
+
+/** Build a URL with query parameters from a plain object. */
+export function buildAuthUrl(endpoint: string, params: Record<string, string>): string {
+  const url = new URL(endpoint);
+  for (const [k, v] of Object.entries(params)) {
+    url.searchParams.set(k, v);
+  }
+  return url.toString();
+}

package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/services/userStore.ts

@@ -0,0 +1,39 @@
+import type { User } from '../models/user.js';
+
+const USER_KEY = 'currentUser';
+
+/**
+ * Simple localStorage-backed user store.
+ *
+ * NOTE: Storing the full user object in localStorage can be susceptible to XSS attacks.
+ * Consider additional security measures before going to production.
+ */
+export const UserStore = {
+  getUser(): User | null {
+    try {
+      const raw = localStorage.getItem(USER_KEY);
+      if (!raw) return null;
+      const parsed: User = JSON.parse(raw);
+      // Discard expired tokens so a stale session is never silently restored.
+      if (parsed.exp && Date.now() / 1000 > parsed.exp) {
+        localStorage.removeItem(USER_KEY);
+        return null;
+      }
+      return parsed;
+    } catch {
+      return null;
+    }
+  },
+
+  setUser(user: User): void {
+    localStorage.setItem(USER_KEY, JSON.stringify(user));
+  },
+
+  clearUser(): void {
+    localStorage.removeItem(USER_KEY);
+  },
+
+  getInitials(user: User): string {
+    return (user.given_name.charAt(0) + (user.family_name?.charAt(0) ?? '')).toUpperCase();
+  }
+};

package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/profile/profile.ts

@@ -0,0 +1,142 @@
+import { LitElement, html, css } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { defineComponents, IgcAvatarComponent } from 'igniteui-webcomponents';
+import { UserStore } from '../authentication/services/userStore.js';
+
+defineComponents(IgcAvatarComponent);
+
+@customElement('app-profile')
+export default class ProfilePage extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      justify-content: center;
+      padding: 48px 16px;
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    .card {
+      align-self: flex-start;
+      width: 100%;
+      max-width: 640px;
+      background: #fff;
+      border-radius: 8px;
+      box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
+      padding: 32px;
+      box-sizing: border-box;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+      padding-bottom: 24px;
+      border-bottom: 1px solid #d7eaf8;
+    }
+
+    .avatar {
+      flex: 0 0 auto;
+      --ig-avatar-background: #e0f2ff;
+      --ig-avatar-color: #0075d2;
+      --ig-avatar-size: 4rem;
+    }
+
+    .intro {
+      min-width: 0;
+    }
+
+    .status {
+      margin: 0 0 4px;
+      color: #000;
+      font-size: .875rem;
+      font-weight: 700;
+      text-transform: uppercase;
+    }
+
+    .name {
+      margin: 0;
+      overflow-wrap: anywhere;
+      color: #09f;
+      font-size: 2rem;
+      font-weight: 600;
+      line-height: 1.2;
+    }
+
+    .description {
+      margin: 8px 0 0;
+      color: #000;
+      font-size: 1rem;
+      line-height: 1.5;
+    }
+
+    .details {
+      margin: 28px 0 0;
+      padding: 0;
+    }
+
+    .row {
+      display: grid;
+      grid-template-columns: 140px minmax(0, 1fr);
+      gap: 24px;
+      padding: 14px 0;
+      border-bottom: 1px solid #eef3f7;
+    }
+
+    dt {
+      color: rgba(0, 0, 0, .62);
+      font-size: .875rem;
+      font-weight: 600;
+      margin: 0;
+    }
+
+    dd {
+      margin: 0;
+      font-size: 1rem;
+      color: #2d2d2d;
+    }
+  `;
+
+  render() {
+    const user = UserStore.getUser();
+    const initials = user ? UserStore.getInitials(user) : 'U';
+
+    return html`
+      <div class="card">
+        <div class="header">
+          <igc-avatar
+            class="avatar"
+            shape="circle"
+            src=${user?.picture ?? ''}
+            initials=${user?.picture ? '' : initials}
+          ></igc-avatar>
+          <div class="intro">
+            <p class="status">Signed in</p>
+            <h1 class="name">${user?.name || 'Your profile'}</h1>
+            <p class="description">Your account details are available on this protected route.</p>
+          </div>
+        </div>
+        <dl class="details">
+          <div class="row">
+            <dt>First name</dt>
+            <dd>${user?.given_name || 'Not provided'}</dd>
+          </div>
+          <div class="row">
+            <dt>Last name</dt>
+            <dd>${user?.family_name || 'Not provided'}</dd>
+          </div>
+          <div class="row">
+            <dt>Email</dt>
+            <dd>${user?.email || 'No email available'}</dd>
+          </div>
+        </dl>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'app-profile': ProfilePage;
+  }
+}

package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/redirect/redirect-facebook.ts

@@ -0,0 +1,57 @@
+import { LitElement, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { Router } from '@vaadin/router';
+import { ExternalAuth } from '../authentication/services/externalAuth.js';
+import { Authentication } from '../authentication/services/authentication.js';
+import { UserStore } from '../authentication/services/userStore.js';
+import type { User } from '../authentication/models/user.js';
+
+/**
+ * Handles the Facebook login redirect.
+ * Facebook uses a popup (JS SDK) instead of PKCE, so this page reads the profile
+ * that was stored in sessionStorage during the FB.login() callback.
+ */
+@customElement('app-redirect-facebook')
+export class RedirectFacebookElement extends LitElement {
+  @state() private error = '';
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._handleRedirect();
+  }
+
+  private async _handleRedirect() {
+    try {
+      const externalUser = await ExternalAuth.handleRedirect('facebook');
+      const result = await Authentication.loginWith(externalUser);
+      if (result.user) {
+        UserStore.setUser(result.user as User);
+        this.dispatchEvent(new CustomEvent('auth-change', { bubbles: true, composed: true }));
+        Router.go('/auth/profile');
+      } else {
+        this.error = result.error ?? 'Facebook sign-in failed.';
+      }
+    } catch (e: any) {
+      console.error('Facebook sign-in failed:', e);
+      this.error = 'Facebook sign-in failed. Please try again.';
+    }
+  }
+
+  render() {
+    if (this.error) {
+      return html`
+        <div style="padding:2rem;color:#d32f2f">
+          <p>${this.error}</p>
+          <button @click=${() => Router.go('/')}>Back to Home</button>
+        </div>
+      `;
+    }
+    return html`<p style="padding:2rem">Signing in with Facebook…</p>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'app-redirect-facebook': RedirectFacebookElement;
+  }
+}

package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/redirect/redirect-google.ts

@@ -0,0 +1,53 @@
+import { LitElement, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { Router } from '@vaadin/router';
+import { ExternalAuth } from '../authentication/services/externalAuth.js';
+import { Authentication } from '../authentication/services/authentication.js';
+import { UserStore } from '../authentication/services/userStore.js';
+import type { User } from '../authentication/models/user.js';
+
+/** Handles the OAuth redirect from Google. Exchanges the authorization code for a user profile. */
+@customElement('app-redirect-google')
+export class RedirectGoogleElement extends LitElement {
+  @state() private error = '';
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._handleRedirect();
+  }
+
+  private async _handleRedirect() {
+    try {
+      const externalUser = await ExternalAuth.handleRedirect('google');
+      const result = await Authentication.loginWith(externalUser);
+      if (result.user) {
+        UserStore.setUser(result.user as User);
+        this.dispatchEvent(new CustomEvent('auth-change', { bubbles: true, composed: true }));
+        Router.go('/auth/profile');
+      } else {
+        this.error = result.error ?? 'Google sign-in failed.';
+      }
+    } catch (e: any) {
+      console.error('Google sign-in failed:', e);
+      this.error = 'Google sign-in failed. Please try again.';
+    }
+  }
+
+  render() {
+    if (this.error) {
+      return html`
+        <div style="padding:2rem;color:#d32f2f">
+          <p>${this.error}</p>
+          <button @click=${() => Router.go('/')}>Back to Home</button>
+        </div>
+      `;
+    }
+    return html`<p style="padding:2rem">Signing in with Google…</p>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'app-redirect-google': RedirectGoogleElement;
+  }
+}

package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/redirect/redirect-microsoft.ts

@@ -0,0 +1,53 @@
+import { LitElement, html } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { Router } from '@vaadin/router';
+import { ExternalAuth } from '../authentication/services/externalAuth.js';
+import { Authentication } from '../authentication/services/authentication.js';
+import { UserStore } from '../authentication/services/userStore.js';
+import type { User } from '../authentication/models/user.js';
+
+/** Handles the OAuth redirect from Microsoft. Exchanges the authorization code for a user profile. */
+@customElement('app-redirect-microsoft')
+export class RedirectMicrosoftElement extends LitElement {
+  @state() private error = '';
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._handleRedirect();
+  }
+
+  private async _handleRedirect() {
+    try {
+      const externalUser = await ExternalAuth.handleRedirect('microsoft');
+      const result = await Authentication.loginWith(externalUser);
+      if (result.user) {
+        UserStore.setUser(result.user as User);
+        this.dispatchEvent(new CustomEvent('auth-change', { bubbles: true, composed: true }));
+        Router.go('/auth/profile');
+      } else {
+        this.error = result.error ?? 'Microsoft sign-in failed.';
+      }
+    } catch (e: any) {
+      console.error('Microsoft sign-in failed:', e);
+      this.error = 'Microsoft sign-in failed. Please try again.';
+    }
+  }
+
+  render() {
+    if (this.error) {
+      return html`
+        <div style="padding:2rem;color:#d32f2f">
+          <p>${this.error}</p>
+          <button @click=${() => Router.go('/')}>Back to Home</button>
+        </div>
+      `;
+    }
+    return html`<p style="padding:2rem">Signing in with Microsoft…</p>`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'app-redirect-microsoft': RedirectMicrosoftElement;
+  }
+}

package/templates/webcomponents/igc-ts/projects/side-nav-auth/index.d.ts

@@ -0,0 +1,15 @@
+import { ProjectTemplate } from "@igniteui/cli-core";
+import { SideNavProject } from "../side-nav";
+export declare class SideNavAuthIgcProject extends SideNavProject implements ProjectTemplate {
+    id: string;
+    name: string;
+    description: string;
+    dependencies: string[];
+    framework: string;
+    projectType: string;
+    hasExtraConfiguration: boolean;
+    isHidden: boolean;
+    get templatePaths(): string[];
+}
+declare const _default: SideNavAuthIgcProject;
+export default _default;

package/templates/webcomponents/igc-ts/projects/side-nav-auth/index.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SideNavAuthIgcProject = void 0;
+const path = __importStar(require("path"));
+const side_nav_1 = require("../side-nav");
+class SideNavAuthIgcProject extends side_nav_1.SideNavProject {
+    constructor() {
+        super(...arguments);
+        this.id = "side-nav-auth";
+        this.name = "Side navigation + login";
+        this.description = "Side navigation extended with user authentication module";
+        this.dependencies = [];
+        this.framework = "webcomponents";
+        this.projectType = "igc-ts";
+        this.hasExtraConfiguration = false;
+        this.isHidden = true;
+    }
+    get templatePaths() {
+        return [...super.templatePaths, path.join(__dirname, "files")];
+    }
+}
+exports.SideNavAuthIgcProject = SideNavAuthIgcProject;
+exports.default = new SideNavAuthIgcProject();

package/templates/webcomponents/igc-ts/projects/side-nav-mini/files/src/app/app-routing.ts

@@ -0,0 +1,13 @@
+import { type Route } from '@vaadin/router';
+import './home/home.js';
+import './not-found/not-found.js';
+
+export interface AppRoute extends Route {
+  icon?: string;
+}
+
+export const routes: AppRoute[] = [
+  { path: '/', component: 'app-home', name: 'Home', icon: 'home' },
+  // The fallback route should always be after other alternatives.
+  { path: '(.*)', component: 'app-not-found' },
+];