Modern Authentication Pattern#

// src/hooks.server.ts
import jwt from 'jsonwebtoken';
import type { Handle } from '@sveltejs/kit';

export const handle: Handle = async ({ event, resolve }) => {
  const token = event.cookies.get('auth-token');
  
  if (token) {
    try {
      const user = jwt.verify(token, SECRET_KEY) as User;
      event.locals.user = user;
    } catch (err) {
      // Token is invalid, clear it
      event.cookies.delete('auth-token', { path: '/' });
    }
  }
  
  return resolve(event);
};

Protected Routes Implementation#

// src/routes/dashboard/+layout.server.ts
import { redirect } from '@sveltejs/kit';
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = async ({ locals }) => {
  if (!locals.user) {
    throw redirect(303, '/login');
  }
  
  return {
    user: locals.user
  };
};

OAuth Implementation Strategy#

// src/routes/auth/google/+page.server.ts
import { google } from 'googleapis';
import { redirect } from '@sveltejs/kit';

const oauth2Client = new google.auth.OAuth2(
  CLIENT_ID,
  CLIENT_SECRET,
  REDIRECT_URI
);

export const actions = {
  login: async () => {
    const authUrl = oauth2Client.generateAuthUrl({
      access_type: 'offline',
      scope: ['profile', 'email']
    });
    
    throw redirect(302, authUrl);
  }
};

Hybrid Routing Approach#

// src/lib/router.ts
import { page } from '$app/stores';
import { goto } from '$app/navigation';

export const routes = {
  home: '/',
  dashboard: '/dashboard',
  profile: '/profile/:userId',
  admin: {
    users: '/admin/users',
    settings: '/admin/settings'
  }
} as const;

export function navigate(route: string, params?: Record<string, string>) {
  let path = route;
  if (params) {
    Object.entries(params).forEach(([key, value]) => {
      path = path.replace(`:${key}`, value);
    });
  }
  goto(path);
}

Top UI Libraries for 2025#

1. Skeleton UI - Comprehensive component library with dark mode support
2. Svelte Material UI - Material Design components
3. Carbon Components Svelte - IBM’s Carbon Design System
4. Smelte - Material components with utility-first approach

Custom Component Architecture with Svelte 5 Runes#

<!-- src/lib/components/Button.svelte -->
<script lang="ts">
  let { 
    variant = 'primary',
    size = 'md',
    loading = false,
    disabled = false,
    onclick
  }: {
    variant?: 'primary' | 'secondary' | 'danger';
    size?: 'sm' | 'md' | 'lg';
    loading?: boolean;
    disabled?: boolean;
    onclick?: (event: MouseEvent) => void;
  } = $props();
  
  const classes = $derived([
    'btn',
    `btn-${variant}`,
    `btn-${size}`,
    loading && 'btn-loading',
    disabled && 'btn-disabled'
  ].filter(Boolean).join(' '));
</script>

