create-aws-project 1.2.1

package/templates/apps/web/src/__tests__/App.spec.tsx

@@ -0,0 +1,240 @@
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react';
+import { ChakraProvider } from '@chakra-ui/react';
+import { useUserStore } from '../store/user-store';
+import App from '../App';
+import theme from '../theme';
+import { apiClient } from '../config/api';
+import { ApiError } from '{{PACKAGE_SCOPE}}/api-client';
+
+// Mock the apiClient
+jest.mock('../config/api', () => ({
+  apiClient: {
+    getUsers: jest.fn(),
+    createUser: jest.fn(),
+  },
+}));
+
+const mockApiClient = apiClient as jest.Mocked<typeof apiClient>;
+
+const renderWithChakra = async (component: React.ReactElement) => {
+  let result;
+  await act(async () => {
+    result = render(<ChakraProvider theme={theme}>{component}</ChakraProvider>);
+  });
+  // Wait for any pending async operations
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+  return result!;
+};
+
+describe('App', () => {
+  beforeEach(() => {
+    // Reset store before each test
+    useUserStore.setState({
+      user: null,
+      users: [],
+      isLoading: false,
+      error: null,
+    });
+    // Reset mocks
+    jest.clearAllMocks();
+    // Default mock implementations
+    mockApiClient.getUsers.mockResolvedValue([]);
+  });
+
+  afterEach(async () => {
+    // Wait for any pending state updates to flush
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+  });
+
+  it('should render the app title', async () => {
+    await renderWithChakra(<App />);
+    expect(screen.getByText('{{PROJECT_NAME_TITLE}}')).toBeInTheDocument();
+  });
+
+  it('should render welcome message', async () => {
+    await renderWithChakra(<App />);
+    expect(screen.getByText('Welcome to the Web Client')).toBeInTheDocument();
+  });
+
+  it('should render load demo user button initially', async () => {
+    await renderWithChakra(<App />);
+    expect(screen.getByText('Load Demo User')).toBeInTheDocument();
+  });
+
+  it('should display user info when demo user is loaded', async () => {
+    await renderWithChakra(<App />);
+
+    await act(async () => {
+      const loadButton = screen.getByText('Load Demo User');
+      fireEvent.click(loadButton);
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('Current User:')).toBeInTheDocument();
+    });
+    expect(screen.getByText('demo@example.com')).toBeInTheDocument();
+    expect(screen.getByText('Demo User')).toBeInTheDocument();
+  });
+
+  it('should clear user when clear button is clicked', async () => {
+    await renderWithChakra(<App />);
+
+    // Load user
+    await act(async () => {
+      const loadButton = screen.getByText('Load Demo User');
+      fireEvent.click(loadButton);
+    });
+
+    // Verify user is loaded
+    await waitFor(() => {
+      expect(screen.getByText('Current User:')).toBeInTheDocument();
+    });
+
+    // Clear user
+    await act(async () => {
+      const clearButton = screen.getByText('Clear User');
+      fireEvent.click(clearButton);
+    });
+
+    // Should show load button again (user is null, but users array still has data)
+    // So we check that "Current User:" is not visible anymore
+    await waitFor(() => {
+      expect(screen.queryByText('Current User:')).not.toBeInTheDocument();
+    });
+  });
+
+  it('should list all features', async () => {
+    await renderWithChakra(<App />);
+
+    expect(screen.getByText(/React 18 with TypeScript/)).toBeInTheDocument();
+    expect(screen.getByText(/Vite for fast development/)).toBeInTheDocument();
+    expect(screen.getByText(/Chakra UI component library/)).toBeInTheDocument();
+    expect(screen.getByText(/Zustand for state management/)).toBeInTheDocument();
+    expect(screen.getByText(/Jest for testing/)).toBeInTheDocument();
+  });
+
+  it('should handle API error when fetching users', async () => {
+    const apiError = new ApiError('Network error', 500, 'SERVER_ERROR');
+    mockApiClient.getUsers.mockRejectedValue(apiError);
+
+    await renderWithChakra(<App />);
+
+    // Click fetch users button to trigger error
+    await act(async () => {
+      const fetchButton = screen.getByText('Fetch Users from API');
+      fireEvent.click(fetchButton);
+    });
+
+    // Wait for error toast to appear (the App shows toast on error)
+    await waitFor(() => {
+      expect(mockApiClient.getUsers).toHaveBeenCalled();
+    });
+  });
+
+  it('should handle generic error when fetching users', async () => {
+    mockApiClient.getUsers.mockRejectedValue(new Error('Generic error'));
+
+    await renderWithChakra(<App />);
+
+    await act(async () => {
+      const fetchButton = screen.getByText('Fetch Users from API');
+      fireEvent.click(fetchButton);
+    });
+
+    await waitFor(() => {
+      expect(mockApiClient.getUsers).toHaveBeenCalled();
+    });
+  });
+
+  it('should create user successfully', async () => {
+    const newUser = {
+      id: 'new-id',
+      email: 'new@example.com',
+      name: 'New User',
+      createdAt: new Date().toISOString(),
+    };
+    mockApiClient.createUser.mockResolvedValue(newUser);
+
+    await renderWithChakra(<App />);
+
+    await act(async () => {
+      const createButton = screen.getByText('Create Test User');
+      fireEvent.click(createButton);
+    });
+
+    await waitFor(() => {
+      expect(mockApiClient.createUser).toHaveBeenCalled();
+    });
+
+    // Verify user was added to store
+    expect(useUserStore.getState().users).toContainEqual(newUser);
+  });
+
+  it('should handle API error when creating user', async () => {
+    const apiError = new ApiError('Validation error', 400, 'VALIDATION_ERROR');
+    mockApiClient.createUser.mockRejectedValue(apiError);
+
+    await renderWithChakra(<App />);
+
+    await act(async () => {
+      const createButton = screen.getByText('Create Test User');
+      fireEvent.click(createButton);
+    });
+
+    await waitFor(() => {
+      expect(mockApiClient.createUser).toHaveBeenCalled();
+    });
+  });
+
+  it('should handle generic error when creating user', async () => {
+    mockApiClient.createUser.mockRejectedValue(new Error('Generic error'));
+
+    await renderWithChakra(<App />);
+
+    await act(async () => {
+      const createButton = screen.getByText('Create Test User');
+      fireEvent.click(createButton);
+    });
+
+    await waitFor(() => {
+      expect(mockApiClient.createUser).toHaveBeenCalled();
+    });
+  });
+
+  it('should fetch users on mount and display count', async () => {
+    const mockUsers = [
+      { id: '1', email: 'user1@example.com', name: 'User 1', createdAt: '2024-01-01' },
+      { id: '2', email: 'user2@example.com', name: 'User 2', createdAt: '2024-01-02' },
+    ];
+    mockApiClient.getUsers.mockResolvedValue(mockUsers);
+
+    await renderWithChakra(<App />);
+
+    await waitFor(() => {
+      expect(mockApiClient.getUsers).toHaveBeenCalled();
+    });
+
+    // Verify users were loaded into store
+    await waitFor(() => {
+      expect(useUserStore.getState().users).toEqual(mockUsers);
+    });
+  });
+
+  it('should display error message when error state is set', async () => {
+    // Set error state before rendering
+    useUserStore.setState({
+      user: null,
+      users: [],
+      isLoading: false,
+      error: 'Test error message',
+    });
+
+    await renderWithChakra(<App />);
+
+    expect(screen.getByText(/Error: Test error message/)).toBeInTheDocument();
+  });
+});

