[ [0x50] Tutorials ] Protected Pages

Protected Pages

> Create pages that require authentication to access.

Overview

[ [0x50] STATUS ]

Middleware-based route protection with automatic redirects, role-based access control, and conditional UI rendering based on authentication state.

Features

[ [0x01] MIDDLEWARE ]

STATUS: READY

DESC: Automatic route protection.

[ [0x02] ROLE_BASED ]

STATUS: READY

DESC: USER, ADMIN, SUPER_ADMIN roles.

[ [0x03] SESSION_HOOK ]

STATUS: READY

DESC: Client-side auth state.

[ [0x04] CONDITIONAL_ ]

STATUS: READY

DESC: Show/hide based on auth.

Usage

[ [0x27] CREATING A PROTECTED PAGE ]

Create your page under a protected directory

1// src/app/(dashboard)/dashboard/my-feature/page.tsx
2
3import { auth } from "@/lib/auth";
4
5export default async function MyFeaturePage() {
6  const session = await auth();
7
8  // Session is guaranteed to exist (middleware handles redirect)
9  const user = session!.user;
10
11  return (
12    <div>
13      <h1>Welcome, {user.name}!</h1>
14      <p>Email: {user.email}</p>
15    </div>
16  );
17}

[ [0x25] ADDING NEW PROTECTED ROUTES ]

Update middleware to protect additional routes

1// src/middleware.ts
2
3// Find this section and add your routes:
4const isOnDashboard = pathnameWithoutLocale.startsWith('/dashboard');
5const isOnAdmin = pathnameWithoutLocale.startsWith('/admin');
6const isOnBilling = pathnameWithoutLocale.startsWith('/billing');
7const isOnSettings = pathnameWithoutLocale.startsWith('/settings');
8const isOnMyFeature = pathnameWithoutLocale.startsWith('/my-feature'); // Add this
9
10const isProtectedRoute = isOnDashboard || isOnAdmin || isOnBilling || isOnSettings || isOnMyFeature;

[ [0x5B] ROLE-BASED ACCESS CONTROL ]

Restrict pages by user role

1// src/app/(dashboard)/admin/page.tsx
2
3import { auth } from "@/lib/auth";
4import { redirect } from "next/navigation";
5
6export default async function AdminPage() {
7  const session = await auth();
8
9  // Check for admin role
10  if (session?.user?.role !== 'ADMIN' && session?.user?.role !== 'SUPER_ADMIN') {
11    redirect('/dashboard');
12  }
13
14  return (
15    <div>
16      <h1>Admin Dashboard</h1>
17      {/* Admin-only content */}
18    </div>
19  );
20}

[ [0x31] CLIENT COMPONENT PROTECTION ]

Use the session hook for client components

1"use client";
2
3import { useSession } from "next-auth/react";
4import { redirect } from "next/navigation";
5
6export function ProtectedClientComponent() {
7  const { data: session, status } = useSession();
8
9  if (status === "loading") {
10    return <div>Loading...</div>;
11  }
12
13  if (!session) {
14    redirect("/");
15  }
16
17  return (
18    <div>
19      <p>Welcome, {session.user?.name}!</p>
20    </div>
21  );
22}

[ [0x56] CONDITIONAL UI BASED ON AUTH ]

Show different content based on authentication state

1"use client";
2
3import { useSession } from "next-auth/react";
4import Link from "next/link";
5
6export function NavBar() {
7  const { data: session } = useSession();
8
9  return (
10    <nav>
11      <Link href="/">Home</Link>
12
13      {session ? (
14        <>
15          <Link href="/dashboard">Dashboard</Link>
16          <Link href="/profile">Profile</Link>
17        </>
18      ) : (
19        <>
20          <Link href="/auth/signin">Sign In</Link>
21          <Link href="/auth/signup">Sign Up</Link>
22        </>
23      )}
24    </nav>
25  );
26}

Auto-Protected Routes

[ [0x1C] PROTECTED ROUTES ]

Fabrk protects these routes via middleware. Unauthenticated users are automatically redirected to the home page:

