@react-spa-scaffold/mcp 2.2.0 → 2.3.0

package/templates/e2e/tests/profile.auth.spec.ts

@@ -0,0 +1,103 @@
+import { expect, test } from '@playwright/test';
+
+import { ASYNC_CONTENT_TIMEOUT } from '../fixtures';
+
+// Check if auth credentials are configured
+const hasAuthCredentials = !!(
+  process.env.CLERK_SECRET_KEY &&
+  process.env.E2E_CLERK_USER_USERNAME &&
+  process.env.E2E_CLERK_USER_PASSWORD
+);
+
+/**
+ * Authenticated Profile Page E2E Tests
+ *
+ * These tests run with an authenticated user (from auth.setup.ts).
+ * They test the full profile CRUD flow with Supabase integration.
+ *
+ * Required environment variables:
+ * - E2E_CLERK_USER_USERNAME: Test user email
+ * - E2E_CLERK_USER_PASSWORD: Test user password
+ * - CLERK_SECRET_KEY: Clerk secret key for testing
+ *
+ * @see https://clerk.com/docs/testing/playwright
+ */
+test.describe('Authenticated Profile Tests', () => {
+  // Skip all tests if auth credentials aren't configured
+  test.skip(
+    !hasAuthCredentials,
+    'Auth credentials required (CLERK_SECRET_KEY, E2E_CLERK_USER_USERNAME, E2E_CLERK_USER_PASSWORD)',
+  );
+
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/profile');
+    // Wait for profile content to load (semantic selector instead of CSS class)
+    await expect(page.getByText('Full Name')).toBeVisible({ timeout: ASYNC_CONTENT_TIMEOUT });
+  });
+
+  test('displays profile card with user info', async ({ page }) => {
+    await expect(page.getByText('Your Profile')).toBeVisible();
+    await expect(page.getByText('Manage your profile information stored in Supabase')).toBeVisible();
+  });
+
+  test('shows user email in profile', async ({ page }) => {
+    const email = process.env.E2E_CLERK_USER_USERNAME;
+    if (email) {
+      await expect(page.getByText(email)).toBeVisible();
+    }
+  });
+
+  test('can enter edit mode for name', async ({ page }) => {
+    await page.getByRole('button', { name: /edit/i }).click();
+
+    // Input field should appear
+    await expect(page.getByRole('textbox')).toBeVisible();
+
+    // Save and Cancel buttons should be visible
+    await expect(page.getByRole('button', { name: /save/i })).toBeVisible();
+    await expect(page.getByRole('button', { name: /cancel/i })).toBeVisible();
+  });
+
+  test('can cancel edit without saving', async ({ page }) => {
+    // Enter edit mode
+    await page.getByRole('button', { name: /edit/i }).click();
+
+    // Type a new name
+    const input = page.getByRole('textbox');
+    await input.clear();
+    await input.fill('Temporary Name');
+
+    // Cancel
+    await page.getByRole('button', { name: /cancel/i }).click();
+
+    // Should exit edit mode (input gone, edit button back)
+    await expect(input).not.toBeVisible();
+    await expect(page.getByRole('button', { name: /edit/i })).toBeVisible();
+  });
+
+  test('can update profile name', async ({ page }) => {
+    // Enter edit mode
+    await page.getByRole('button', { name: /edit/i }).click();
+
+    // Generate unique name with timestamp
+    const newName = `E2E Test User ${Date.now()}`;
+
+    // Update name
+    const input = page.getByRole('textbox');
+    await input.clear();
+    await input.fill(newName);
+
+    // Save
+    await page.getByRole('button', { name: /save/i }).click();
+
+    // Wait for save to complete (exit edit mode)
+    await expect(page.getByRole('button', { name: /edit/i })).toBeVisible({ timeout: ASYNC_CONTENT_TIMEOUT });
+
+    // Verify name is displayed
+    await expect(page.getByText(newName)).toBeVisible();
+  });
+
+  test('Full Name label is present', async ({ page }) => {
+    await expect(page.getByText('Full Name')).toBeVisible();
+  });
+});

package/templates/e2e/tests/profile.spec.ts

