Om een veilig en gebruiksvriendelijk authenticatieproces voor je Svelte-app te creëren, kun je de volgende aanpak volgen: 1. Backend-omgeving opzetten: - Kies een server-side technologie (bijvoorbeeld Node.js met Express, of een andere backend) om authenticatie en autorisatie te beheren. - Gebruik een veilige database (zoals PostgreSQL of MongoDB) om gebruikersgegevens op te slaan. 2. Registratieproces: - Maak een registratieformulier in Svelte met velden zoals gebruikersnaam, e-mail en wachtwoord. - Valideer invoer zowel client-side als server-side. - Hash wachtwoorden met een sterke algoritme zoals bcrypt voordat je ze opslaat. - Na succesvolle registratie, stel gebruikersstatus in op 'geverifieerd' (indien nodig). 3. Inloggen: - Maak een inlogformulier waarin gebruikers e-mail/gebruikersnaam en wachtwoord invoeren. - Verzend deze gegevens naar de backend voor verificatie. - Bij succesvolle verificatie, genereer een JWT (JSON Web Token) met de juiste claims, inclusief gebruikersrol ('beheerder'). - Verstuur de JWT terug naar de client en sla deze op in bijvoorbeeld HTTP-only cookies of localStorage (bij voorkeur cookies voor meer veiligheid). 4. JWT-authenticatie: - Gebruik bibliotheken zoals: - For backend: jsonwebtoken (Node.js) voor het genereren en valideren van tokens. - Voor Svelte: geen specifieke bibliotheek nodig voor JWT, maar je kunt bijvoorbeeld svelte-routing gebruiken voor routebescherming. - Beveilig routes door JWT te valideren via middleware die de token controleert en de gebruikerstoegang controleert. - Voeg de JWT toe aan Authorization-header bij API-aanroepen: `Authorization: Bearer <token>`. 5. Wachtwoordherstel: - Maak een formulier voor wachtwoordherstel met invoer van e-mail. - Verstuur een e-mail met een veilige, eenmalige link (bijvoorbeeld met een token dat een korte geldigheid heeft). - De link leidt naar een wachtwoordwijzigingspagina, waar de gebruiker een nieuw wachtwoord kan invoeren. - Bij wijziging, hash het nieuwe wachtwoord en update de database. 6. Gebruikersrollen en permissies: - Voeg in de JWT een claim toe voor de rol ('beheerder', 'gebruiker', etc.). - Implementeer routebescherming op basis van rol: - Bijvoorbeeld, alleen gebruikers met rol 'beheerder' kunnen bepaalde beheerderspagina’s benaderen. - Controleer rolgegevens op server-side voordat je toegang verleent tot gevoelige acties. 7. Extra beveiligingstips: - Gebruik HTTPS voor alle communicatie. - Beperk aantal loginpogingen om brute-force aanvallen te voorkomen. - Implementeer CSRF-bescherming indien je cookies gebruikt. - Zorg dat JWT’s een korte geldigheid hebben en refresh tokens worden gebruikt voor langdurige sessies. Door deze stappen te volgen, creëer je een veilige en gebruiksvriendelijke authenticatie-ervaring, met goede beveiligingsmaatregelen en duidelijke rolgebaseerde toegangscontrole.

