igniteui-cli 15.2.2 → 15.3.0

package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/services/externalAuth.ts

@@ -0,0 +1,272 @@
+import type { ExternalLogin } from '../models/external-login';
+import type { OAuthProvider } from './external-auth-config';
+import { oauthConfig } from './external-auth-config';
+import { generateCodeVerifier, generateCodeChallenge, buildAuthUrl } from './pkce';
+
+// sessionStorage keys
+const VERIFIER_KEY = '_pkce_verifier';
+const STATE_KEY = '_oauth_state';
+const FB_USER_KEY = '_fb_user';
+const ACTIVE_PROVIDER_KEY = '_ext_active_provider';
+
+// Declared by the Facebook JS SDK (loaded via script tag in index.html)
+declare const FB: any;
+
+// Set to true once FB.init() has been called in this session.
+// Prevents FB.logout() from being called before initialization.
+let fbInitialized = false;
+
+/**
+ * Decode a JWT payload segment. Handles Base64URL encoding (no padding, - and _ chars)
+ * which `atob()` does not accept natively - missing padding causes `InvalidCharacterError`.
+ */
+function decodeJwtPayload(token: string): any {
+  const base64url = token.split('.')[1];
+  const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
+  const padded = base64.padEnd(base64.length + (4 - base64.length % 4) % 4, '=');
+  return JSON.parse(atob(padded));
+}
+
+/**
+ * Waits until the Facebook JS SDK has loaded and is available on window.
+ * The SDK is loaded with `async defer` so it may not be ready when login() is called.
+ */
+function waitForFB(): Promise<void> {
+  return new Promise(resolve => {
+    if (typeof (window as any).FB !== 'undefined') { resolve(); return; }
+    const id = setInterval(() => {
+      if (typeof (window as any).FB !== 'undefined') { clearInterval(id); resolve(); }
+    }, 50);
+  });
+}
+
+/**
+ * External (social) authentication service.
+ * Supports Google and Microsoft via OIDC/PKCE, and Facebook via the JS SDK.
+ *
+ * Usage: call login(provider) to start the flow; call handleRedirect(provider)
+ * on the matching redirect page to complete it and retrieve the user profile.
+ */
+export const ExternalAuth = {
+  /** Returns true if any provider (or the specific provider) is configured. */
+  hasProvider(provider?: OAuthProvider): boolean {
+    if (provider) {
+      return provider in oauthConfig && (oauthConfig as any)[provider] != null;
+    }
+    return Object.values(oauthConfig).some(v => v != null);
+  },
+
+  /** Initiate login for the given provider. Redirects the page to the provider's auth endpoint. */
+  async login(provider: OAuthProvider): Promise<void> {
+    localStorage.setItem(ACTIVE_PROVIDER_KEY, provider);
+    if (provider === 'google') {
+      const cfg = oauthConfig.google!;
+      const verifier = generateCodeVerifier();
+      const challenge = await generateCodeChallenge(verifier);
+      sessionStorage.setItem(VERIFIER_KEY, verifier);
+      const state = crypto.randomUUID();
+      sessionStorage.setItem(STATE_KEY, state);
+      const redirectUri = `${window.location.origin}/auth/redirect-google`;
+      window.location.href = buildAuthUrl('https://accounts.google.com/o/oauth2/v2/auth', {
+        response_type: 'code',
+        client_id: cfg.clientId,
+        redirect_uri: redirectUri,
+        scope: 'openid profile email',
+        code_challenge: challenge,
+        code_challenge_method: 'S256',
+        state,
+      });
+    } else if (provider === 'microsoft') {
+      const cfg = oauthConfig.microsoft!;
+      const tenantId = cfg.tenantId ?? 'common';
+      const verifier = generateCodeVerifier();
+      const challenge = await generateCodeChallenge(verifier);
+      sessionStorage.setItem(VERIFIER_KEY, verifier);
+      const state = crypto.randomUUID();
+      sessionStorage.setItem(STATE_KEY, state);
+      const redirectUri = `${window.location.origin}/auth/redirect-microsoft`;
+      window.location.href = buildAuthUrl(
+        `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/authorize`,
+        {
+          response_type: 'code',
+          client_id: cfg.clientId,
+          redirect_uri: redirectUri,
+          scope: 'openid profile email',
+          code_challenge: challenge,
+          code_challenge_method: 'S256',
+          state,
+        }
+      );
+    } else if (provider === 'facebook') {
+      const cfg = oauthConfig.facebook!;
+      // Wait for the SDK to load (it is included with `async defer` in index.html
+      // and may not be available yet when the user clicks the login button).
+      await waitForFB();
+      FB.init({ appId: cfg.clientId, xfbml: false, version: 'v3.1' });
+      fbInitialized = true;
+      FB.login(
+        (response: any) => {
+          if (response.authResponse) {
+            FB.api(
+              '/me?fields=id,email,name,first_name,last_name,picture',
+              (res: any) => {
+                const user: ExternalLogin = {
+                  id: res.id,
+                  name: res.name,
+                  given_name: res.first_name,
+                  family_name: res.last_name,
+                  email: res.email,
+                  // Facebook returns picture as an object: { data: { url, width, height } }
+                  picture: res.picture?.data?.url,
+                  externalToken: FB.getAuthResponse()?.accessToken ?? '',
+                };
+                sessionStorage.setItem(FB_USER_KEY, JSON.stringify(user));
+                window.location.href = '/auth/redirect-facebook';
+              }
+            );
+          }
+        },
+        { scope: 'public_profile,email' }
+      );
+    }
+  },
+
+  /**
+   * Complete the OAuth redirect flow and return the external user profile.
+   * Call this from the /auth/redirect-{provider} page.
+   *
+   * For Google/Microsoft: exchanges the authorization code (PKCE) for tokens.
+   * For Facebook: reads the profile stored during the FB.login() popup flow.
+   */
+  async handleRedirect(provider: OAuthProvider): Promise<ExternalLogin> {
+    if (provider === 'facebook') {
+      const stored = sessionStorage.getItem(FB_USER_KEY);
+      if (!stored) throw new Error('No Facebook user data found. Please try again.');
+      sessionStorage.removeItem(FB_USER_KEY);
+      return JSON.parse(stored) as ExternalLogin;
+    }
+
+    const params = new URLSearchParams(window.location.search);
+    const code = params.get('code');
+    if (!code) throw new Error('Missing authorization code in redirect URL.');
+
+    // Validate the state parameter to prevent CSRF attacks.
+    const returnedState = params.get('state');
+    const savedState = sessionStorage.getItem(STATE_KEY);
+    sessionStorage.removeItem(STATE_KEY);
+    if (!returnedState || returnedState !== savedState) {
+      throw new Error('OAuth state mismatch. The request may have been tampered with.');
+    }
+
+    const verifier = sessionStorage.getItem(VERIFIER_KEY);
+    if (!verifier) throw new Error('Missing PKCE code verifier. Please try again.');
+    sessionStorage.removeItem(VERIFIER_KEY);
+
+    if (provider === 'google') {
+      const cfg = oauthConfig.google!;
+      const redirectUri = `${window.location.origin}/auth/redirect-google`;
+      const res = await fetch('https://oauth2.googleapis.com/token', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: new URLSearchParams({
+          grant_type: 'authorization_code',
+          client_id: cfg.clientId,
+          redirect_uri: redirectUri,
+          code,
+          code_verifier: verifier,
+        }),
+      });
+      if (!res.ok) throw new Error('Google token exchange failed.');
+      const data = await res.json();
+      // Decode the id_token to extract user claims - no extra userinfo request needed
+      const payload = decodeJwtPayload(data.id_token);
+      return {
+        id: payload.sub,
+        name: payload.name,
+        given_name: payload.given_name,
+        family_name: payload.family_name,
+        email: payload.email,
+        picture: payload.picture,
+        externalToken: data.access_token,
+      };
+    }
+
+    if (provider === 'microsoft') {
+      const cfg = oauthConfig.microsoft!;
+      const tenantId = cfg.tenantId ?? 'common';
+      const redirectUri = `${window.location.origin}/auth/redirect-microsoft`;
+      const res = await fetch(
+        `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/token`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+          body: new URLSearchParams({
+            grant_type: 'authorization_code',
+            client_id: cfg.clientId,
+            redirect_uri: redirectUri,
+            code,
+            code_verifier: verifier,
+          }),
+        }
+      );
+      if (!res.ok) throw new Error('Microsoft token exchange failed.');
+      const data = await res.json();
+      const payload = decodeJwtPayload(data.id_token);
+      return {
+        id: payload.oid ?? payload.sub,
+        name: payload.name,
+        email: payload.email ?? payload.preferred_username,
+        externalToken: data.access_token,
+      };
+    }
+
+    throw new Error(`Unknown provider: ${provider}`);
+  },
+
+  /**
+   * Sign out from the active external provider (if any) and clear its stored state.
+   * Call this alongside clearing local user state on logout.
+   */
+  logout(): void {
+    const provider = localStorage.getItem(ACTIVE_PROVIDER_KEY) as OAuthProvider | null;
+    localStorage.removeItem(ACTIVE_PROVIDER_KEY);
+    sessionStorage.removeItem(VERIFIER_KEY);
+    sessionStorage.removeItem(FB_USER_KEY);
+
+    if (!provider) return;
+
+    if (provider === 'google') {
+      // Redirect to Google's end-session endpoint to clear the Google session.
+      // The user is returned to the app root after sign-out.
+      const cfg = oauthConfig.google;
+      if (cfg) {
+        window.location.href = `https://accounts.google.com/logout`;
+        return;
+      }
+    }
+
+    if (provider === 'microsoft') {
+      const cfg = oauthConfig.microsoft;
+      if (cfg) {
+        const tenantId = cfg.tenantId ?? 'common';
+        const postLogoutRedirectUri = encodeURIComponent(window.location.origin);
+        window.location.href =
+          `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/logout` +
+          `?post_logout_redirect_uri=${postLogoutRedirectUri}`;
+        return;
+      }
+    }
+
+    if (provider === 'facebook') {
+      // Only call FB.logout() when the SDK was initialised in this session.
+      // Calling it on a fresh page load (before FB.init) throws an error.
+      try {
+        if (fbInitialized && typeof FB !== 'undefined') {
+          FB.logout();
+        }
+      } catch {
+        // SDK not loaded - nothing to do
+      }
+    }
+  },
+};