@@ -0,0 +1,64 @@
+import { expect, test } from '@playwright/test';
+
+/**
+ * Profile Page E2E Tests
+ *
+ * Note: These tests require a valid Clerk configuration to run.
+ * Without VITE_CLERK_PUBLISHABLE_KEY, the app may show an error page.
+ *
+ * For authenticated testing, see @clerk/testing package documentation.
+ * @see https://clerk.com/docs/testing/playwright
+ */
+
+test.describe('Profile Page', () => {
+  test.beforeEach(async ({ page }) => {
+    // Check if the app loads (Clerk needs to be configured)
+    await page.goto('/');
+
+    // Wait for app to be ready (header should be visible if Clerk is configured)
+    const header = page.getByRole('banner');
+    const isAppReady = await header.isVisible({ timeout: 5000 }).catch(() => false);
+
+    if (!isAppReady) {
+      test.skip(true, 'App not ready - Clerk may not be configured');
+    }
+  });
+
+  test('protected route blocks unauthenticated access', async ({ page }) => {
+    await page.goto('/profile');
+
+    // Wait for Clerk to process the route
+    await page.waitForTimeout(3000);
+
+    // Profile content should NOT be visible without authentication
+    const profileCard = page.getByText('Your Profile');
+    const isVisible = await profileCard.isVisible().catch(() => false);
+
+    // Should either redirect or show sign-in UI, but NOT show profile
+    expect(isVisible).toBe(false);
+  });
+
+  test('profile link only visible when authenticated', async ({ page }) => {
+    await page.goto('/');
+
+    // Wait for Clerk to initialize
+    await page.waitForTimeout(2000);
+
+    // Check for Profile link/button in header
+    // This is wrapped in <SignedIn>, so it should only appear for authenticated users
+    const profileButton = page.getByRole('button', { name: /profile/i });
+    const profileLink = page.getByRole('link', { name: /profile/i });
+
+    const buttonVisible = await profileButton.isVisible().catch(() => false);
+    const linkVisible = await profileLink.isVisible().catch(() => false);
+
+    // Without authentication, neither should be visible
+    // (unless user happens to be authenticated, which is also valid)
+    expect(buttonVisible || linkVisible).toBe(false);
+  });
+});
+
+/**
+ * @see profile.auth.spec.ts for authenticated profile tests (edit, update, etc.)
+ * @see https://clerk.com/docs/testing/playwright
+ */

package/templates/e2e/tests/register-form.spec.ts

@@ -0,0 +1,38 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Registration Form', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/');
+  });
+
+  test('displays registration form with all fields', async ({ page }) => {
+    await expect(page.getByLabel(/username/i)).toBeVisible();
+    await expect(page.getByLabel(/email/i)).toBeVisible();
+    await expect(page.getByLabel('Password', { exact: true })).toBeVisible();
+    await expect(page.getByLabel(/confirm password/i)).toBeVisible();
+    await expect(page.getByRole('button', { name: /create account/i })).toBeVisible();
+  });
+
+  test('shows validation errors for empty submission', async ({ page }) => {
+    await page.getByRole('button', { name: /create account/i }).click();
+
+    await expect(page.getByText(/username must be at least/i)).toBeVisible();
+    await expect(page.getByText(/valid email address/i)).toBeVisible();
+    await expect(page.getByText(/password must be at least/i)).toBeVisible();
+  });
+
+  test('validates password requirements', async ({ page }) => {
+    await page.getByLabel('Password', { exact: true }).fill('weak');
+    await page.getByRole('button', { name: /create account/i }).click();
+
+    await expect(page.getByText(/password must be at least 8 characters/i)).toBeVisible();
+  });
+
+  test('validates password confirmation match', async ({ page }) => {
+    await page.getByLabel('Password', { exact: true }).fill('StrongPass1');
+    await page.getByLabel(/confirm password/i).fill('DifferentPass1');
+    await page.getByRole('button', { name: /create account/i }).click();
+
+    await expect(page.getByText(/passwords don't match/i)).toBeVisible();
+  });
+});

package/templates/gitignore

@@ -23,10 +23,15 @@ coverage/
 playwright-report/
 test-results/
 playwright/.cache/
