Add warning for CORS issue

README.md

@@ -156,6 +156,44 @@ In the above example the `/admin` page will require a user to be signed in, wher
 
 `unauthenticatedPaths` uses the same glob logic as the [Next.js matcher](https://nextjs.org/docs/pages/building-your-application/routing/middleware#matcher).
 
+### Middleware auth and server actions
+
+Using [server actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations) with middleware auth mode can result in unexpected CORS errors if you don't wrap your server action call in a `try/catch` block. This is because a call to a server action without an existing session will be intercepted by the middleware and a redirect to AuthKit will be attempted, triggering a CORS error.
+
+Wrapping your server action call in a `try/catch` block will allow you to either display an error or redirect the user:
+
+```jsx
+'use client';
+
+import { serverFunction } from '../../server-function';
+import { useRouter } from 'next/navigation';
+
+export default function TestPage() {
+  const router = useRouter();
+
+  const handleClick = async () => {
+    try {
+      const data = await serverFunction();
+
+      // Do something with data
+    } catch (e) {
+      // In the case of a CORS error, redirect user to login page
+      router.push('/login');
+    }
+  };
+
+  return (
+    <>
+      <button type="button" onClick={handleClick}>
+        Trigger server function
+      </button>
+    </>
+  );
+}
+```
+
+For handling errors from the server action itself, refer to the [Next.js documentation](https://nextjs.org/docs/app/building-your-application/routing/error-handling).
+
 ### Signing out
 
 Use the `signOut` method to sign out the current logged in user and redirect to your app's homepage. The homepage redirect is set in your WorkOS dashboard settings under "Redirect".

package.json

@@ -38,7 +38,7 @@
     "eslint": "^8.29.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-require-extensions": "^0.1.3",
-    "next": "^14.1.3",
+    "next": "^14.2.5",
     "typescript": "5.4.2",
     "typescript-eslint": "^7.2.0"
   },

src/session.ts

@@ -61,6 +61,18 @@ async function updateSession(request: NextRequest, debug: boolean, middlewareAut
   if (middlewareAuth.enabled && matchedPaths.length === 0 && !session) {
     if (debug) console.log('Unauthenticated user on protected route, redirecting to AuthKit');
 
+    const serverAction = request.headers.get('next-action');
+
+    // If the request is a server action, then we're likely to run afoul of CORS protections
+    // as the request might have come from the client as a server function.
+    // In that case we warn the user and continue, which will likely result in a CORS error.
+    if (serverAction !== null) {
+      if (debug)
+        console.warn(
+          `🚫 Server action detected without a valid session in middleware auth mode. Make sure you catch the CORS error and either redirect or handle the error gracefully. See the authkit-nextjs readme for more information: https://github.com/workos/authkit-nextjs`,
+        );
+    }
+
     return NextResponse.redirect(await getAuthorizationUrl({ returnPathname: getReturnPathname(request.url) }));
   }