Impossible to set a cookie on route.ts

[NatigAgarzayev]

Link to the code that reproduces this issue

https://github.com/NatigAgarzayev/prizmaorm

To Reproduce

Hi, I use the newest versions:

I can't set cookie on route.ts

Path: app/api/user/signup/route.ts
Here is the code:

import { prisma } from '@/lib/prisma'
import type { NextRequest } from 'next/server'
import jwt from 'jsonwebtoken'
import { cookies } from 'next/headers'

export async function POST(request: NextRequest) {
    'use server'
    const { name, email, password } = await request.json()

    const res = await prisma.user.create({
        data: {
            name,
            email,
            password
        }
    })

    if (res) {
        const cookieStore = await cookies()
        const token = jwt.sign({ email }, process.env.SECRET_KEY!, {
            expiresIn: '1h'
        })
        console.log("token =", token);
        cookieStore.set('token', token, {
            httpOnly: true,
            secure: false,
            maxAge: 3600
        })
    }
    return Response.json(res)
}

However I did the same in a server component CookieSend.tsx and it works fine.

Current vs. Expected behavior

I expected the cookie to be set on the browser, but many attempts to solve were failed.
Litterally copied an example from the documentation and I think it doesn't work as well.

Provide environment information

"dependencies": {
    "@prisma/client": "^6.1.0",
    "bcrypt": "^5.1.1",
    "jsonwebtoken": "^9.0.2",
    "next": "15.1.2",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },

Which area(s) are affected? (Select all that apply)

Documentation, Parallel & Intercepting Routes

Which stage(s) are affected? (Select all that apply)

next dev (local), Other (Deployed)

Additional context

No response

[terrymun]

You need to include the Set-Cookie header in the response you're returning. Otherwise the client would not have received the cookie that you have created.

There's a code snippet in the docs that demonstrates this: https://nextjs.org/docs/app/building-your-application/routing/route-handlers#cookies

[NatigAgarzayev]

Unfortunatelly it didn't work for me. I posted the latest version of my code on github (link provided above).
Here is the same code block:

'use server'
import { prisma } from '@/lib/prisma'
import type { NextRequest } from 'next/server'
import jwt from 'jsonwebtoken'

export async function POST(request: NextRequest) {
    const { name, email, password } = await request.json()

    const res = await prisma.user.create({
        data: {
            name,
            email,
            password
        }
    })

    if (res) {
        const token = jwt.sign({ email }, process.env.SECRET_KEY!, {
            expiresIn: '1h'
        })

        return new Response(
            JSON.stringify(res),
            {
                headers: {
                    'Set-Cookie': `token=${token}; HttpOnly; SameSite=Strict`,
                },

            }
        )
    }
    else {
        return new Response(res)
    }
}

[dev-kraken]

Here’s the code for implemented user signup, which successfully sets a cookie:

'use server'
import { prisma } from '@/lib/prisma'
import { cookies } from 'next/headers'
import jwt from 'jsonwebtoken'

export async function POST(request: Request) {
  const { name, email, password } = await request.json()

  const user = await prisma.user.create({ data: { name, email, password } })

  if (user) {
    const token = jwt.sign({ email }, process.env.SECRET_KEY!, { expiresIn: '1h' })

    const cookieStore = await cookies()
    cookieStore.set('token', token, { httpOnly: true, path: '/' })

    return new Response(JSON.stringify(user), { status: 201 })
  } else {
    return new Response('User creation failed', { status: 500 })
  }
}

Key Points:

• Use cookies from next/headers to manage the cookie.
• The httpOnly attribute is set for security.
• The cookie path is set to '/' to ensure it’s accessible across the site.

[NatigAgarzayev]

Didn't work, unfortunatelly(

[dev-kraken]

Can you please add 'use client' in your singup/page.ts and removed "use server"

Here is your signup/pages.ts with changes code :

'use client';
import React, {useState} from 'react';