+e2e/.clerk/*
+!e2e/.clerk/.gitkeep
 
 # i18n compiled catalogs (generated by Vite plugin during build)
 src/locales/*.mjs
 
+# Supabase
+supabase/.temp/
+
 # Misc
 tmp
 *.log

package/templates/package.json

@@ -46,6 +46,10 @@
     "e2e:perf": "PERF_TEST=true playwright test --project=performance",
     "e2e:perf:ui": "PERF_TEST=true playwright test --project=performance --ui",
     "i18n:extract": "lingui extract",
+    "db:types": "dotenv -- supabase gen types typescript --project-id $SUPABASE_PROJECT_ID > src/types/supabase.ts",
+    "db:push": "supabase db push",
+    "db:reset": "supabase db reset",
+    "db:studio": "supabase studio",
     "prepare": "husky",
     "mcp:build": "npm run build -w @react-spa-scaffold/mcp",
     "mcp:dev": "npm run dev -w @react-spa-scaffold/mcp",
@@ -64,6 +68,7 @@
     "@lingui/react": "^5.7.0",
     "@radix-ui/react-slot": "^1.2.3",
     "@sentry/react": "^10.32.1",
+    "@supabase/supabase-js": "^2.89.0",
     "@tanstack/react-query": "^5.90.14",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -84,6 +89,7 @@
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.2",
     "@changesets/cli": "^2.29.8",
+    "@clerk/testing": "^1.13.26",
     "@commitlint/config-conventional": "^20.2.0",
     "@eslint/js": "^9.28.0",
     "@lingui/babel-plugin-lingui-macro": "^5.7.0",
@@ -106,6 +112,7 @@
     "babel-plugin-macros": "^3.1.0",
     "chrome-launcher": "^1.2.1",
     "commitlint": "^20.2.0",
+    "dotenv-cli": "^11.0.0",
     "eslint": "^9.28.0",
     "eslint-config-prettier": "^10.1.0",
     "eslint-plugin-lingui": "^0.11.0",
@@ -119,6 +126,7 @@
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "shadcn": "^3.6.2",
+    "supabase": "^2.70.5",
     "tailwindcss": "^4.1.17",
     "typescript": "~5.9.0",
     "typescript-eslint": "^8.33.0",

package/templates/playwright.config.ts

@@ -1,5 +1,18 @@
 import { defineConfig, devices } from '@playwright/test';
 
+import { AUTH_STATE_FILE } from './e2e/fixtures';
+
+// CI performance tests use preview server (serves pre-built dist) for faster startup
+// Local dev uses dev server with VITE_PERF_TEST for hot reload
+const isPerfCI = process.env.PERF_CI === 'true';
+const baseURL = isPerfCI ? 'http://localhost:4173' : 'http://localhost:5173';
+
+function getWebServerCommand(): string {
+  if (isPerfCI) return 'npm run preview';
+  if (process.env.PERF_TEST) return 'VITE_PERF_TEST=true npm run dev';
+  return 'npm run dev';
+}
+
 export default defineConfig({
   testDir: './e2e',
   fullyParallel: true,
@@ -8,7 +21,7 @@ export default defineConfig({
   workers: process.env.CI ? 1 : undefined,
   reporter: process.env.CI ? 'github' : [['list'], ['html']],
   use: {
-    baseURL: 'http://localhost:5173',
+    baseURL,
     trace: 'on-first-retry',
     screenshot: 'only-on-failure',
   },
@@ -16,6 +29,12 @@ export default defineConfig({
     timeout: 10000,
   },
   projects: [
+    // Auth setup - runs first to create authenticated state
+    {
+      name: 'setup',
+      testDir: './e2e/auth',
+      testMatch: /.*\.setup\.ts/,
+    },
     {
       name: 'desktop',
       testDir: './e2e/tests',
@@ -26,6 +45,17 @@ export default defineConfig({
       testDir: './e2e/tests',
       use: { ...devices['Pixel 5'] },
     },
+    // Authenticated tests - depend on setup project
+    {
+      name: 'authenticated',
+      testDir: './e2e/tests',
+      testMatch: /.*\.auth\.spec\.ts/,
+      dependencies: ['setup'],
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: AUTH_STATE_FILE,
+      },
+    },
     {
       name: 'performance',
       testDir: './e2e/performance',
@@ -39,8 +69,8 @@ export default defineConfig({
     },
   ],
   webServer: {
-    command: process.env.PERF_TEST ? 'VITE_PERF_TEST=true npm run dev' : 'npm run dev',
-    url: 'http://localhost:5173',
+    command: getWebServerCommand(),
+    url: baseURL,
     reuseExistingServer: !process.env.CI,
     timeout: 120000,
   },

package/templates/src/App.tsx

@@ -3,7 +3,7 @@ import { lazy, Suspense } from 'react';
 import { Route, Routes } from 'react-router';
 
 import { Header } from '@/components/layout';
-import { SEO } from '@/components/shared';
+import { ProfileSync, ProtectedRoute, SEO } from '@/components/shared';
 import { PageLoading } from '@/components/ui/loading';
 import { SkipLink } from '@/components/ui/visually-hidden';
 import { useThemeEffect } from '@/hooks';
@@ -14,29 +14,42 @@ import { ROUTES } from '@/lib/routes';
 const HomePage = lazy(() => import('@/pages/Home').then((m) => ({ default: m.HomePage })));
 // eslint-disable-next-line lingui/no-unlocalized-strings
 const NotFoundPage = lazy(() => import('@/pages/NotFound').then((m) => ({ default: m.NotFoundPage })));
+// eslint-disable-next-line lingui/no-unlocalized-strings
+const ProfilePage = lazy(() => import('@/pages/Profile').then((m) => ({ default: m.ProfilePage })));
 
 export default function App() {
   const { t } = useLingui();
   useThemeEffect();
 
   return (
-    <div className="bg-background text-foreground min-h-screen">
-      <SEO
-        description={t({
-          message: 'A modern React 19 application with TypeScript and Vite',
-          comment: 'Default site-wide meta description for SEO',
-        })}
-      />
-      <SkipLink />
-      <Header />
-      <main id="main">
-        <Suspense fallback={<PageLoading />}>
-          <Routes>
-            <Route path={ROUTES.HOME} element={<HomePage />} />
-            <Route path={ROUTES.NOT_FOUND} element={<NotFoundPage />} />
-          </Routes>
-        </Suspense>
-      </main>
-    </div>
+    <>
+      <ProfileSync />
+      <div className="bg-background text-foreground min-h-screen">
+        <SEO
+          description={t({
+            message: 'A modern React 19 application with TypeScript and Vite',
+            comment: 'Default site-wide meta description for SEO',
+          })}
+        />
+        <SkipLink />
+        <Header />
+        <main id="main">
+          <Suspense fallback={<PageLoading />}>
+            <Routes>
+              <Route path={ROUTES.HOME} element={<HomePage />} />
+              <Route
+                path={ROUTES.PROFILE}
+                element={
+                  <ProtectedRoute>
+                    <ProfilePage />
+                  </ProtectedRoute>
+                }
+              />
+              <Route path={ROUTES.NOT_FOUND} element={<NotFoundPage />} />
+            </Routes>
+          </Suspense>
+        </main>
+      </div>
+    </>
   );
 }

package/templates/src/components/layout/Header.test.tsx

@@ -2,7 +2,7 @@ import { screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
 
 import { Header } from '@/components/layout/Header';
-import { render } from '@/test';
+import { render, setMockClerkSignedIn } from '@/test';
 
 describe('Header', () => {
   it('renders the app title', () => {
@@ -30,4 +30,20 @@ describe('Header', () => {
     const header = screen.getByRole('banner');
     expect(header).toBeInTheDocument();
   });
+
+  it('renders sign-in button when user is signed out', () => {
+    setMockClerkSignedIn(false);
+
+    render(<Header />);
+
+    expect(screen.getByTestId('sign-in-button')).toBeInTheDocument();
+  });
+
+  it('renders user button when user is signed in', () => {
+    setMockClerkSignedIn(true);
+
+    render(<Header />);
+
+    expect(screen.getByTestId('user-button')).toBeInTheDocument();
+  });
 });

package/templates/src/components/layout/Header.tsx

@@ -1,6 +1,10 @@
+import { SignedIn } from '@clerk/react-router';
 import { Trans } from '@lingui/react/macro';
+import { Link } from 'react-router';
 
 import { AccountButton, LanguageSwitcher, ThemeToggle } from '@/components/shared';
+import { Button } from '@/components/ui/button';
+import { ROUTES } from '@/lib/routes';
 
 export function Header() {
   return (
@@ -10,6 +14,13 @@ export function Header() {
           <Trans comment="Application name displayed in the header navigation">My App</Trans>
         </h1>
         <div className="flex items-center gap-2">
+          <SignedIn>
+            <Button variant="ghost" size="sm" asChild>
+              <Link to={ROUTES.PROFILE}>
+                <Trans comment="Profile navigation link in header">Profile</Trans>
+              </Link>
+            </Button>
+          </SignedIn>
           <LanguageSwitcher />
           <ThemeToggle />
           <AccountButton />

package/templates/src/components/shared/AccountButton/AccountButton.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import { describe, it, expect, beforeEach } from 'vitest';
 
-import { render, setMockSignedIn, setMockLoaded, resetClerkMocks } from '@/test';
+import { render, setMockClerkSignedIn, setMockClerkLoaded, resetClerkMocks } from '@/test';
 
 import { AccountButton } from './AccountButton';
 
@@ -11,7 +11,7 @@ describe('AccountButton', () => {
   });
 
   it('shows skeleton when not loaded', () => {
-    setMockLoaded(false);
+    setMockClerkLoaded(false);
     const { container } = render(<AccountButton />);
     expect(container.querySelector('.rounded-full')).toBeInTheDocument();
   });
@@ -22,7 +22,7 @@ describe('AccountButton', () => {
   });
 
   it('shows sign in button when signed out', () => {
-    setMockSignedIn(false);
+    setMockClerkSignedIn(false);
     render(<AccountButton />);
     expect(screen.getByTestId('sign-in-button')).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /sign in/i })).toBeInTheDocument();

package/templates/src/components/shared/ProfileSync/ProfileSync.test.tsx

@@ -0,0 +1,44 @@
+import { waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+import { render, setMockClerkSignedIn, resetClerkMocks } from '@/test';
+
+import { ProfileSync } from './ProfileSync';
+
+// Mock the hooks
+const mockMutate = vi.fn();
+vi.mock('@/hooks', async () => {
+  const actual = await vi.importActual('@/hooks');
+  return {
+    ...actual,
+    useCurrentProfile: vi.fn(() => ({ data: [], isLoading: false })),
+    useUpsertProfile: vi.fn(() => ({ mutate: mockMutate, isPending: false })),
+  };
+});
+
+describe('ProfileSync', () => {
+  beforeEach(() => {
+    resetClerkMocks();
+    mockMutate.mockClear();
+  });
+
+  it('renders nothing (invisible)', () => {
+    setMockClerkSignedIn(true);
+    const { container } = render(<ProfileSync />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('does not sync when signed out', async () => {
+    setMockClerkSignedIn(false);
+    render(<ProfileSync />);
+    await waitFor(() => expect(mockMutate).not.toHaveBeenCalled());
+  });
+
+  it('syncs profile when signed in', async () => {
+    setMockClerkSignedIn(true);
+    render(<ProfileSync />);
+    await waitFor(() => {
+      expect(mockMutate).toHaveBeenCalledWith(expect.objectContaining({ id: 'user_123' }), expect.any(Object));
+    });
+  });
+});

package/templates/src/components/shared/ProfileSync/ProfileSync.tsx

@@ -0,0 +1,104 @@
+/**
+ * ProfileSync - Invisible component that syncs Clerk user data to Supabase.
+ *
+ * This component ensures the authenticated user's profile exists in Supabase
+ * and stays in sync with their Clerk account data. It runs once per session
+ * and handles first-time profile creation automatically.
+ *
+ * @example
+ * ```tsx
+ * // Add to your app layout or protected routes
+ * function App() {
+ *   return (
+ *     <>
+ *       <ProfileSync />
+ *       <Routes>...</Routes>
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+
+import { useEffect, useRef } from 'react';
+import { useUser } from '@clerk/react-router';
+
+import { useCurrentProfile, useUpsertProfile } from '@/hooks';
+
+interface ProfileSyncProps {
+  /**
+   * Callback fired when profile sync completes successfully.
+   */
+  onSyncComplete?: () => void;
+  /**
+   * Callback fired when profile sync fails.
+   */
+  onSyncError?: (error: Error) => void;
+}
+
+/**
+ * Syncs the current Clerk user's data to Supabase profiles table.
+ *
+ * This component:
+ * 1. Waits for Clerk user to be loaded
+ * 2. Checks if a profile already exists
+ * 3. Creates or updates the profile if needed
+ * 4. Only syncs once per component mount to prevent loops
+ *
+ * The sync uses upsert, so it's safe to call multiple times - it will
+ * create the profile if it doesn't exist, or update if data changed.
+ */
+export function ProfileSync({ onSyncComplete, onSyncError }: ProfileSyncProps) {
+  const { user, isLoaded: isUserLoaded } = useUser();
+  const { data: profiles, isLoading: isProfileLoading } = useCurrentProfile();
+  const upsertProfile = useUpsertProfile();
+
+  // Track if we've already synced this session to prevent infinite loops
+  const hasSynced = useRef(false);
+  const isSyncing = useRef(false);
+
+  useEffect(() => {
+    // Skip if already synced, currently syncing, or data not ready
+    if (hasSynced.current || isSyncing.current) return;
+    if (!isUserLoaded || !user) return;
+    if (isProfileLoading) return;
+
+    const existingProfile = profiles?.[0];
+
+    // Check if sync is needed:
+    // - No profile exists, OR
+    // - Email has changed (user updated in Clerk)
+    const needsSync = !existingProfile || existingProfile.email !== user.primaryEmailAddress?.emailAddress;
+
+    if (!needsSync) {
+      hasSynced.current = true;
+      return;
+    }
+
+    // Perform the sync
+    isSyncing.current = true;
+
+    upsertProfile.mutate(
+      {
+        id: user.id,
+        email: user.primaryEmailAddress?.emailAddress ?? '',
+        full_name: user.fullName ?? null,
+        avatar_url: user.imageUrl ?? null,
+      },
+      {
+        onSuccess: () => {
+          hasSynced.current = true;
+          isSyncing.current = false;
+          onSyncComplete?.();
+        },
+        onError: (error) => {
+          isSyncing.current = false;
+          // Don't set hasSynced so it can retry on next render
+          onSyncError?.(new Error(error.message));
+        },
+      },
+    );
+  }, [isUserLoaded, user, profiles, isProfileLoading, upsertProfile, onSyncComplete, onSyncError]);
+
+  // This component renders nothing - it's purely for side effects
+  return null;
+}

