vercel not set cookies | Next.js | Page 1

gray sandal Dec 19, 2023, 2:42 AM

#

When I log the first time with my vercel app, it sets cookies just fine (by using the values in the url params). But when i log out, it gets rid of them which is fine. But then when I try to log in again, vercel wont set the cookies. This works locally but not on production vercel

magic emberBOT Dec 19, 2023, 2:42 AM

#

Hi @gray sandal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the information provided in the extracts, there are several potential reasons why cookies might not be setting correctly in your Vercel deployment.

Middleware and Server Component Interaction: There are reported issues with cookies set in middleware not being available during the server component render pass, especially in Vercel deployments (source (https://github.com/vercel/next.js/issues/49442)). One user suggested a workaround by using output: 'standalone' in next.config.ts to ensure the middleware file is detected. Another user pointed out that middleware on Vercel might not run in the same process (or even server) as the RSC/API pass, which could affect the applySetCookie() function if it depends on patching the in-memory object.
Vercel Project Subdomain Limitations: If you're trying to set a cookie at the level of vercel.app from your project subdomain, it's not possible due to security reasons. Vercel.app is under the public suffix list to avoid supercookies (source (https://vercel.com/guides/can-i-set-a-cookie-from-my-vercel-project-subdomain-to-vercel-app)).
Response Headers Accessibility: There are reported issues with response headers not being accessible on API routes in Vercel (source (https://github.com/vercel/next.js/issues/40275)).
Cookie Handling in Server Actions: If cookies are mutated inside an Action, it's expected to re-render the app because there could be data that depends on cookies (source (https://github.com/vercel/next.js/issues/50163)).
Cookie Setting Limitations: There are reported issues with setting multiple cookies in API routes with Edge runtime (source (https://github.com/vercel/next.js/issues/38302)).

#

Client Cache Invalidation: There are reported issues with cookies().set() not invalidating the client cache (source (https://github.com/vercel/next.js/issues/53261)).

Remember that cookies are set by a combination of both the server and browser. The server sends a Set-Cookie header in its response, instructing the browser to save the cookie on the user's device. Once a cookie is stored, the browser includes it as the Cookie header for subsequent requests to the same domain or path (source (https://vercel.com/guides/understanding-cookies)).

If you're still facing issues, it might be helpful to provide more specific details about your implementation or consider opening an issue in the Next.js GitHub repository.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@gray sandal kapa.ai is still learning and improving, please let us know how it did by reacting below

gray sandal Dec 19, 2023, 2:47 AM

#

@magic ember i am setting cookies in middleware how can i fix it

magic emberBOT Dec 19, 2023, 2:47 AM

#

Let me check the knowledge base for you. One moment! :books:

#

Based on the information provided in the extracts, there are a few potential solutions and workarounds you can try to fix the issue of setting cookies in middleware:

Set a Header on the Request: One user found a solution by setting a header on the request as well as the cookie on the response, and then checking for both on the Server component (source (https://github.com/vercel/next.js/issues/44041)). Here's a snippet of their solution:
```
const vercelCookie =
    cookies().get("vercel-cookie")?.value || headers().get("vercel-cookie");
```
Use the applySetCookie() Function: Another user suggested using the applySetCookie() function to apply cookies to the request (source (https://github.com/vercel/next.js/issues/49442)). However, this might not work if middleware on Vercel doesn't run in the same process as the RSC/API pass.
Override the Cookie Header: You can override the Cookie header in middleware to make the cookies() function in Server Components reflect the newly-set cookies as expected (source (https://github.com/vercel/next.js/issues/49442)). Here's a snippet of the applySetCookie(req, res) function:
```
import { NextResponse, type NextRequest } from 'next/server';
import { ResponseCookies, RequestCookies } from 'next/dist/server/web/spec-extension/cookies';
```

Remember to test these solutions both locally and in your Vercel deployment to ensure they work in both environments. If you're still facing issues, consider opening an issue in the Next.js GitHub repository for more specific help.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@gray sandal kapa.ai is still learning and improving, please let us know how it did by reacting below

gray sandal Dec 19, 2023, 2:56 AM

#

@magic ember where ideally should I set cookies

magic emberBOT Dec 19, 2023, 2:56 AM

#

Let me check the knowledge base for you. One moment! :books:

#

In Next.js, you can set cookies in several places depending on your needs:

Server Actions: You can set cookies inside a Server Action using the cookies function. Here's an example from the Next.js documentation (https://nextjs.org/docs/app/building-your-application/data-fetching/forms-and-mutations):
```
'use server'

import { cookies } from 'next/headers'

export async function create() {
 const cart = await createCart()
 cookies().set('cartId', cart.id)
}
```

API Routes: You can set cookies inside an API Route using the setHeader method on the response. Here's an example from the Next.js documentation (https://nextjs.org/docs/pages/building-your-application/data-fetching/forms-and-mutations):

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
 req: NextApiRequest,
 res: NextApiResponse
) {
 res.setHeader('Set-Cookie', 'username=lee; Path=/; HttpOnly')
 res.status(200).send('Cookie has been set.')
}

Middleware: You can set cookies from Middleware using the cookies extension on NextRequest and NextResponse. Here's an example from the Next.js documentation (https://nextjs.org/docs/app/building-your-application/routing/middleware):

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

export function middleware(request: NextRequest) {
 const response = NextResponse.next()
 response.cookies.set('vercel', 'fast')
 response.cookies.set({
  name: 'vercel',
  value: 'fast',
  path: '/',
 })
 return response
}

#

Remember, HTTP does not allow setting cookies after streaming starts, so you must use `.set()` in a Server Action, Route Handler, or Middleware. You cannot set cookies from a page or layout directly.

#vercel not set cookies

If you're still facing issues, it might be helpful to provide more specific details about your implementation or consider opening an issue in the Next.js GitHub repository.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Remember to test these solutions both locally and in your Vercel deployment to ensure they work in both environments. If you're still facing issues, consider opening an issue in the Next.js GitHub repository for more specific help.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Remember, HTTP does not allow setting cookies after streaming starts, so you must use .set() in a Server Action, Route Handler, or Middleware. You cannot set cookies from a page or layout directly.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Remember, HTTP does not allow setting cookies after streaming starts, so you must use `.set()` in a Server Action, Route Handler, or Middleware. You cannot set cookies from a page or layout directly.