Dashboard

Protected application pages where authenticated users interact with your product.

What This System Does

The dashboard system provides:

  • Automatic authentication checks for protected routes
  • User dashboard for viewing account information
  • Billing page for subscription management
  • Plans page for upgrading subscriptions
  • Foundation for building your product pages

Why It Exists

The dashboard is where users interact with your product after signing in. The protected route structure ensures only authenticated users can access these pages, and provides a foundation for building your custom features.

When You Need to Care About It

You'll work with the dashboard when:

  • Building your main product features
  • Adding new protected pages
  • Customizing the dashboard layout or styling
  • Creating feature-specific pages

Key Concepts

Protected Route Layout

All pages inside /app/(protected)/ automatically require authentication. The layout at /app/(protected)/layout.tsx calls requireAuth() and redirects unauthenticated users to /auth.

Route Groups

The (protected) folder is a Next.js route group. It doesn't affect the URL structure but groups routes that share the same layout and authentication logic.

Protected Routes

All authenticated pages live in /app/(protected)/:

/app/(protected)/layout.tsx

Auth check wrapper. All pages inside inherit this check.

/app/(protected)/dashboard/page.tsx

Main dashboard. This is where you build your product.

/app/(protected)/billing/page.tsx

Subscription management. Shows current plan, entitlements, and upgrade options.

/app/(protected)/plans/page.tsx

Plans selection page. Users can view and upgrade to different plans.

How Protection Works

typescript
// /app/(protected)/layout.tsx
export default async function ProtectedLayout({ children }) {
  await requireAuth(); // Redirects to /auth if not logged in
  return <div className="min-h-screen">{children}</div>;
}

Important Files

/app/(protected)/layout.tsx

Protected route layout. Calls requireAuth() for all child pages.

/app/(protected)/dashboard/page.tsx

Main dashboard page. Build your product features here.

/components/DashboardClient.tsx

Client component for dashboard. Handles interactive features.

Adding New Protected Pages

To add a new protected page:

  1. Create folder and page in /app/(protected)/:
    text
    /app/(protected)/your-feature/page.tsx
  2. The page automatically requires authentication:
    typescript
    import { requireAuth } from "@/lib/auth-utils";

export default async function YourFeaturePage() {
  const user = await requireAuth();
  return <div>Your feature for {user.email}</div>;
}

What You Can Customize

Dashboard Page

Located at /app/(protected)/dashboard/page.tsx. This is your main product page. Build your features here.

Dashboard Layout

Modify /app/(protected)/layout.tsx to change the shared layout for all protected pages (navigation, sidebar, etc.).

Add New Protected Pages

Create new folders in /app/(protected)/ for feature-specific pages. They automatically inherit authentication protection.

What NOT to Touch

requireAuth() in Layout

The requireAuth() call in the protected layout is critical. Don't remove it or pages won't be protected.

Billing Page Core Logic

The billing page at /app/(protected)/billing/page.tsx handles subscription management. Don't modify the core subscription logic.

Related Sections