package/templates/src/components/shared/ProfileSync/index.ts

@@ -0,0 +1 @@
+export { ProfileSync } from './ProfileSync';

package/templates/src/components/shared/ProtectedRoute/ProtectedRoute.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from '@testing-library/react';
 import { describe, it, expect, beforeEach } from 'vitest';
 
-import { render, setMockSignedIn, setMockLoaded, resetClerkMocks } from '@/test';
+import { render, setMockClerkSignedIn, setMockClerkLoaded, resetClerkMocks } from '@/test';
 
 import { ProtectedRoute } from './ProtectedRoute';
 
@@ -20,7 +20,7 @@ describe('ProtectedRoute', () => {
   });
 
   it('shows loading when auth is not loaded', () => {
-    setMockLoaded(false);
+    setMockClerkLoaded(false);
     const { container } = render(
       <ProtectedRoute>
         <div>Protected Content</div>
@@ -31,7 +31,7 @@ describe('ProtectedRoute', () => {
   });
 
   it('redirects when not signed in', () => {
-    setMockSignedIn(false);
+    setMockClerkSignedIn(false);
     render(
       <ProtectedRoute>
         <div>Protected Content</div>

package/templates/src/components/shared/index.ts

@@ -1,6 +1,7 @@
 export { AccountButton } from './AccountButton';
 export { ErrorBoundary } from './ErrorBoundary';
 export { LanguageSwitcher } from './LanguageSwitcher';
+export { ProfileSync } from './ProfileSync';
 export { ProtectedRoute } from './ProtectedRoute';
 export { RegisterForm } from './RegisterForm';
 export { SEO } from './SEO';