sidebase/nuxt-auth Overrides Custom Middleware and Causes TypeScript Errors

[alirezatabi]

Environment

@sidebase/nuxt-auth 0.9.4 and 0.10.0
Nuxt 3.14.1592

Reproduction

no need reproduction

Describe the bug

I am experiencing a significant issue with the sidebase/nuxt-auth module in my Nuxt 3 project. After installing the module, all my custom middleware stopped working, and I started encountering TypeScript errors when defining middleware in definePageMeta.

Here’s a detailed breakdown of the problem:

1. When I define custom middleware (e.g., "authme") in definePageMeta:

definePageMeta({
  middleware: "authme",
});

I get the following TypeScript error:

Type '"authme"' is not assignable to type '"sidebase-auth" | NavigationGuard | ("sidebase-auth" | NavigationGuard)[] | undefined'.

2. Upon investigating, I found that the generated type definitions in .nuxt/types/middleware.d.ts look like this:

import type { NavigationGuard } from 'vue-router'
export type MiddlewareKey = "sidebase-auth"
declare module "../../node_modules/nuxt/dist/pages/runtime/composables" {
  interface PageMeta {
    middleware?: MiddlewareKey | NavigationGuard | Array<MiddlewareKey | NavigationGuard>
  }
}
declare module 'nitropack' {
  interface NitroRouteConfig {
    appMiddleware?: MiddlewareKey | MiddlewareKey[] | Record<MiddlewareKey, boolean>
  }
}

Additional context

Final Issue Summary:

The root cause of this issue is that the internal middleware system of sidebase/nuxt-auth overrides the default Nuxt middleware behavior. As a result:

1. It restricts the use of custom middleware in the middleware property of PageMeta.
2. It enforces only the use of sidebase-auth, making it impossible to use custom middleware alongside it.
3. This severely limits flexibility and causes unexpected runtime behavior, such as global middleware not triggering during route transitions.

Logs

No response

[phoenix-ru]

How did you actually define the named middleware in your application? The

definePageMeta({
  middleware: "authme",
});

example you shown is usage and not definition.

You have two ways of defining middleware in Nuxt:

• route middleware;
• server middleware;

Which of the two are you using?

[alirezatabi]

Thank you for your response! I am using Route Middleware in my application. The authme middleware is defined in the middleware directory as follows:

export default defineNuxtRouteMiddleware((to, from) => {
  const { status } = useAuth();

  if (status.value === "unauthenticated") {
    return navigateTo("/login");
  }
});

However, when I use this middleware in definePageMeta like this:

definePageMeta({
  middleware: "authme",
});

I encounter the following TypeScript error:

Type '"authme"' is not assignable to type '"sidebase-auth" | NavigationGuard | ("sidebase-auth" | NavigationGuard)[] | undefined'.

It seems that the type definition for middleware is restricted to "sidebase-auth", as shown in the generated .nuxt/types/middleware.d.ts:

export type MiddlewareKey = "sidebase-auth";

This restriction prevents me from using my custom middleware (authme). Is there a way to extend the MiddlewareKey type to include my custom middleware, or should I handle it differently?

How did you actually define the named middleware in your application? The

definePageMeta({
middleware: "authme",
});
example you shown is usage and not definition.

You have two ways of defining middleware in Nuxt:

• route middleware;
• server middleware;

Which of the two are you using?