|
Running: Here's the permalink to the Stack Trace on Vercel |
Replies: 10 comments 16 replies
|
hi @ztanner In our application, Example of condition and redirect in const isMember = false
if (!isMember) {
return NextResponse.redirect(new URL('/plans', request.url));
}
Hoping we can get a patch soon! |
|
@ztanner Thanks for the callout on Correct, as presumed the end goal is for the middleware to intercept any server action triggered on A practical use case for this flow could be the middleware intercepting an action and redirecting to the If there's another recommended NextJS approach to doing the equivalent would love any suggestions 🙏🏾 |
|
Hey @ehis -- I see, that makes sense! For the use-case you shared, some ideas/recommendations:
export const purchaseMe = async () => {
const isLoggedIn = await verifyAuth()
if (!isLoggedIn) {
redirect('/plans')
}
return {
foo: 'bar',
}
}
|
|
@ztanner I see! If we perform the hard auth check in our server actions could we then exclude them from the middleware? eg. export const config = {
matcher: [
/*
* Match all request paths except for the ones starting with:
* - api (API routes)
* - _next/static (static files)
* - _next/image (image optimization files)
* - favicon.ico (favicon file)
*/
{
source:
'/((?!api|_next/static|_next/image|media|fonts|favicon.ico|favicon.png).*)',
missing: [
// Exclude Server Actions
{ type: 'header', key: 'next-action' },
],
},
],
}; |
|
thanks so much @ztanner and really appreciate the response to the help discussion!! |
|
hey, I had a similar issue, and I could solve it by adding the missing field. However I don't really understand why excluding server actions does the trick, and even more, how is this line excluding server actions ? My use case was an auth process with jwt token and refresh token, that would redirect to login when the session was expired |
|
@Enzo-PVsyst Same in my case. middleware.ts const testAuth = await isAuthenticated();
console.log(testAuth, "in middleware");
if (testAuth) {
return NextResponse.next();
} else {
return NextResponse.redirect(new URL("/login", request.url));
}
}
// matcher config that excludes login and some other essentialslogin/page.tsx "use client";
import { useRouter } from "next/navigation";
import { makeAPICall } from "../utils";
export default function Home() {
const router = useRouter();
const handleSet = async (value: number) => {
await makeAPICall(value); // added this implementation at the end. (utils.ts)
// redirect("/v4") // commented because it's throwing NEXT_REDIRECT error.
router.replace("/v4");
};
return (
<main className="space-x-4">
<button onClick={async () => await handleSet(1)}>Set Cookie</button>
</main>
);
}v4/page.tsx "use client";
import { useRouter } from "next/navigation";
import { makeAPICall, onSubmit } from "../utils";
import clearCachesByServerAction from "@/customCacheClear";
export default function Home() {
const router = useRouter();
const handleSet = async (value: number) => {
await makeAPICall(value);
clearCachesByServerAction("/");
if (value == -1) {
router.replace("/login");
}
};
return (
<main className="space-x-4">
<button onClick={async () => await handleSet(-1)}>Logout</button>
<button onClick={async () => await handleSet(0)}>Get Cookie</button>
<button onClick={async () => await handleSet(1)}>Set Cookie</button>
<button onClick={async () => await handleSet(2)}>Refresh Cookie</button>
</main>
);
}utils.ts "use server"
export const isAuthenticated = async () => {
const value = await getCookie();
if (value) {
return true;
} else {
return false;
}
};
export const setCookie = async () => {
cookies().set("client", "settingCookie");
};
export const deleteCookie = async () => {
cookies().delete("client");
};
export const setNewCookie = async () => {
cookies().set("client", "settingNewCookie");
};
export const getCookie = async () => {
const value = cookies().get("client");
console.log(value?.value ?? "Not found!");
return value?.value;
};clearCacheByServerAction.ts "use server"
import { revalidatePath } from "next/cache"
const clearCachesByServerAction = async (path: any) => {
try {
if (path) {revalidatePath(path)}
else {
revalidatePath("/")
revalidatePath("/[lang]")
}
} catch (error) {
console.error("clearCachesByServerAction=> ", error)
}
}
export default clearCachesByServerActionUse case:When I click on logout, the cookies gets deleted, but still, apparently, in the middleware, the log shows The intended action was to navigate to Now my queries are: Apologies in advance if the queries seem to be silly, since I did not find any proper resource for handling the cookies from route.ts, middleware.ts etc. |
|
Hey @ztanner - so to confirm, are you saying that you can't use middleware for auth redirects when using server actions? It would be great if this was supported, or added to the middleware docs as a limitation as it can lead to bugs that are tricky to pin down! |
|
I came across to this problem as well, IMO, having the redirects at middleware level made more sense, instead of duplicating same logic in more than one place ( one at middle ware and others at each server action ). My dependencies: in the export function middleware(request: NextRequest) { } export const config = { |
|
We're in October now, and the docs are still not updated, it should clearly reflect this conflict between server actions and running auth in middleware. Would probably save other devs from running into this.. 🙏 Thanks to finding this closed thread we were able to solve a major headache in our auth flow. We disabled middleware for server actions by checking this condition in our conditional statement: And added explicit checks in each action instead. |
|
Thanks for this thread and the "work arrounds" I was pulling my hear on this one 😅 |
|
I solved redirection of server actions in middleware with setting the corresponding header: |
|
This worked for me. Thanks! |
|
For those using Zod validation with Server action, I updated this work around : const isAction = request.method === 'POST' && request.headers.has('Next-Action');
// since middleware cannot redirect server actions directly, the corresponding header gets set
if (!hasSession&& isAction) {
return ;
}Then you can safely show the errors like this : const response = await getUserWithEmail(userToLogin);
if (!response?.ok) {
return {
errors: {
...emptyLoginErrors,
email: ["No user could be found."],
},
};
}Hope this helps. |
|
There are almost nothing in document mentioned that middleware can't control server action directly. |
|
@axten has a great proposal. However, I've noticed that the redirect with this header doesn't occur immediately. This could be due to our different setups. In my setup, I return an empty response and everything works fine. Also, using Here's a revised code: This code changes the return URL to pathname and search, and cleans up any session cookies if necessary. |
|
Having related issue with middleware and server action
So, your client doesn't receive { success, errorMessage } — it gets a redirect response instead → resulting in undefined state and no redirect login. What makes it tricky. The request never reaches server actions so using middleware for auth pages during page naviation works to redirect the user to logn but not during server action. |
|
Yes. I believe this is serious
Kind Regards,
[image: image]
Kenna Taddese
Software Developer
Phone. +1 (530) 712-3425
Web. Babure.rf.gd
Address. Level 9, Abraham Street, WA 6029
[image: facebook] <http://www.facebook.com/> [image: twitter]
<http://www.twitter.com/> [image: linkedin] <http://www.instagram.com/> [image:
google-plus] ***@***.***/>
Get your own signature
<https://gimm.io/en_US/email-signature-generator?utm_source=sent-emails&utm_medium=email&utm_campaign=get-your-own-signature>
…On Sat, Jul 12, 2025, 8:46 PM gmoniava ***@***.***> wrote:
@ztanner <https://github.com/ztanner> Currently I have similar issue a
client component executes a server action, which triggers middleware,
inside it, since the user is not authenticated - redirect is called. Which
results in the server function call returning undefined on the client
component. Basically redirect does not work with server functions. So what
should we do in such cases? I have auth check inside the server function
but it never reaches it due to redirect (but neither redirect happens).
IMHO server function don't start with api.
—
Reply to this email directly, view it on GitHub
<#64993 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/A4EDG3G6V6J7QUG3VA4D7BL3IFCY7AVCNFSM6AAAAABGXNZMBKVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTGNZUGAYTCMQ>
.
You are receiving this because you commented.Message ID: <vercel/next.
***@***.***>
|
@ehis, yep, no need to handle in middleware! You can think of it similar to an API route where you'd have the auth check at the top of the request handler.