N
Nuxt•3d ago
Byte

Two bundles for for guest and logged in users

I have a dashboard, there's an index page and a login page. The information on the index page is highly sensitive. When I look at the js bundle for my nuxt application it leaks information about api routes. These api routes naturally are protected however I'm wondering if there's some way to bundle the js in such a way that it's not delivered to the client until they log in
2 Replies
kapa.ai
kapa.ai•3d ago
Hi @Byte. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the provided knowledge sources, Nuxt uses file-based routing and automatic code splitting, which means that only the JavaScript required for the current route is loaded by default. Sensitive API routes defined in the server/api directory are not bundled into the client-side JavaScript—they are handled by the server (via Nitro) and are not exposed to the client, except for their endpoints being visible in the network tab if called from the client. For protecting sensitive pages (like your dashboard index), Nuxt recommends using both client-side and server-side authentication: - Client-side protection: Use route middleware (e.g., authenticated middleware) to redirect unauthenticated users away from protected pages. This ensures that the page and its associated JavaScript are not loaded unless the user is authenticated. 
  // app/middleware/authenticated.ts
  export default defineNuxtRouteMiddleware(() => {
    const { loggedIn } = useUserSession()
    if (!loggedIn.value) {
      return navigateTo('/login')
    }
  })
  
  // app/middleware/authenticated.ts
  export default defineNuxtRouteMiddleware(() => {
    const { loggedIn } = useUserSession()
    if (!loggedIn.value) {
      return navigateTo('/login')
    }
  })
Apply this middleware to your sensitive pages using definePageMeta: 
  <script setup lang="ts">
  definePageMeta({
    middleware: ['authenticated'],
  })
  </script>
  
  <script setup lang="ts">
  definePageMeta({
    middleware: ['authenticated'],
  })
  </script>
Protect App Routes - Server-side protection: Always protect your API routes on the server using utilities like requireUserSession, which ensures that only authenticated users can access sensitive data, regardless of what is visible in the client bundle. 
  // server/api/user/stats.get.ts
  export default defineEventHandler(async (event) => {
    const { user } = await requireUserSession(event)
    // ...fetch and return sensitive data
    return {}
  })
  
  // server/api/user/stats.get.ts
  export default defineEventHandler(async (event) => {
    const { user } = await requireUserSession(event)
    // ...fetch and return sensitive data
    return {}
  })
Protect API Routes About bundle splitting for guest vs. logged-in users:
Nuxt's default behavior is to only load the JavaScript for the current route, so code for authenticated pages (like your dashboard) is not sent to unauthenticated users unless they navigate to those routes. However, the route structure (e.g., the existence of certain pages or API endpoints) may still be discoverable in the client bundle, but the sensitive logic and data are not exposed. There is no mention in the knowledge sources of a built-in way to create entirely separate bundles for guest and authenticated users, nor a way to completely hide the existence of certain routes from the client bundle. The recommended approach is to rely on route-based code splitting and robust server-side protection for sensitive data and logic. If you need to further restrict what is included in the client bundle, you may need to explore advanced build customizations, but this is not covered in the official documentation or knowledge sources provided. Summary:
- Sensitive API logic is not exposed in the client bundle. - Use route middleware and server-side checks to protect sensitive pages and data. - Nuxt's code splitting ensures only necessary code is loaded per route, but route structure may still be visible. - There is no documented way to create completely separate bundles for guest and logged-in users in the official Nuxt docs. If you need more advanced bundle separation, the knowledge sources do not provide explicit guidance on this topic. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@224924542340956160> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?