Protected Pages Structure
The (protected) directory contains all pages that require user authentication. These routes are only accessible after a successful login, ensuring that private or account-related data is never exposed to unauthenticated users.
Your folder structure should look like this:
app/
├── (protected)/ → Authenticated pages (require login)
Purpose of the (protected) Folder
The (protected) folder is reserved for pages that should only be visible to logged-in users.
These pages are typically part of your app’s dashboard, settings, or user management features.
Common examples include:
/dashboard/accountor/settings/billing/projectsor/workspace
Access to these routes should be guarded by your authentication middleware or layout logic.
Authentication Enforcement
These routes are protected using Firebase authentication provider.
In our Next.js App Router setup, authentication is enforced via layout and middleware inside the (protected) group.
Layout structure:
// app/(protected)/layout.tsx
export default async function ProtectedLayout({children}: ProtectedLayoutProps) {
const user = await getCurrentUser();
if (!user) return null;
return ...
}
This ensures that all pages inside (protected) automatically check authentication before rendering.
Recommended Structure and Naming
Organize your protected app features clearly under (protected):
app/(protected)/
├── dashboard/
├── billing/
├── projects/
├── settings/
└── layout.tsx ← handles authentication check
Each subfolder can have its own page.tsx, API calls, and components related to that section of your product.
Best Practices
- Keep all sensitive user data and account actions under
(protected)routes. - Avoid mixing public and protected content within the same route group.
- If you’re using SSR, ensure you handle authentication server-side for stronger security.
- Redirect unauthorized users to
/loginor/instead of showing partial content.
✅ Summary:
All routes within app/(protected)/ are restricted to authenticated users, providing a secure space for account dashboards, user data, billing pages, and internal tools.