chore(nuxt): Expose event.context.auth() as function

.changeset/chatty-loops-watch.md

@@ -0,0 +1,20 @@
+---
+'@clerk/nuxt': minor
+---
+
+Deprecate `event.context.auth` in favor of `event.context.auth()` as function
+
+```diff
+export default clerkMiddleware((event) => {
++ const { userId } = event.context.auth()
+- const { userId } = event.context.auth
+  const isAdminRoute = event.path.startsWith('/api/admin')
+
+  if (!userId && isAdminRoute) {
+    throw createError({
+      statusCode: 401,
+      statusMessage: 'Unauthorized: User not signed in',
+    })
+  }
+})
+```

integration/templates/nuxt-node/server/api/me.js

@@ -1,7 +1,7 @@
 import { clerkClient } from '@clerk/nuxt/server';
 
 export default eventHandler(async event => {
-  const { userId } = event.context.auth;
+  const { userId } = event.context.auth();
 
   if (!userId) {
     throw createError({

packages/nuxt/src/module.ts

@@ -26,7 +26,7 @@ export type ModuleOptions = Omit<LoadClerkJsScriptOptions, 'routerPush' | 'route
    * import { clerkMiddleware } from '@clerk/nuxt/server'
    *
    * export default clerkMiddleware((event) => {
-   *   console.log('auth', event.context.auth)
+   *   console.log('auth', event.context.auth())
    * })
    * ```
    */
@@ -99,14 +99,18 @@ export default defineNuxtModule<ModuleOptions>({
       });
     }
 
-    // Adds TS support for `event.context.auth` in event handlers
+    // Adds TS support for `event.context.auth()` in event handlers
     addTypeTemplate(
       {
         filename: 'types/clerk.d.ts',
         getContents: () => `import type { AuthObject } from '@clerk/backend';
           declare module 'h3' {
+            type AuthObjectHandler = AuthObject & {
+              (): AuthObject;
+            }
+
             interface H3EventContext {
-              auth: AuthObject;
+              auth: AuthObjectHandler;
             }
           }
         `,

packages/nuxt/src/runtime/server/__tests__/clerkMiddleware.test.ts

@@ -42,7 +42,7 @@ describe('clerkMiddleware(params)', () => {
     app.use(clerkMiddleware());
     app.use(
       '/',
-      eventHandler(event => event.context.auth),
+      eventHandler(event => event.context.auth()),
     );
     const response = await handler(new Request(new URL('/', 'http://localhost')));
 
@@ -56,7 +56,7 @@ describe('clerkMiddleware(params)', () => {
     app.use(clerkMiddleware(MOCK_OPTIONS));
     app.use(
       '/',
-      eventHandler(event => event.context.auth),
+      eventHandler(event => event.context.auth()),
     );
     const response = await handler(new Request(new URL('/', 'http://localhost')));
 
@@ -75,7 +75,7 @@ describe('clerkMiddleware(params)', () => {
     );
     app.use(
       '/',
-      eventHandler(event => event.context.auth),
+      eventHandler(event => event.context.auth()),
     );
     const response = await handler(new Request(new URL('/', 'http://localhost')));
 
@@ -94,7 +94,7 @@ describe('clerkMiddleware(params)', () => {
     );
     app.use(
       '/',
-      eventHandler(event => event.context.auth),
+      eventHandler(event => event.context.auth()),
     );
     const response = await handler(new Request(new URL('/', 'http://localhost')));
 

packages/nuxt/src/runtime/server/clerkMiddleware.ts

@@ -1,5 +1,6 @@
 import type { AuthenticateRequestOptions } from '@clerk/backend/internal';
 import { AuthStatus, constants } from '@clerk/backend/internal';
+import { deprecated } from '@clerk/shared/deprecated';
 import type { EventHandler } from 'h3';
 import { createError, eventHandler, setResponseHeader } from 'h3';
 
@@ -98,7 +99,17 @@ export const clerkMiddleware: ClerkMiddleware = (...args: unknown[]) => {
     }
 
     const authObject = requestState.toAuth();
-    event.context.auth = authObject;
+    const authHandler = () => authObject;
+
+    const auth = new Proxy(Object.assign(authHandler, authObject), {
+      get(target, prop: string, receiver) {
+        deprecated('event.context.auth', 'Use `event.context.auth()` as a function instead.');
+
+        return Reflect.get(target, prop, receiver);
+      },
+    });
+
+    event.context.auth = auth;
     // Internal serializable state that will be passed to the client
     event.context.__clerk_initial_state = createInitialState(authObject);
 

packages/nuxt/src/runtime/server/getAuth.ts

@@ -3,9 +3,11 @@ import type { H3Event } from 'h3';
 import { moduleRegistrationRequired } from './errors';
 
 export function getAuth(event: H3Event) {
-  if (!event.context.auth) {
+  const authObject = event.context.auth();
+
+  if (!authObject) {
     throw new Error(moduleRegistrationRequired);
   }
 
-  return event.context.auth;
+  return authObject;
 }