Hier is een stapsgewijze handleiding voor het implementeren van een veilig authenticatiesysteem in je Svelte-app: ## Aanbevolen Bibliotheken - **@auth0/sveltekit** (of SvelteKit native sessiebeheer) - **jsonwebtoken** voor JWT - **bcryptjs** voor wachtwoordhashing - **@sveltejs/adapter-node** voor productie ## 1. Projectopzet ```bash npm create svelte@latest mijn-app cd mijn-app npm install @auth0/sveltekit jsonwebtoken bcryptjs cookie ``` ## 2. Backend API (SvelteKit endpoints) ### `/src/routes/api/register/+server.js` ```javascript import { json } from '@sveltejs/kit'; import bcrypt from 'bcryptjs'; import jwt from 'jsonwebtoken'; export async function POST({ request }) { const { email, password, naam } = await request.json(); // Validatie if (!email || !password) { return json({ error: 'Email en wachtwoord zijn verplicht' }, { status: 400 }); } // Wachtwoord hashen const hashedWachtwoord = await bcrypt.hash(password, 12); // Gebruiker opslaan in database const gebruiker = { id: generateId(), email, wachtwoord: hashedWachtwoord, naam, rol: 'gebruiker' // standaard rol }; // JWT token genereren const token = jwt.sign( { userId: gebruiker.id, email: gebruiker.email, rol: gebruiker.rol }, process.env.JWT_SECRET, { expiresIn: '24h' } ); return json({ token, gebruiker: { id: gebruiker.id, email, naam, rol: gebruiker.rol } }); } ``` ## 3. Inloggen ### `/src/routes/api/login/+server.js` ```javascript import { json } from '@sveltejs/kit'; import bcrypt from 'bcryptjs'; import jwt from 'jsonwebtoken'; export async function POST({ request }) { const { email, password } = await request.json(); // Gebruiker ophalen uit database const gebruiker = await findUserByEmail(email); if (!gebruiker || !(await bcrypt.compare(password, gebruiker.wachtwoord))) { return json({ error: 'Ongeldige inloggegevens' }, { status: 401 }); } const token = jwt.sign( { userId: gebruiker.id, email: gebruiker.email, rol: gebruiker.rol }, process.env.JWT_SECRET, { expiresIn: '24h' } ); return json({ token, gebruiker: { id: gebruiker.id, email: gebruiker.email, naam: gebruiker.naam, rol: gebruiker.rol } }); } ``` ## 4. Wachtwoordherstel ### `/src/routes/api/wachtwoord-vergeten/+server.js` ```javascript export async function POST({ request }) { const { email } = await request.json(); // Reset token genereren const resetToken = jwt.sign({ email }, process.env.JWT_SECRET, { expiresIn: '1h' }); // Reset link email versturen const resetLink = `${url.origin}/wachtwoord-resetten?token=${resetToken}`; // Email implementatie (gebruik bijvoorbeeld Nodemailer) await sendPasswordResetEmail(email, resetLink); return json({ message: 'Reset link verzonden' }); } ``` ## 5. Beheerder Rollen & Permissies ### Middleware voor autorisatie ```javascript // /src/hooks.server.js import { redirect } from '@sveltejs/kit'; export async function handle({ event, resolve }) { const token = event.cookies.get('token'); if (token) { try { const decoded = jwt.verify(token, process.env.JWT_SECRET); event.locals.gebruiker = decoded; } catch (error) { event.cookies.delete('token'); } } // Route bescherming if (event.url.pathname.startsWith('/admin')) { if (!event.locals.gebruiker || event.locals.gebruiker.rol !== 'beheerder') { throw redirect(302, '/toegang-geweigerd'); } } return resolve(event); } ``` ## 6. Frontend Implementatie ### Authenticatie store ```javascript // /src/stores/auth.js import { writable } from 'svelte/store'; export const gebruiker = writable(null); export const isAuthenticated = writable(false); export async function login(email, wachtwoord) { const response = await fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email, wachtwoord }) }); if (response.ok) { const data = await response.json(); gebruiker.set(data.gebruiker); isAuthenticated.set(true); // Token opslaan in cookie document.cookie = `token=${data.token}; path=/; secure; samesite=strict`; return true; } return false; } ``` ## 7. Beveiligingsmaatregelen - **Environment variables** voor JWT secret en database credentials - **HTTPS** verplicht in productie - **Rate limiting** voor inlogpogingen - **CSRF protection** - **Wachtwoordsterkte validatie** - **Session timeout** ## 8. Gebruikersvriendelijke Features - Loading states tijdens authenticatie - Duidelijke foutmeldingen - Automatische redirect na inloggen - "Remember me" functionaliteit - Responsive design voor alle devices Deze implementatie biedt een solide basis voor een veilig en gebruiksvriendelijk authenticatiesysteem met ondersteuning voor beheerderrollen in je Svelte-applicatie.