<button class={classes} {disabled} {onclick}>
  {#if loading}
    <span class="spinner" />
  {/if}
  <slot />
</button>

<style>
  .btn {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200;
  }
  
  .btn-primary {
    @apply bg-blue-600 text-white hover:bg-blue-700;
  }
  
  .btn-loading {
    @apply opacity-50 cursor-not-allowed;
  }
</style>

Database Integration Pattern#

// src/lib/db/entities/User.ts
import { Entity, PrimaryGeneratedColumn, Column, CreateDateColumn } from 'typeorm';

@Entity()
export class User {
  @PrimaryGeneratedColumn()
  id: number;

  @Column({ unique: true })
  email: string;

  @Column()
  name: string;

  @CreateDateColumn()
  createdAt: Date;
}

// src/lib/db/connection.ts
import { DataSource } from 'typeorm';
import { User } from './entities/User.js';

export const AppDataSource = new DataSource({
  type: 'postgres',
  host: 'localhost',
  port: 5432,
  username: 'your_username',
  password: 'your_password',
  database: 'your_database',
  entities: [User],
  synchronize: true, // Only for development
  logging: true
});

When to Choose SvelteKit#

• Interactive Applications: Rich user interfaces with real-time updates
• Full-Stack Applications: When you need both frontend and backend in one framework
• Progressive Web Apps: Excellent PWA capabilities out of the box

When to Choose Astro#

• Content-Heavy Sites: Blogs, documentation, marketing sites
• Multi-Framework Support: When you need to use multiple UI frameworks
• Static Site Generation: Superior static site generation capabilities

Reactive State Migration#

Svelte 4 Pattern:

<script>
  let count = 0;
  let doubled;
  
  $: doubled = count * 2;
  
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  Count: {count}, Doubled: {doubled}
</button>

Svelte 5 Pattern:

<script>
  let count = $state(0);
  const doubled = $derived(count * 2);
  
  function increment() {
    count++;
  }
</script>

<button onclick={increment}>
  Count: {count}, Doubled: {doubled}
</button>

Component Props Migration#

Svelte 4 Pattern:

<script>
  export let name;
  export let age = 21;
  export let isActive = false;
</script>

Svelte 5 Pattern:

<script>
  let { name, age = 21, isActive = false } = $props();
</script>

Event Handling Evolution#

Svelte 4 Pattern:

<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  
  function handleSubmit() {
    dispatch('submit', { data: 'form data' });
  }
</script>

<button on:click|preventDefault={handleSubmit}>Submit</button>

Svelte 5 Pattern:

<script>
  let { onSubmit } = $props();
  
  function handleSubmit(event) {
    event.preventDefault();
    onSubmit?.({ data: 'form data' });
  }
</script>

<button onclick={handleSubmit}>Submit</button>

PWA Configuration#

// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite';
import { SvelteKitPWA } from '@vite-pwa/sveltekit';

export default {
  plugins: [
    sveltekit(),
    SvelteKitPWA({
      strategies: 'generateSW',
      registerType: 'autoUpdate',
      workbox: {
        globPatterns: ['**/*.{js,css,html,ico,png,svg,webp}'],
        runtimeCaching: [
          {
            urlPattern: /^https:\/\/api\.example\.com\/.*/i,
            handler: 'CacheFirst',
            options: {
              cacheName: 'api-cache',
              expiration: {
                maxEntries: 100,
                maxAgeSeconds: 60 * 60 * 24 // 24 hours
              }
            }
          }
        ]
      }
    })
  ]
};

Responsive Store Pattern with Svelte 5 Runes#

// src/lib/stores/responsive.ts
import { browser } from '$app/environment';

function createResponsiveStore() {
  let screenSize = $state('md');
  
  if (browser) {
    const mediaQueries = {
      sm: '(max-width: 640px)',
      md: '(min-width: 641px) and (max-width: 1024px)',
      lg: '(min-width: 1025px)'
    };
    
    const updateSize = () => {
      for (const [size, query] of Object.entries(mediaQueries)) {
        if (window.matchMedia(query).matches) {
          screenSize = size;
          break;
        }
      }
    };
    
    updateSize();
    window.addEventListener('resize', updateSize);
  }
  
  return {
    get current() {
      return screenSize;
    },
    get isMobile() {
      return screenSize === 'sm';
    },
    get isTablet() {
      return screenSize === 'md';
    },
    get isDesktop() {
      return screenSize === 'lg';
    }
  };
}

export const responsive = createResponsiveStore();

Using the Responsive Store in Components#

<script>
  import { responsive } from '$lib/stores/responsive.js';
  
  const mobileLayout = $derived(responsive.isMobile);
  const desktopLayout = $derived(responsive.isDesktop);
</script>

<div class="container">
  {#if mobileLayout}
    <MobileNavigation />
  {:else if desktopLayout}
    <DesktopNavigation />
  {/if}
</div>
  window.addEventListener('resize', updateSize);
  
  return () => window.removeEventListener('resize', updateSize);
});

Modern Form Pattern with Svelte 5 Runes#

<!-- src/routes/contact/+page.svelte -->
<script lang="ts">
  import { enhance } from '$app/forms';
  import { page } from '$app/stores';
  import { z } from 'zod';
  
  const schema = z.object({
    name: z.string().min(2, 'Name must be at least 2 characters'),
    email: z.string().email('Invalid email address'),
    message: z.string().min(10, 'Message must be at least 10 characters')
  });
  
  let loading = $state(false);
  let formData = $state({
    name: '',
    email: '',
    message: ''
  });
  
  const errors = $derived($page.form?.errors || {});
  const isValid = $derived(() => {
    try {
      schema.parse(formData);
      return true;
    } catch {
      return false;
    }
  });
  
  function validateField(field: string, value: string) {
    try {
      schema.shape[field].parse(value);
      return null;
    } catch (error) {
      return error.errors[0]?.message || 'Invalid field';
    }
  }
</script>

<form 
  method="POST" 
  use:enhance={() => {
    loading = true;
    return async ({ result, update }) => {
      loading = false;
      await update();
    };
  }}