package/templates/apps/web/src/__tests__/store/user-store.spec.ts

@@ -0,0 +1,185 @@
+import { useUserStore } from '../../store/user-store';
+import type { User } from '{{PACKAGE_SCOPE}}/common-types';
+
+describe('UserStore', () => {
+  beforeEach(() => {
+    // Reset store before each test
+    useUserStore.setState({
+      user: null,
+      users: [],
+      isLoading: false,
+      error: null,
+    });
+  });
+
+  it('should initialize with empty state', () => {
+    const state = useUserStore.getState();
+    expect(state.user).toBeNull();
+    expect(state.users).toEqual([]);
+    expect(state.isLoading).toBe(false);
+    expect(state.error).toBeNull();
+  });
+
+  it('should set user', () => {
+    const user: User = {
+      id: '1',
+      email: 'test@example.com',
+      name: 'Test User',
+      createdAt: new Date().toISOString(),
+    };
+
+    useUserStore.getState().setUser(user);
+    expect(useUserStore.getState().user).toEqual(user);
+  });
+
+  it('should add user to users array', () => {
+    const user: User = {
+      id: '1',
+      email: 'test@example.com',
+      name: 'Test User',
+      createdAt: new Date().toISOString(),
+    };
+
+    useUserStore.getState().addUser(user);
+    expect(useUserStore.getState().users).toHaveLength(1);
+    expect(useUserStore.getState().users[0]).toEqual(user);
+  });
+
+  it('should update user in users array', () => {
+    const user: User = {
+      id: '1',
+      email: 'test@example.com',
+      name: 'Test User',
+      createdAt: new Date().toISOString(),
+    };
+
+    useUserStore.getState().addUser(user);
+    useUserStore.getState().updateUser('1', { name: 'Updated User' });
+
+    const updatedUser = useUserStore.getState().users[0];
+    expect(updatedUser.name).toBe('Updated User');
+  });
+
+  it('should remove user from users array', () => {
+    const user: User = {
+      id: '1',
+      email: 'test@example.com',
+      name: 'Test User',
+      createdAt: new Date().toISOString(),
+    };
+
+    useUserStore.getState().addUser(user);
+    expect(useUserStore.getState().users).toHaveLength(1);
+
+    useUserStore.getState().removeUser('1');
+    expect(useUserStore.getState().users).toHaveLength(0);
+  });
+
+  it('should set loading state', () => {
+    useUserStore.getState().setLoading(true);
+    expect(useUserStore.getState().isLoading).toBe(true);
+
+    useUserStore.getState().setLoading(false);
+    expect(useUserStore.getState().isLoading).toBe(false);
+  });
+
+  it('should set and clear error', () => {
+    useUserStore.getState().setError('Test error');
+    expect(useUserStore.getState().error).toBe('Test error');
+
+    useUserStore.getState().clearError();
+    expect(useUserStore.getState().error).toBeNull();
+  });
+
+  it('should update current user when updating by id', () => {
+    const user: User = {
+      id: '1',
+      email: 'test@example.com',
+      name: 'Test User',
+      createdAt: new Date().toISOString(),
+    };
+
+    useUserStore.getState().setUser(user);
+    useUserStore.getState().addUser(user);
+    useUserStore.getState().updateUser('1', { name: 'Updated User' });
+
+    expect(useUserStore.getState().user?.name).toBe('Updated User');
+  });
+
+  it('should not update users that do not match the id', () => {
+    const user1: User = {
+      id: '1',
+      email: 'user1@example.com',
+      name: 'User One',
+      createdAt: new Date().toISOString(),
+    };
+    const user2: User = {
+      id: '2',
+      email: 'user2@example.com',
+      name: 'User Two',
+      createdAt: new Date().toISOString(),
+    };
+
+    useUserStore.getState().addUser(user1);
+    useUserStore.getState().addUser(user2);
+    useUserStore.getState().updateUser('2', { name: 'Updated User Two' });
+
+    const users = useUserStore.getState().users;
+    expect(users[0].name).toBe('User One'); // Not updated
+    expect(users[1].name).toBe('Updated User Two'); // Updated
+  });
+
+  it('should not clear current user when removing a different user', () => {
+    const currentUser: User = {
+      id: '1',
+      email: 'current@example.com',
+      name: 'Current User',
+      createdAt: new Date().toISOString(),
+    };
+    const otherUser: User = {
+      id: '2',
+      email: 'other@example.com',
+      name: 'Other User',
+      createdAt: new Date().toISOString(),
+    };
+
+    useUserStore.getState().setUser(currentUser);
+    useUserStore.getState().addUser(currentUser);
+    useUserStore.getState().addUser(otherUser);
+
+    // Remove the other user, not the current user
+    useUserStore.getState().removeUser('2');
+
+    // Current user should still be set
+    expect(useUserStore.getState().user).toEqual(currentUser);
+    expect(useUserStore.getState().users).toHaveLength(1);
+    expect(useUserStore.getState().users[0].id).toBe('1');
+  });
+
+  it('should clear current user when removing the current user', () => {
+    const user: User = {
+      id: '1',
+      email: 'test@example.com',
+      name: 'Test User',
+      createdAt: new Date().toISOString(),
+    };
+
+    useUserStore.getState().setUser(user);
+    useUserStore.getState().addUser(user);
+    useUserStore.getState().removeUser('1');
+
+    expect(useUserStore.getState().user).toBeNull();
+    expect(useUserStore.getState().users).toHaveLength(0);
+  });
+
+  it('should set users array', () => {
+    const users: User[] = [
+      { id: '1', email: 'user1@example.com', name: 'User 1', createdAt: new Date().toISOString() },
+      { id: '2', email: 'user2@example.com', name: 'User 2', createdAt: new Date().toISOString() },
+    ];
+
+    useUserStore.getState().setUsers(users);
+    expect(useUserStore.getState().users).toHaveLength(2);
+    expect(useUserStore.getState().users).toEqual(users);
+  });
+});

