igniteui-cli 15.2.2-alpha.3 → 15.3.0

package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/RedirectGoogle.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ExternalAuth } from '../services/externalAuth';
+import { useAuth } from '../AuthContext';
+
+/** Handles the OAuth redirect from Google. Exchanges the authorization code for a user profile. */
+export default function RedirectGoogle() {
+  const { loginWith } = useAuth();
+  const navigate = useNavigate();
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const externalUser = await ExternalAuth.handleRedirect('google');
+        const err = await loginWith(externalUser);
+        if (err) {
+          setError(err);
+        } else {
+          navigate('/auth/profile');
+        }
+      } catch (e: any) {
+        console.error('Google sign-in failed:', e);
+        setError('Google sign-in failed. Please try again.');
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (error) {
+    return (
+      <div style={{ padding: '2rem', color: '#d32f2f' }}>
+        <p>{error}</p>
+        <button onClick={() => navigate('/')}>Back to Home</button>
+      </div>
+    );
+  }
+
+  return <p style={{ padding: '2rem' }}>Signing in with Google…</p>;
+}

package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/RedirectMicrosoft.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ExternalAuth } from '../services/externalAuth';
+import { useAuth } from '../AuthContext';
+
+/** Handles the OAuth redirect from Microsoft. Exchanges the authorization code for a user profile. */
+export default function RedirectMicrosoft() {
+  const { loginWith } = useAuth();
+  const navigate = useNavigate();
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const externalUser = await ExternalAuth.handleRedirect('microsoft');
+        const err = await loginWith(externalUser);
+        if (err) {
+          setError(err);
+        } else {
+          navigate('/auth/profile');
+        }
+      } catch (e: any) {
+        console.error('Microsoft sign-in failed:', e);
+        setError('Microsoft sign-in failed. Please try again.');
+      }
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  if (error) {
+    return (
+      <div style={{ padding: '2rem', color: '#d32f2f' }}>
+        <p>{error}</p>
+        <button onClick={() => navigate('/')}>Back to Home</button>
+      </div>
+    );
+  }
+
+  return <p style={{ padding: '2rem' }}>Signing in with Microsoft…</p>;
+}

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

@@ -0,0 +1,37 @@
+import type { Login } from '../models/login';
+import type { RegisterInfo } from '../models/register-info';
+import type { ExternalLogin } from '../models/external-login';
+import type { LoginResult } from '../models/user';
+import { parseUser } from './jwtUtil';
+import { fakeLogin, fakeRegister, fakeExtLogin } from './fakeBackend';
+
+/** Authentication service — swap fakeLogin/fakeRegister for real API calls when ready. */
+export const Authentication = {
+  async login(data: Login): Promise<LoginResult> {
+    try {
+      const token = await fakeLogin(data);
+      return { user: parseUser(token) };
+    } catch (e: any) {
+      return { error: e.message };
+    }
+  },
+
+  async register(data: RegisterInfo): Promise<LoginResult> {
+    try {
+      const token = await fakeRegister(data);
+      return { user: parseUser(token) };
+    } catch (e: any) {
+      return { error: e.message };
+    }
+  },
+
+  /** Send user info from a social provider to the external login endpoint. */
+  async loginWith(data: ExternalLogin): Promise<LoginResult> {
+    try {
+      const token = fakeExtLogin(data);
+      return { user: parseUser(token) };
+    } catch (e: any) {
+      return { error: e.message };
+    }
+  }
+};

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

@@ -0,0 +1,44 @@
+// Social login configuration.
+// To enable a provider, set its entry in oauthConfig below with your real credentials
+// from the provider's developer console.
+//
+// Redirect URIs to register in each provider's app settings:
+//   {your-origin}/auth/redirect-google
+//   {your-origin}/auth/redirect-facebook
+//   {your-origin}/auth/redirect-microsoft
+//
+// Developer consoles:
+//   Google:    https://console.cloud.google.com/apis/credentials
+//   Microsoft: https://portal.azure.com/#view/Microsoft_AAD_RegisteredApps
+//   Facebook:  https://developers.facebook.com/apps
+
+export type OAuthProvider = 'google' | 'facebook' | 'microsoft';
+
+export interface OAuthConfig {
+  google?: { clientId: string };
+
+  // tenantId defaults to 'common' (multi-tenant). Set it for single-tenant apps.
+  // IMPORTANT: The redirect URI must be registered as a SPA redirect URI in Azure
+  // (not "Web"), otherwise the token exchange will fail with a CORS error.
+  // See: https://learn.microsoft.com/en-us/entra/identity-platform/v2-oauth2-auth-code-flow
+  microsoft?: { clientId: string; tenantId?: string };
+
+  // Facebook login uses the JS SDK (popup flow). The SDK script must be loaded in
+  // index.html (see below). In the Facebook app dashboard you must also:
+  //   - Enable "Login with the JavaScript SDK"
+  //   - Add your domain to "Allowed Domains for the JavaScript SDK"
+  //   - Add the redirect URI to "Valid OAuth Redirect URIs"
+  //   - Serve the app over HTTPS
+  // See: https://developers.facebook.com/docs/facebook-login/web
+  facebook?: { clientId: string };
+}
+
+// Active OAuth configuration — fill in the providers you want to enable, for example:
+//
+// export const oauthConfig: OAuthConfig = {
+//   google: { clientId: 'YOUR_GOOGLE_CLIENT_ID' },
+//   microsoft: { clientId: 'YOUR_AZURE_APP_CLIENT_ID', tenantId: 'common' },
+//   // Note: Facebook requires HTTPS even for local dev - use ngrok or a local SSL proxy.
+//   facebook: { clientId: 'YOUR_FACEBOOK_APP_ID' },
+// };
+export const oauthConfig: OAuthConfig = {};

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' }
+];