package/templates/react/igr-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';
+import type { RegisterInfo } from '../models/register-info';
+import type { ExternalLogin } from '../models/external-login';
+
+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/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/services/jwtUtil.ts

@@ -0,0 +1,10 @@
+import type { UserJWT } from '../models/user';
+
+/** 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/react/igr-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/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/services/userStore.ts

@@ -0,0 +1,39 @@
+import type { User } from '../models/user';
+
+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/react/igr-ts/projects/side-nav-auth/index.d.ts

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

package/templates/react/igr-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.SideNavAuthIgrTsProject = void 0;
+const path = __importStar(require("path"));
+const side_nav_1 = require("../side-nav");
+class SideNavAuthIgrTsProject extends side_nav_1.SideNavIgrTsProject {
+    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 = "react";
+        this.projectType = "igr-ts";
+        this.hasExtraConfiguration = false;
+        this.isHidden = true;
+    }
+    get templatePaths() {
+        return [...super.templatePaths, path.join(__dirname, "files")];
+    }
+}
+exports.SideNavAuthIgrTsProject = SideNavAuthIgrTsProject;
+exports.default = new SideNavAuthIgrTsProject();

package/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app-routes.tsx

@@ -0,0 +1,5 @@
+import Home from './home/home';
+
+export const routes = [
+  { path: '/', element: <Home />, text: 'Home', icon: 'home' }
+];

package/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app.css

@@ -0,0 +1,109 @@
+.app {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+  overflow: hidden;
+}
+
+.app__navbar {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  height: 56px;
+  padding: 0 16px;
+  background: #239ef0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, .24);
+  box-sizing: border-box;
+}
+
+.app__menu-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  color: #000;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.app__menu-button igc-icon {
+  font-size: 24px;
+}
+
+.app__title {
+  margin: 0 0 0 16px;
+  color: #000;
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.app__body {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+.app__drawer {
+  flex: 0 0 auto;
+  height: 100%;
+  --menu-full-width: 280px;
+}
+
+igc-nav-drawer-item::part(base) {
+  min-height: 48px;
+  color: #2d2d2d;
+}
+
+igc-nav-drawer-item[active]::part(base) {
+  background: #e0f2ff;
+  color: #0075d2;
+}
+
+igc-nav-drawer-item[active] igc-icon {
+  color: #0075d2;
+}
+
+igc-nav-drawer-item:not([active]) igc-icon {
+  color: #2d2d2d;
+}
+
+.app--mini .app__drawer {
+  --menu-full-width: 68px;
+}
+
+igc-nav-drawer.app__drawer::part(base) {
+  transition: width 0.3s ease-out;
+  overflow: hidden;
+}
+
+.app--mini igc-nav-drawer-item::part(base) {
+  justify-content: center;
+  width: 40px;
+  min-height: 40px;
+  padding: 0;
+  margin: 4px auto;
+  border-radius: 8px;
+}
+
+.app--mini igc-nav-drawer-item::part(content) {
+  display: none;
+}
+
+.app__content {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: auto;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+@media (max-width: 1024px) {
+  .app__menu-button {
+    display: none;
+  }
+}

package/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app.test.tsx

@@ -0,0 +1,20 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import App from './app';
+import 'element-internals-polyfill';
+import { setupTestMocks } from '../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+});
+
+test('renders without crashing', () => {
+  const wrapper = render(
+    <MemoryRouter>
+      <App />
+    </MemoryRouter>
+  );
+
+  expect(wrapper).toBeTruthy();
+});