>
  <div class="form-group">
    <label for="name">Name</label>
    <input 
      type="text" 
      id="name" 
      name="name" 
      bind:value={formData.name}
      class:error={errors.name}
      oninput={(e) => formData.name = e.target.value}
      required 
    />
    {#if errors.name}
      <span class="error-message">{errors.name}</span>
    {/if}
  </div>
  
  <div class="form-group">
    <label for="email">Email</label>
    <input 
      type="email" 
      id="email" 
      name="email" 
      bind:value={formData.email}
      class:error={errors.email}
      oninput={(e) => formData.email = e.target.value}
      required 
    />
    {#if errors.email}
      <span class="error-message">{errors.email}</span>
    {/if}
  </div>
  
  <button type="submit" disabled={loading || !isValid}>
    {loading ? 'Sending...' : 'Send Message'}
  </button>
</form>

Image Optimization Strategy with Svelte 5 Runes#

<!-- src/lib/components/OptimizedImage.svelte -->
<script lang="ts">
  let { 
    src, 
    alt, 
    width, 
    height, 
    lazy = true 
  }: {
    src: string;
    alt: string;
    width: number;
    height: number;
    lazy?: boolean;
  } = $props();
  
  const webpSrc = $derived(src.replace(/\.(jpg|jpeg|png)$/, '.webp'));
  const avifSrc = $derived(src.replace(/\.(jpg|jpeg|png)$/, '.avif'));
  
  let imageLoaded = $state(false);
  let imageError = $state(false);
  
  function handleLoad() {
    imageLoaded = true;
  }
  
  function handleError() {
    imageError = true;
  }
</script>

<picture>
  <source srcset={avifSrc} type="image/avif" />
  <source srcset={webpSrc} type="image/webp" />
  <img 
    {src} 
    {alt} 
    {width} 
    {height}
    loading={lazy ? 'lazy' : 'eager'}
    decoding="async"
    onload={handleLoad}
    onerror={handleError}
    class:loaded={imageLoaded}
    class:error={imageError}
  />
</picture>

<style>
  img {
    transition: opacity 0.3s ease;
    opacity: 0;
  }
  
  img.loaded {
    opacity: 1;
  }
  
  img.error {
    opacity: 0.5;
  }
</style>

Svelte 5 Performance Benefits#

The migration to Svelte 5 brings significant performance improvements:

• Smaller Bundle Size: Runes-based reactivity produces more efficient code
• Better Tree Shaking: Enhanced dead code elimination
• Improved Runtime Performance: More efficient reactivity system
• Better Memory Usage: Reduced memory footprint for reactive state

Gradual Migration Strategy#

// package.json - Enable Svelte 5 compatibility mode
{
  "devDependencies": {
    "svelte": "^5.0.0",
    "@sveltejs/kit": "^2.0.0"
  },
  "peerDependencies": {
    "svelte": "^5.0.0"
  }
}

Store Migration Pattern#

Before (Svelte 4):

// src/lib/stores/counter.js
import { writable } from 'svelte/store';

export const count = writable(0);

After (Svelte 5):

// src/lib/stores/counter.svelte.js
export const counter = (() => {
  let count = $state(0);
  
  return {
    get value() {
      return count;
    },
    increment() {
      count++;
    },
    decrement() {
      count--;
    },
    reset() {
      count = 0;
    }
  };
})();

Component Communication Evolution#

Svelte 4 - Event Dispatching:

<script>
  import { createEventDispatcher } from 'svelte';
  const dispatch = createEventDispatcher();
  
  function handleClick() {
    dispatch('customEvent', { data: 'value' });
  }
</script>

Svelte 5 - Callback Props:

<script>
  let { onCustomEvent } = $props();
  
  function handleClick() {
    onCustomEvent?.({ data: 'value' });
  }
</script>

Key Advantages of the Svelte 5 Era#

• 🚀 Enhanced Performance: Runes-based reactivity delivers smaller bundles and faster runtime performance
• 🔒 Better TypeScript Integration: Improved type safety with explicit props and state management
• 🎯 Predictable Reactivity: No more “magic” - explicit control over when and how state updates
• 🧪 Easier Testing: Runes make component logic more testable and debuggable
• 📱 Modern Development: Aligned with contemporary web development patterns and practices

The Road Ahead#

As SvelteKit and Svelte 5 continue to mature, we can expect:

• Enhanced Tooling: Better IDE support and debugging tools for runes
• Ecosystem Growth: More libraries and tools built with Svelte 5 patterns
• Performance Optimizations: Continued improvements to the runes runtime
• Developer Experience: Streamlined migration tools and better documentation

Whether you’re starting a new project or migrating an existing one, embracing Svelte 5’s rune system positions your application for optimal performance and maintainability in the modern web development landscape.

Ready to dive into Svelte 5? Check out the official migration guide and join the vibrant SvelteKit community discussions on dev.to, Discord, and GitHub. The future of reactive web development is here, and it’s more explicit, performant, and developer-friendly than ever before.