├─ /dashboard/*

├─ /admin/*

├─ /billing/*

└─ /settings/*

Available Roles

[ [0x08] USER ROLES ]

├─ USER - Default role for all users

├─ ADMIN - Administrative access

└─ SUPER ADMIN - Full system access

Troubleshooting

[ [0xC0] COMMON ERRORS ]

[ERROR]: Infinite redirect loop

Solution: Check middleware.ts protected route configuration

// Ensure login page is NOT in protected routes
const isOnAuth = pathnameWithoutLocale.startsWith('/auth');

// Don't protect auth routes
if (isOnAuth) {
  return NextResponse.next();
}

[ERROR]: Page not redirecting to login

Solution: Verify auth() is imported and middleware is configured

// In your protected page
import { auth } from "@/lib/auth";

export default async function Page() {
  const session = await auth();
  if (!session) {
    redirect("/"); // Manual redirect if needed
  }
}

[ERROR]: Session is undefined in Server Component

Solution: Ensure page is Server Component (no "use client")

// Server Component (correct)
import { auth } from "@/lib/auth";

export default async function Page() {
  const session = await auth(); // Works
}

// Client Component (wrong for auth())
"use client";
import { auth } from "@/lib/auth"; // Error!
// Use useSession() hook instead

[ERROR]: User can access admin page without admin role

Solution: Add role check in page component

const session = await auth();

// Middleware only checks if logged in
// Page must check specific role
if (session?.user?.role !== 'ADMIN') {
  redirect('/dashboard');
}

Next Steps

[ [0x00] AUTHENTICATION ]

DESC: Learn the full auth system

[ [0x00] API ROUTES ]

DESC: Protect API endpoints

Usage

[ [0x27] CREATING A PROTECTED PAGE ]

Create your page under a protected directory

1// src/app/(dashboard)/dashboard/my-feature/page.tsx
2
3import { auth } from "@/lib/auth";
4
5export default async function MyFeaturePage() {
6  const session = await auth();
7
8  // Session is guaranteed to exist (middleware handles redirect)
9  const user = session!.user;
10
11  return (
12    <div>
13      <h1>Welcome, {user.name}!</h1>
14      <p>Email: {user.email}</p>
15    </div>
16  );
17}

[ [0x25] ADDING NEW PROTECTED ROUTES ]

Update middleware to protect additional routes

1// src/middleware.ts
2
3// Find this section and add your routes:
4const isOnDashboard = pathnameWithoutLocale.startsWith('/dashboard');
5const isOnAdmin = pathnameWithoutLocale.startsWith('/admin');
6const isOnBilling = pathnameWithoutLocale.startsWith('/billing');
7const isOnSettings = pathnameWithoutLocale.startsWith('/settings');
8const isOnMyFeature = pathnameWithoutLocale.startsWith('/my-feature'); // Add this
9
10const isProtectedRoute = isOnDashboard || isOnAdmin || isOnBilling || isOnSettings || isOnMyFeature;

[ [0x5B] ROLE-BASED ACCESS CONTROL ]

Restrict pages by user role

1// src/app/(dashboard)/admin/page.tsx
2
3import { auth } from "@/lib/auth";
4import { redirect } from "next/navigation";
5
6export default async function AdminPage() {
7  const session = await auth();
8
9  // Check for admin role
10  if (session?.user?.role !== 'ADMIN' && session?.user?.role !== 'SUPER_ADMIN') {
11    redirect('/dashboard');
12  }
13
14  return (
15    <div>
16      <h1>Admin Dashboard</h1>
17      {/* Admin-only content */}
18    </div>
19  );
20}

[ [0x31] CLIENT COMPONENT PROTECTION ]

Use the session hook for client components

1"use client";
2
3import { useSession } from "next-auth/react";
4import { redirect } from "next/navigation";
5
6export function ProtectedClientComponent() {
7  const { data: session, status } = useSession();
8
9  if (status === "loading") {
10    return <div>Loading...</div>;
11  }
12
13  if (!session) {
14    redirect("/");
15  }
16
17  return (
18    <div>
19      <p>Welcome, {session.user?.name}!</p>
20    </div>
21  );
22}

[ [0x56] CONDITIONAL UI BASED ON AUTH ]

Show different content based on authentication state

1"use client";
2
3import { useSession } from "next-auth/react";
4import Link from "next/link";
5
6export function NavBar() {
7  const { data: session } = useSession();
8
9  return (
10    <nav>
11      <Link href="/">Home</Link>
12
13      {session ? (
14        <>
15          <Link href="/dashboard">Dashboard</Link>
16          <Link href="/profile">Profile</Link>
17        </>
18      ) : (
19        <>
20          <Link href="/auth/signin">Sign In</Link>
21          <Link href="/auth/signup">Sign Up</Link>
22        </>
23      )}
24    </nav>
25  );
26}

Troubleshooting

[ [0xC0] COMMON ERRORS ]

[ERROR]: Infinite redirect loop

Solution: Check middleware.ts protected route configuration

// Ensure login page is NOT in protected routes
const isOnAuth = pathnameWithoutLocale.startsWith('/auth');

// Don't protect auth routes
if (isOnAuth) {
  return NextResponse.next();
}

[ERROR]: Page not redirecting to login

Solution: Verify auth() is imported and middleware is configured

// In your protected page
import { auth } from "@/lib/auth";

export default async function Page() {
  const session = await auth();
  if (!session) {
    redirect("/"); // Manual redirect if needed
  }
}

[ERROR]: Session is undefined in Server Component

Solution: Ensure page is Server Component (no "use client")

// Server Component (correct)
import { auth } from "@/lib/auth";

export default async function Page() {
  const session = await auth(); // Works
}

// Client Component (wrong for auth())
"use client";
import { auth } from "@/lib/auth"; // Error!
// Use useSession() hook instead

[ERROR]: User can access admin page without admin role

Solution: Add role check in page component

const session = await auth();

// Middleware only checks if logged in
// Page must check specific role
if (session?.user?.role !== 'ADMIN') {
  redirect('/dashboard');
}