Protected Pages

Want to create pages that only logged-in users can see? PocketStarter makes this super easy! Let's discover how we can set up protected pages that require authentication.

How it works

PocketStarter uses a simple folder structure to separate public and protected pages:

• Public pages (like your homepage) - anyone can visit
• Protected pages (like user dashboards) - only logged-in users can access

When someone tries to visit a protected page without being logged in, they'll automatically be redirected to your login page.

Current setup

PocketStarter already has authentication protection built-in! Here's how it works:

Folder structure

• (auth)/auth/ - Authentication pages (login, signup, forgot password, etc.)
• (core)/ - Protected pages that require authentication (dashboard, account)
• (public)/ - Public pages anyone can access

Automatic Protection

The middleware (frontend/src/middleware.ts) automatically protects routes defined in frontend/src/routes.js:

/* Routes that need authentication */
export const PROTECTED_ROUTES = [
  '/dashboard',
  '/dashboard/*',
  '/account',
  '/account/*',
]

When someone tries to access these routes without being authenticated, they're automatically redirected to /auth/login.

User flow:

1. User visits protected page (e.g., /dashboard)
2. Middleware checks if user has valid authentication token
3. If not authenticated → Redirected to /auth/login
4. If authenticated → Page loads normally
5. After login → User is redirected back to the original page they tried to access

Creating new Protected Pages

1. Add Your Page to the (core) Folder

Create your protected page in the frontend/src/app/(core)/ directory.

2. Add the route to Protected Routes (Required)

You must add your new route to frontend/src/routes.js for it to be protected:

/** Routes that need authentication */
export const PROTECTED_ROUTES = [
  '/dashboard',
  '/dashboard/*',
  '/account',
  '/account/*',
  '/newpage', // Add your new route here
]

Important: The (core) folder is just for organization - it doesn't provide automatic protection. The middleware only protects routes that are explicitly listed in PROTECTED_ROUTES.

That's it! 🎉

Your new page at /settings will automatically be protected. When someone tries to visit it without being logged in, they'll be redirected to the login page.