const SignUpPage: React.FC = () => {
    const [error, setError] = useState<string | null>(null);

    const handleSignUp = async (event: React.FormEvent<HTMLFormElement>): Promise<void> => {
        event.preventDefault();
        setError(null);
        const formData = new FormData(event.currentTarget);

        const name = formData.get('name') as string | null;
        const email = formData.get('email') as string | null;
        const password = formData.get('password') as string | null;

        if (!name || !email || !password) {
            setError('All fields are required.');
            return;
        }

        try {
            const response = await fetch('http://localhost:3000/api/user/signup', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({name, email, password}),
            });

            if (!response.ok) {
                throw new Error('Failed to sign up. Please try again.');
            }

            const data = await response.json();
            console.log(data);
            // Optionally handle successful signup (e.g., redirect or show a success message)
        } catch (err) {
            if (err instanceof Error) {
                setError(err.message);
            } else {
                setError('An unexpected error occurred.');
            }
        }
    };

    return (
        <div className='flex justify-center items-center h-screen bg-slate-200'>
            <form onSubmit={handleSignUp} className='flex flex-col gap-2 items-center text-slate-900'>
                <h1 className='text-2xl'>Sign Up</h1>
                {error && <p className='text-red-500'>{error}</p>}

                <label htmlFor="name">Name:</label>
                <input className='p-2 outline-none' type="text" name="name" id="name" required/>

                <label htmlFor="email">Email:</label>
                <input className='p-2 outline-none' type="email" name="email" id="email" required/>

                <label htmlFor="password">Password:</label>
                <input className='p-2 outline-none' type="password" name="password" id="password" required/>

                <button type="submit" className='p-2 border border-slate-900'>Sign Up</button>
            </form>
        </div>
    );
};

export default SignUpPage;

[Ikuzweshema]

Adding "use server" in A Route handler is not necessary because Route handler Already run on server. so adding "use server "
may be causing some unexpected behaviours.

//'use server' Removed  use server
import { prisma } from '@/lib/prisma'
import type { NextRequest } from 'next/server'
import jwt from 'jsonwebtoken'

export async function POST(request: NextRequest) {
    const { name, email, password } = await request.json()

    const res = await prisma.user.create({
        data: {
            name,
            email,
            password
        }
    })

    if (res) {
        const token = jwt.sign({ email }, process.env.SECRET_KEY!, {
            expiresIn: '1h'
        })

        return new Response(
            JSON.stringify(res),
            {
                headers: {
                    'Set-Cookie': `token=${token}; HttpOnly; SameSite=Strict`,
                },

            }
        )
    }
    else {
        return new Response(res)
    }
}

[NatigAgarzayev]

Didn't work as well(

[NatigAgarzayev]

I recorded a screen video and posted on YouTube.
https://youtu.be/vhlUj0Ggj1U

[NatigAgarzayev]

Maybe it will help you to identify my problem. Hope so.

[AnouarMc]

I tested your repo, and it works fine. You just need to remove 'use server' from the handleSignUp method and make the signup page a client component.

"use client";

import React from "react";

export default function page() {
  const handleSignUp = async (formData: FormData) => {
    const name = formData.get("name") as string;
    const email = formData.get("email") as string;
    const password = formData.get("password") as string;

    if (!name || !email || !password) {
      return;
    }

    const res = await fetch("http://localhost:3000/api/user/signup", {
      method: "POST",
      body: JSON.stringify({
        name,
        email,
        password,
      }),
    });

    console.log(res);
  };

  return (
    <div className="flex justify-center items-center h-screen bg-slate-200">
      <form
        action={handleSignUp}
        className="flex flex-col gap-2 items-center text-slate-900"
      >
        <h1 className="text-2xl">Sign up</h1>
        <label htmlFor="name">Name:</label>
        <input
          className="p-2 outline-none "
          type="text"
          name="name"
          id="name"
        />
        <label htmlFor="email">Email:</label>
        <input
          className="p-2 outline-none "
          type="email"
          name="email"
          id="email"
        />
        <label htmlFor="password">Password:</label>
        <input
          className="p-2 outline-none "
          type="password"
          name="password"
          id="password"
        />
        <button type="submit" className="p-2 border border-slate-900">
          Sign Up
        </button>
      </form>
    </div>
  );
}

[NatigAgarzayev]

Hi, I know that it works for client side, but what is the purpose of using server side then if 90%+ pages are client side? I have a server side component (CookieSend.tsx) and it works fine but it doesn't when it comes to server side page (signup/page.tsx).