igniteui-cli 15.2.2 → 15.3.1-beta.1

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

@@ -0,0 +1,67 @@
+import { useState, type FormEvent } from 'react';
+import { IgrButton, IgrIcon, IgrInput } from 'igniteui-react';
+import { useAuth } from '../AuthContext';
+import type { RegisterInfo } from '../models/register-info';
+import styles from './Register.module.css';
+
+interface RegisterProps {
+  onLogin: () => void;
+  onSuccess: () => void;
+}
+
+export function Register({ onLogin, onSuccess }: RegisterProps) {
+  const { register } = useAuth();
+  const [givenName, setGivenName] = useState('');
+  const [familyName, setFamilyName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+
+  const canSubmit = givenName.trim() !== '' && email.trim() !== '' && password !== '';
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError('');
+    const data: RegisterInfo = {
+      given_name: givenName,
+      family_name: familyName,
+      email,
+      password
+    };
+    const err = await register(data);
+    if (err) {
+      setError(err);
+    } else {
+      setPassword('');
+      onSuccess();
+    }
+  };
+
+  return (
+    <form className={styles.form} onSubmit={handleSubmit} noValidate>
+      <IgrInput outlined type="text" name="given_name" label="First Name" autoComplete="given-name" required={true}
+        value={givenName} onInput={(e: any) => setGivenName(e.detail ?? '')}>
+        <IgrIcon slot="suffix" name="assignment_ind" collection="material" />
+      </IgrInput>
+      <IgrInput outlined type="text" name="family_name" label="Last Name" autoComplete="family-name"
+        value={familyName} onInput={(e: any) => setFamilyName(e.detail ?? '')}>
+        <IgrIcon slot="suffix" name="assignment_ind" collection="material" />
+      </IgrInput>
+      <IgrInput outlined type="email" name="email" label="Email" autoComplete="email" required={true}
+        value={email} onInput={(e: any) => setEmail(e.detail ?? '')}>
+        <IgrIcon slot="suffix" name="account_circle" collection="material" />
+      </IgrInput>
+      <IgrInput outlined type="password" name="password" label="Password" autoComplete="new-password" required={true}
+        value={password} onInput={(e: any) => setPassword(e.detail ?? '')}>
+        <IgrIcon slot="suffix" name="lock" collection="material" />
+      </IgrInput>
+      {error && <p className={styles.error}>{error}</p>}
+      <div className={styles.actions}>
+        <IgrButton variant="contained" type="submit" className={styles.submitBtn} disabled={!canSubmit}>
+          <span>Sign Up</span>
+        </IgrButton>
+        <a className={styles.linkBtn} onClick={onLogin} role="button" tabIndex={0}>Have an account?</a>
+      </div>
+    </form>
+  );
+}

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

@@ -0,0 +1,10 @@
+/** User profile returned by a social (external) auth provider. */
+export interface ExternalLogin {
+  id: string;
+  name: string;
+  email?: string; // not always present use id as fallback key
+  given_name?: string;
+  family_name?: string;
+  picture?: string;
+  externalToken: string;
+}

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

@@ -0,0 +1,4 @@
+export interface Login {
+  email: string;
+  password: string;
+}

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

@@ -0,0 +1,6 @@
+export interface RegisterInfo {
+  given_name: string;
+  family_name: string;
+  email: string;
+  password: string;
+}

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

@@ -0,0 +1,19 @@
+/** Data transfer model expected from backend API JWT-s */
+export interface UserJWT {
+  exp: number;
+  name: string;
+  given_name: string;
+  family_name: string;
+  email: string;
+  picture?: string;
+}
+
+/** Client user model */
+export interface User extends UserJWT {
+  token: string;
+}
+
+export interface LoginResult {
+  user?: User;
+  error?: string;
+}

package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/Profile.module.css

@@ -0,0 +1,87 @@
+.container {
+  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;
+}

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

@@ -0,0 +1,42 @@
+import { IgrAvatar } from 'igniteui-react';
+import { useAuth } from '../AuthContext';
+import styles from './Profile.module.css';
+
+export default function Profile() {
+  const { currentUser } = useAuth();
+  const initials = ((currentUser?.given_name?.[0] ?? '') + (currentUser?.family_name?.[0] ?? '')).toUpperCase() || 'U';
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.card}>
+        <div className={styles.header}>
+          <IgrAvatar
+            className={styles.avatar}
+            shape="circle"
+            initials={initials}
+            src={currentUser?.picture ?? ''}
+          />
+          <div className={styles.intro}>
+            <p className={styles.status}>Signed in</p>
+            <h1 className={styles.name}>{currentUser?.name || 'Your profile'}</h1>
+            <p className={styles.description}>Your account details are available on this protected route.</p>
+          </div>
+        </div>
+        <dl className={styles.details}>
+          <div className={styles.row}>
+            <dt className={styles.dt}>First name</dt>
+            <dd className={styles.dd}>{currentUser?.given_name || 'Not provided'}</dd>
+          </div>
+          <div className={styles.row}>
+            <dt className={styles.dt}>Last name</dt>
+            <dd className={styles.dd}>{currentUser?.family_name || 'Not provided'}</dd>
+          </div>
+          <div className={styles.row}>
+            <dt className={styles.dt}>Email</dt>
+            <dd className={styles.dd}>{currentUser?.email || 'No email available'}</dd>
+          </div>
+        </dl>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,44 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ExternalAuth } from '../services/externalAuth';
+import { useAuth } from '../AuthContext';
+
+/**
+ * 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.
+ */
+export default function RedirectFacebook() {
+  const { loginWith } = useAuth();
+  const navigate = useNavigate();
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const externalUser = await ExternalAuth.handleRedirect('facebook');
+        const err = await loginWith(externalUser);
+        if (err) {
+          setError(err);
+        } else {
+          navigate('/auth/profile');
+        }
+      } catch (e: any) {
+        console.error('Facebook sign-in failed:', e);
+        setError('Facebook 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 Facebook…</p>;
+}

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 = {};