feat(#1046): add automatic middleware

Author: phoenix-ru

src/build/autoAddMiddleware.ts

@@ -0,0 +1,35 @@
+// Minimal interface to facilitate unit-testing
+export interface NuxtPage {
+  meta?: Record<string, unknown>
+  children?: NuxtPage[]
+}
+
+/**
+ * Adds `middleware: ['sidebase-auth']` to pages which use `definePageMeta({ auth: true })` or `definePageMeta({ auth: {} })`.
+ * @see https://nuxt.com/docs/4.x/guide/directory-structure/app/middleware#setting-middleware-at-build-time
+ */
+export function autoAddMiddleware(pages: NuxtPage[], middlewareName: string) {
+  for (const page of pages) {
+    if (page.meta !== undefined && (page.meta.auth === true || typeof page.meta.auth === 'object')) {
+      const previousMiddleware: unknown = page.meta.middleware
+      let normalizedMiddleware: unknown[]
+
+      if (previousMiddleware === undefined) {
+        normalizedMiddleware = []
+      } else if (Array.isArray(previousMiddleware)) {
+        normalizedMiddleware = previousMiddleware
+      } else {
+        normalizedMiddleware = [previousMiddleware]
+      }
+
+      if (!normalizedMiddleware.includes(middlewareName)) {
+        normalizedMiddleware.push(middlewareName)
+        page.meta.middleware = normalizedMiddleware
+      }
+    }
+
+    if (page.children) {
+      autoAddMiddleware(page.children, middlewareName)
+    }
+  }
+}

src/module.ts

@@ -22,6 +22,7 @@ import type {
   RefreshHandler,
   SupportedAuthProviders
 } from './runtime/types'
+import { autoAddMiddleware } from './build/autoAddMiddleware'
 
 const topLevelDefaults = {
   isEnabled: true,
@@ -99,6 +100,7 @@ const defaultsByBackend: {
 }
 
 const PACKAGE_NAME = 'sidebase-auth'
+const MIDDLEWARE_NAME = PACKAGE_NAME
 
 export default defineNuxtModule<ModuleOptions>({
   meta: {
@@ -218,7 +220,6 @@ export default defineNuxtModule<ModuleOptions>({
     })
 
     // 5.2. Create refresh handler
-    // const generatedRefreshHandlerPath = resolve('./runtime/refreshHandler.ts')
     const generatedRefreshHandlerPath = addTemplate({
       filename: './refreshHandler.ts',
       async getContents() {
@@ -241,10 +242,15 @@ export default defineNuxtModule<ModuleOptions>({
 
     // 6. Register middleware for autocomplete in definePageMeta
     addRouteMiddleware({
-      name: 'sidebase-auth',
+      name: MIDDLEWARE_NAME,
       path: resolve('./runtime/middleware/sidebase-auth')
     })
 
+    // 6.5. Automatically add the middleware when `definePageMeta({ auth: true })` usage is detected
+    if (!options.globalAppMiddleware || !options.globalAppMiddleware.isEnabled) {
+      nuxt.hook('pages:extend', (pages) => autoAddMiddleware(pages, MIDDLEWARE_NAME))
+    }
+
     // 7. Add plugin for initial load
     addPlugin(resolve('./runtime/plugin'))
 

tests/autoAddMiddleware.spec.ts

@@ -0,0 +1,128 @@
+import { describe, it, expect } from 'vitest'
+import { autoAddMiddleware, type NuxtPage } from '../src/build/autoAddMiddleware'
+
+const MIDDLEWARE_NAME = 'sidebase-auth'
+
+describe('setMiddleware', () => {
+  it('adds middleware if meta.auth is true', () => {
+    testMiddleware({ meta: { auth: true } }, [MIDDLEWARE_NAME])
+  })
+
+  it('adds middleware if meta.auth is object', () => {
+    testMiddleware({ meta: { auth: {} } }, [MIDDLEWARE_NAME])
+    testMiddleware({ meta: { auth: { navigateUnauthenticatedTo: '/' } } }, [MIDDLEWARE_NAME])
+  })
+
+  it('ignores pages without meta.auth', () => {
+    testMiddleware({}, undefined)
+    testMiddleware({ meta: {} }, undefined)
+    testMiddleware({ meta: { foo: 'bar' } }, undefined)
+    testMiddleware({ meta: { auth2: 'foo' } }, undefined)
+    testMiddleware({ meta: { middleware: 'foo' } }, 'foo')
+    testMiddleware({ meta: { middleware: ['foo'] } }, ['foo'])
+    const middlewareFunction = () => {}
+    testMiddleware({ meta: { middleware: middlewareFunction } }, middlewareFunction)
+  })
+
+  it('does not add when meta.auth is false', () => {
+    testMiddleware({ meta: { auth: false } }, undefined)
+  })
+
+  it('does not add when middleware is already present', () => {
+    testMiddleware(
+      { meta: { auth: true, middleware: MIDDLEWARE_NAME } },
+      MIDDLEWARE_NAME
+    )
+    testMiddleware(
+      { meta: { auth: true, middleware: [MIDDLEWARE_NAME] } },
+      [MIDDLEWARE_NAME]
+    )
+    testMiddleware(
+      { meta: { auth: true, middleware: ['foo', MIDDLEWARE_NAME, 'bar'] } },
+      ['foo', MIDDLEWARE_NAME, 'bar']
+    )
+    testMiddleware(
+      { meta: { middleware: MIDDLEWARE_NAME } },
+      MIDDLEWARE_NAME
+    )
+    testMiddleware(
+      { meta: { middleware: [MIDDLEWARE_NAME] } },
+      [MIDDLEWARE_NAME]
+    )
+    testMiddleware(
+      { meta: { middleware: ['foo', MIDDLEWARE_NAME, 'bar'] } },
+      ['foo', MIDDLEWARE_NAME, 'bar']
+    )
+  })
+
+  it('adds to an existing array', () => {
+    testMiddleware(
+      { meta: { auth: true, middleware: [] } },
+      [MIDDLEWARE_NAME]
+    )
+    testMiddleware(
+      { meta: { auth: true, middleware: ['foo'] } },
+      ['foo', MIDDLEWARE_NAME]
+    )
+  })
+
+  it('wraps string middleware into array', () => {
+    testMiddleware(
+      { meta: { auth: true, middleware: 'foo' } },
+      ['foo', MIDDLEWARE_NAME]
+    )
+  })
+
+  it('overrides undefined', () => {
+    testMiddleware(
+      { meta: { auth: true, middleware: undefined } },
+      [MIDDLEWARE_NAME]
+    )
+  })
+
+  it('wraps other middleware options into array', () => {
+    const functionMiddleware = () => {}
+    testMiddleware(
+      { meta: { auth: true, middleware: functionMiddleware } },
+      [functionMiddleware, MIDDLEWARE_NAME]
+    )
+  })
+
+  it('handles multiple pages', () => {
+    const pages: NuxtPage[] = [
+      { meta: { auth: true } },
+      { meta: { auth: true, middleware: 'foo' } }
+    ]
+
+    autoAddMiddleware(pages, MIDDLEWARE_NAME)
+
+    expect(pages[0].meta?.middleware).toEqual([MIDDLEWARE_NAME])
+    expect(pages[1].meta?.middleware).toEqual(['foo', MIDDLEWARE_NAME])
+  })
+
+  it('handles nested children', () => {
+    const pages: NuxtPage[] = [
+      {
+        meta: {},
+        children: [
+          { meta: { auth: true } }
+        ]
+      }
+    ]
+
+    autoAddMiddleware(pages, MIDDLEWARE_NAME)
+
+    expect(pages[0].meta?.middleware).toBeUndefined()
+    expect(pages[0].children?.[0].meta?.middleware).toEqual([MIDDLEWARE_NAME])
+  })
+})
+
+/**
+ * Helper: test a single-page scenario
+ */
+function testMiddleware(page: NuxtPage, expected: unknown) {
+  const pages: NuxtPage[] = [page]
+  autoAddMiddleware(pages, MIDDLEWARE_NAME)
+  expect(pages[0].meta?.middleware).toEqual(expected)
+}
+