N
Nuxt•5mo ago
Lars

Multi tenantcy

I'm building a multi-tenant Nuxt app and want to enforce domain-based access rules for routes. Here's the setup I'm aiming for: app.product.com: should only serve /login, /register, and /password-reset. *.product.com (e.g., customer-1.product.com): should serve all main app functionality, but not allow access to /login, /register, etc. Goals: Accessing tenant-only routes from app.product.com should return a 404. Accessing public auth routes (like /login) from a tenant subdomain should also return a 404. I'd like a clean and scalable way to implement this, ideally through Nuxt routing or middleware. I'm still early in the process and haven't started coding yet—just researching best practices. What's the best approach in Nuxt to enforce this kind of domain-based route restriction? Thanks!
2 Replies
kapa.ai
kapa.ai•5mo ago
Hi @Lars. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To implement domain-based route restrictions for multi-tenancy in Nuxt, you’ll want to leverage a combination of custom routing and middleware. Here’s how you can approach this, based on the available knowledge sources: 1. Custom Routing and Middleware Nuxt allows you to customize routing logic and add middleware to control access to routes. You can use middleware to inspect the incoming request’s domain (host) and the route being accessed, then decide whether to allow, redirect, or return a 404. - Middleware: You can create a global or route-specific middleware that checks the domain and the route. If the combination is not allowed (e.g., /login on a tenant subdomain, or /dashboard on app.product.com), you can return a 404 or redirect as needed. - Accessing the Host: Use the useRequestURL composable to access the incoming request’s URL and extract the host. This works both server-side and client-side. Note that if you use Nitro’s caching, you may need to configure cache.varies to ensure the correct host is available in cached responses for multi-tenant setups useRequestURL composable. 
  // middleware/domain-routes.ts
  export default defineNuxtRouteMiddleware(() => {
    const url = useRequestURL()
    const host = url.host
    const path = url.pathname
// Example logic:
    if (host === 'app.product.com') {
      // Only allow public auth routes
      if (!['/login', '/register', '/password-reset'].includes(path)) {
        return showError({ statusCode: 404, statusMessage: 'Not Found' })
      }
    } else if (host.endsWith('.product.com')) {
      // Only allow main app routes, block public auth routes
      if (['/login', '/register', '/password-reset'].includes(path)) {
        return showError({ statusCode: 404, statusMessage: 'Not Found' })
      }
    }
  })
  
  // middleware/domain-routes.ts
  export default defineNuxtRouteMiddleware(() => {
    const url = useRequestURL()
    const host = url.host
    const path = url.pathname
// Example logic:
    if (host === 'app.product.com') {
      // Only allow public auth routes
      if (!['/login', '/register', '/password-reset'].includes(path)) {
        return showError({ statusCode: 404, statusMessage: 'Not Found' })
      }
    } else if (host.endsWith('.product.com')) {
      // Only allow main app routes, block public auth routes
      if (['/login', '/register', '/password-reset'].includes(path)) {
        return showError({ statusCode: 404, statusMessage: 'Not Found' })
      }
    }
  })
- Registering Middleware: Place this middleware in your /middleware directory and register it globally or per route as needed Protect App Routes. 2. Scalability and Cleanliness - Centralized Logic: By using middleware, you keep your domain-based access logic centralized and easy to maintain. - Custom Routing: If you need even more control, you can use Nuxt’s custom routing features to programmatically add or remove routes based on the domain, but for most cases, middleware is sufficient and cleaner Custom Routing. 3. Multi-Tenant Caching Consideration If you use Nitro’s caching, ensure you set cache.varies to include the host header so that cached responses are correctly separated per tenant cache.varies docs. --- Summary:
Use a Nuxt route middleware to inspect the request’s host and path, and return a 404 for disallowed combinations. Use useRequestURL to access the host, and configure Nitro’s cache if needed for multi-tenant support. This approach is clean, scalable, and leverages Nuxt’s built-in features for routing and middleware. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•5mo ago
<@614440001027047434> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?