package/templates/apps/web/src/auth/auth0-provider.tsx

@@ -0,0 +1,103 @@
+import { createContext, useCallback, type ReactNode } from 'react';
+import { Auth0Provider as Auth0ProviderBase, useAuth0 } from '@auth0/auth0-react';
+import { auth0Config } from '../config/auth0-config';
+import type { AuthContextType, AuthUser } from '{{PACKAGE_SCOPE}}/common-types';
+
+export const AuthContext = createContext<AuthContextType | null>(null);
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * Internal component that uses Auth0 hooks (must be inside Auth0ProviderBase)
+ */
+function AuthContextProvider({ children }: AuthProviderProps) {
+  const {
+    user: auth0User,
+    isLoading,
+    isAuthenticated,
+    error: auth0Error,
+    loginWithRedirect,
+    logout,
+  } = useAuth0();
+
+  // Map Auth0 user to our AuthUser type
+  const user: AuthUser | null = auth0User
+    ? {
+        id: auth0User.sub || '',
+        email: auth0User.email || '',
+        emailVerified: auth0User.email_verified || false,
+      }
+    : null;
+
+  const error = auth0Error || null;
+
+  const signIn = useCallback(async (_email: string, _password: string) => {
+    // Auth0 uses redirect-based auth, email/password are handled by Auth0 login page
+    await loginWithRedirect();
+  }, [loginWithRedirect]);
+
+  const signUp = useCallback(async (_email: string, _password: string) => {
+    // Auth0 handles signup via the same redirect flow with screen_hint
+    await loginWithRedirect({
+      authorizationParams: {
+        screen_hint: 'signup',
+      },
+    });
+  }, [loginWithRedirect]);
+
+  const signOut = useCallback(async () => {
+    logout({
+      logoutParams: {
+        returnTo: window.location.origin,
+      },
+    });
+  }, [logout]);
+
+  const confirmSignUp = useCallback(async (_email: string, _code: string) => {
+    throw new Error('confirmSignUp is not supported with Auth0. Email verification is handled automatically by Auth0.');
+  }, []);
+
+  const forgotPassword = useCallback(async (_email: string) => {
+    throw new Error('forgotPassword is not supported with Auth0. Password reset is handled via the Auth0 Universal Login.');
+  }, []);
+
+  const confirmForgotPassword = useCallback(async (_email: string, _code: string, _newPassword: string) => {
+    throw new Error('confirmForgotPassword is not supported with Auth0. Password reset is handled via the Auth0 Universal Login.');
+  }, []);
+
+  const value: AuthContextType = {
+    user,
+    isLoading,
+    isAuthenticated,
+    error,
+    signIn,
+    signUp,
+    signOut,
+    confirmSignUp,
+    forgotPassword,
+    confirmForgotPassword,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+/**
+ * Auth0 authentication provider that wraps @auth0/auth0-react
+ * and adapts to our AuthContextType interface
+ */
+export function AuthProvider({ children }: AuthProviderProps) {
+  return (
+    <Auth0ProviderBase
+      domain={auth0Config.domain}
+      clientId={auth0Config.clientId}
+      authorizationParams={{
+        redirect_uri: auth0Config.redirectUri,
+        ...(auth0Config.audience && { audience: auth0Config.audience }),
+      }}
+    >
+      <AuthContextProvider>{children}</AuthContextProvider>
+    </Auth0ProviderBase>
+  );
+}

package/templates/apps/web/src/auth/cognito-provider.tsx

@@ -0,0 +1,143 @@
+import { createContext, useCallback, useEffect, useState, type ReactNode } from 'react';
+import {
+  signIn as amplifySignIn,
+  signUp as amplifySignUp,
+  signOut as amplifySignOut,
+  confirmSignUp as amplifyConfirmSignUp,
+  resetPassword,
+  confirmResetPassword,
+  getCurrentUser,
+  fetchAuthSession,
+} from 'aws-amplify/auth';
+import type { AuthContextType, AuthUser } from '{{PACKAGE_SCOPE}}/common-types';
+
+export const AuthContext = createContext<AuthContextType | null>(null);
+
+interface AuthProviderProps {
+  children: ReactNode;
+}
+
+export function AuthProvider({ children }: AuthProviderProps) {
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const isAuthenticated = user !== null;
+
+  // Check for existing session on mount
+  useEffect(() => {
+    checkAuthState();
+  }, []);
+
+  async function checkAuthState() {
+    try {
+      const currentUser = await getCurrentUser();
+      const session = await fetchAuthSession();
+
+      setUser({
+        id: currentUser.userId,
+        email: currentUser.signInDetails?.loginId || '',
+        emailVerified: true,
+        groups: session.tokens?.accessToken?.payload['cognito:groups'] as string[] | undefined,
+      });
+    } catch {
+      setUser(null);
+    } finally {
+      setIsLoading(false);
+    }
+  }
+
+  const signIn = useCallback(async (email: string, password: string) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      await amplifySignIn({ username: email, password });
+      await checkAuthState();
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Sign in failed'));
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const signUp = useCallback(async (email: string, password: string) => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      await amplifySignUp({
+        username: email,
+        password,
+        options: { userAttributes: { email } },
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Sign up failed'));
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const signOut = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      await amplifySignOut();
+      setUser(null);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Sign out failed'));
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const confirmSignUp = useCallback(async (email: string, code: string) => {
+    setIsLoading(true);
+    try {
+      await amplifyConfirmSignUp({ username: email, confirmationCode: code });
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Confirmation failed'));
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const forgotPassword = useCallback(async (email: string) => {
+    setIsLoading(true);
+    try {
+      await resetPassword({ username: email });
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Password reset failed'));
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const confirmForgotPassword = useCallback(async (email: string, code: string, newPassword: string) => {
+    setIsLoading(true);
+    try {
+      await confirmResetPassword({ username: email, confirmationCode: code, newPassword });
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Password reset confirmation failed'));
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const value: AuthContextType = {
+    user,
+    isLoading,
+    isAuthenticated,
+    error,
+    signIn,
+    signUp,
+    signOut,
+    confirmSignUp,
+    forgotPassword,
+    confirmForgotPassword,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}

package/templates/apps/web/src/auth/index.ts

@@ -0,0 +1,7 @@
+// {{#if AUTH_COGNITO}}
+export { AuthProvider, AuthContext } from './cognito-provider';
+// {{/if AUTH_COGNITO}}
+// {{#if AUTH_AUTH0}}
+export { AuthProvider, AuthContext } from './auth0-provider';
+// {{/if AUTH_AUTH0}}
+export { useAuth } from './use-auth';

package/templates/apps/web/src/auth/use-auth.ts

@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+// {{#if AUTH_COGNITO}}
+import { AuthContext } from './cognito-provider';
+// {{/if AUTH_COGNITO}}
+// {{#if AUTH_AUTH0}}
+import { AuthContext } from './auth0-provider';
+// {{/if AUTH_AUTH0}}
+import type { AuthContextType } from '{{PACKAGE_SCOPE}}/common-types';
+
+export function useAuth(): AuthContextType {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+}