Protected Routes

Uitleg — Hoe werkt het?

Er zijn twee manieren om pagina's te beveiligen in Next.js:

Methode	Hoe	Wanneer
Middleware	Controleert bij elk verzoek vóór de pagina laadt	Aanbevolen — beschermt meerdere routes tegelijk
Server Component check	`auth()` aanroepen in de pagina zelf	Voor extra logica per pagina

💡 Gebruik beide samen

Middleware blokkeert niet-ingelogde gebruikers voordat de pagina laadt. De check in Server Components gebruik je voor extra logica, zoals de gebruiker tonen wie er ingelogd is.

Stap 1 — Maak proxy.js aan

Maak een nieuw bestand proxy.js aan in de root van je project (naast auth.js):

workout-tracker/
├── app/
├── auth.js
├── proxy.js   ← nieuw bestand (in de root!)
└── ...

// proxy.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  const sessionToken =
    request.cookies.get('authjs.session-token') ||
    request.cookies.get('__Secure-authjs.session-token');

  if (!sessionToken) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/workouts/:path*'],
};

Wat doet dit?

Controleert of er een NextAuth sessie-cookie aanwezig is
Geen cookie → doorsturen naar /login
Wel cookie → pagina laden
/workouts/:path* — beschermt /workouts, /workouts/123, etc.

💡 Waarom niet auth importeren?

Middleware draait op de Edge Runtime — een lichtgewicht omgeving zonder Node.js modules. auth.js gebruikt Mongoose (database), wat niet werkt op Edge. Deze aanpak checkt alleen de cookie en heeft geen database nodig.

Wat gebeurt er als iemand niet ingelogd is?

De middleware stuurt de gebruiker automatisch door naar /login.

Meerdere routes beschermen

Je kunt de matcher uitbreiden met extra routes:

export const config = {
  matcher: [
    '/workouts/:path*',
    '/dashboard/:path*',
    '/profiel',
  ],
};

✅ Test het

Log uit en probeer direct naar http://localhost:3000/workouts te gaan. Je wordt nu automatisch doorgestuurd naar /login.

Stap 2 — Gebruik de sessie in een Server Component

Voeg een sessie-check toe aan app/workouts/page.js om de ingelogde gebruiker te tonen:

// app/workouts/page.js
import { auth } from '../../auth';
import { redirect } from 'next/navigation';

export default async function WorkoutsPage() {
  const session = await auth();

  if (!session) {
    redirect('/login'); // Niet ingelogd → doorsturen
  }

  // Ingelogd: session.user bevat name, email, id
  return (
    <main>
      <h1>Welkom, {session.user.name}!</h1>
      {/* rest van de pagina */}
    </main>
  );
}

💡 session.user

Het session.user object bevat de gegevens die je hebt teruggegeven in de authorize functie in auth.js:

session.user.name   // "Jan de Vries"
session.user.email  // "jan@voorbeeld.nl"
session.user.id     // MongoDB _id als string

Uitleg — Sessie opvragen in een Client Component

In een Client Component gebruik je de useSession hook. Dit heb je nodig voor de Navbar in de volgende stap:

// app/components/UserInfo.js
'use client';

import { useSession } from 'next-auth/react';

export default function UserInfo() {
  const { data: session, status } = useSession();

  if (status === 'loading') return <p>Laden...</p>;
  if (!session) return null;

  return (
    <p>Ingelogd als <strong>{session.user.name}</strong></p>
  );
}

useSession statussen

loading — sessie wordt opgehaald
authenticated — ingelogd, session.user beschikbaar
unauthenticated — niet ingelogd

Stap 3 — Maak een Navbar aan en voeg toe aan layout

Maak een nieuw bestand app/components/Navbar.js aan. Dit toont andere links afhankelijk van of iemand ingelogd is:

// app/components/Navbar.js
'use client';

import Link from 'next/link';
import { useSession, signOut } from 'next-auth/react';

export default function Navbar() {
  const { data: session, status } = useSession();

  // Wacht tot de sessie geladen is — anders zie je een lege navbar
  if (status === 'loading') {
    return (
      <nav style={{ display: 'flex', gap: '16px', padding: '12px 24px', background: 'white', borderBottom: '1px solid #e5e7eb' }}>
        <Link href="/"><strong>Workout Tracker</strong></Link>
      </nav>
    );
  }

  return (
    <nav style={{ display: 'flex', gap: '16px', padding: '12px 24px', background: 'white', borderBottom: '1px solid #e5e7eb' }}>
      <Link href="/"><strong>Workout Tracker</strong></Link>

      {session ? (
        // Ingelogd
        <>
          <Link href="/workouts">Workouts</Link>
          <button onClick={() => signOut({ callbackUrl: '/login' })}>
            Uitloggen
          </button>
        </>
      ) : (
        // Niet ingelogd
        <>
          <Link href="/login">Inloggen</Link>
          <Link href="/register">Registreren</Link>
        </>
      )}
    </nav>
  );
}

⚠️ Zonder loading check zie je niets

Als je de status === 'loading' check weglaat, rendert de navbar terwijl de sessie nog niet bekend is. Dit geeft een hydration mismatch waardoor de navbar niet zichtbaar is. Gebruik altijd de status check.

Vervang daarna de inhoud van app/layout.js om de Navbar te gebruiken:

// app/layout.js
import './globals.css';
import AuthProvider from './components/AuthProvider';
import Navbar from './components/Navbar';

export const metadata = {
  title: 'Workout Tracker',
  description: 'Bijhouden van je workouts',
};

export default function RootLayout({ children }) {
  return (
    <html lang="nl">
      <body>
        <AuthProvider>
          <Navbar />
          <main>{children}</main>
        </AuthProvider>
      </body>
    </html>
  );
}

✅ Wat je nu hebt

Niet ingelogd → navigatie toont "Inloggen" en "Registreren"
Ingelogd → navigatie toont naam, "Workouts" en "Uitloggen"
Direct naar /workouts gaan zonder sessie → redirect naar /login

Checklist

✅ Check of je hebt:

middleware.js aangemaakt in de root
/workouts staat in de matcher
Uitgelogd en geprobeerd naar /workouts te gaan → redirect naar /login
Navbar.js component aangemaakt
Navigatie toont de juiste links afhankelijk van de sessie
Naam van de ingelogde gebruiker zichtbaar in de navigatie

🎉 Volledige auth flow werkt:

Registreren via /register
Inloggen via /login
Workouts beheren via /workouts (alleen ingelogd)
Uitloggen via de navigatieknop

Volgende Stap

Authenticatie is compleet! Zet je app live op Vercel.

Styling →

Maak je Workout Tracker mooi met Tailwind CSS