How do I set a cookie and rewrite the url with middleware?

[lukevella]

Is there some way to set a cookie and rewrite the url with a single middleware function?

I have a page in my app that is protected. It requires a JWT to be present in the user's cookies. The cookie is set by middleware on that page when some particular query parameters are set. I would like the middleware to not only set the cookie but to also rewrite the url to remove the query parameters once the cookie is set. I can't seem to find any way to do this. Here's some code that hopefully illustrates what I'm trying to do.

// _middleware.ts
export function middleware(req: NextRequest) {
  const res = NextResponse.next();
  if (req.cookies["myCookie"] && validJwt(req.cookies["myCookie"])) {
      return res;
  }
  const token = req.url.searchParams.get("token");
  if (validToken(token)) {
      const myJwt = createJwt(token);
      res.cookie("myCookie", myJwt);
      // need to remove the "token" query parameter somehow
      return res;
  }  

  return NextResponse.redirect("/");  // send user somewhere else

[thibautsabot]

Hello.

Did you check out this example: https://github.com/vercel/examples/tree/main/edge-functions/query-params-filter ?

Basically, you remove the token form the searchParams and you redirect to the URL.

import { NextRequest, NextResponse } from 'next/server'

export function middleware(req: NextRequest) {
  const url = req.nextUrl
  let changed = false

  const token = url.searchParams.get("token");
  if (validToken(token)) {
    url.searchParams.delete('token')
    changed = true
  }

  // Avoid infinite loop by only redirecting if the query params were changed
  if (changed) {
    return NextResponse.redirect(url)
  } else {
    return NextResponse.redirect("/");  // send user somewhere else
  }
}

[thibautsabot]

Wouldn't

  if (changed) {
    return NextResponse.redirect(url).cookie("myCookie", myJwt);
  }

work?

[lukevella]

Oh wow thanks for opening my eyes to this. I think I understand better now how to use NextResponse. Much appreciated!

[EarthlingDavey]

FYI since the middleware upgrade for nextjs v12.2

You must do something like this. Use cookies.set method and slit the code across 3 lines.

const response = NextResponse.redirect(url)
response.cookies.set("myCookie", myJwt);
return response

[cameronthrntn]

Just tacking onto this as after implementing the cookie setting I was encountering the infinite loop no matter where I was validating my cookie, I added an extra else if clause to the changed check and that prevented the redirect loops:

  if (changed) {
    const response = NextResponse.redirect(url);
    response.cookies.set("key", key || "");
    return response;
  } else if (validateCookie(currentCookie?.value)) {
    return NextResponse.next();
  } else {
    return NextResponse.redirect(new URL("/auth", request.url));
  }

[asc33nzio]

2 years later and your comment is still a lifesaver. Cheers mate

[itse4elhaam]

Will the inbuilt next cookies not work here?

[Raggok]

This work for me:

const response = NextResponse.next();

response.cookies.set({ name: "slug", value: "fast3", path: "/" });

return NextResponse.rewrite(url, response);

[steve-marmalade]

This work for me:

const response = NextResponse.next();

response.cookies.set({ name: "slug", value: "fast3", path: "/" });

return NextResponse.rewrite(url, response);

I did not realize you could pass a response to NextResponse.rewrite, that's pretty interesting.