Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
alirezatabi opened this issue Jan 12, 2025 · 2 comments
Labels
question A question about NuxtAuth

Comments

@alirezatabi
Copy link

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'.
  1. 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

@alirezatabi alirezatabi added bug A bug that needs to be resolved pending An issue waiting for triage labels Jan 12, 2025
@phoenix-ru
Copy link
Collaborator

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:

Which of the two are you using?

@phoenix-ru phoenix-ru added question A question about NuxtAuth and removed bug A bug that needs to be resolved pending An issue waiting for triage labels Jan 16, 2025
@alirezatabi alirezatabi reopened this Jan 17, 2025
@alirezatabi
Copy link
Author

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:

Which of the two are you using?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question A question about NuxtAuth
Projects
None yet
Development

No branches or pull requests

2 participants