Next.js Discord

Discord Forum

Setting cookie from external backend

Answered
Barbary Lion posted this in #help-forum
Open in Discord
Barbary LionOP
Is setting cookies from external api not alowed in NextJS? I hve a backend in trpc that is in one monorepo with NextJS i want to register a user and for that I build register route in trpc backend and call it from server action, in this route i do res.setHeader( 'Set-Cookie', 'some cookie) and i have this cookie in my response headers but its not stored in application tab in cookies storage, also not in data tab in firefox, ive tried incognito and normal modes, then i created express server just to test if this would work and i do res.cookie("user", "johnDoe", {
secure: true,
sameSite: "none",
maxAge: 3600,
}); but this same scenario, I get the response header with the cookie information, and this cookie is not persisted in browser cookie storage. Can someone please tell me if im doing something incorrectly? Thanks
Answered by Ray
I think you need to setup cors on the backend like this
const express = require("express");
const cors = require("cors");

const app = express();
app.use(
  cors({
    origin: ["http://localhost:3000"],
    credentials: true,
  })
);

app.post("/set-cookie", (req, res) => {
  res.cookie("user", "johnDoe", {
    maxAge: 3600,
    path: "/",
  });
  res.end();
});

app.listen(5000);
View full answer

28 Replies

Barbary LionOP
Hi @Ray thanks for the response, ive tried without secure, i think i've tried most possible combinations πŸ™‚ nothing seems to be working, if i use cookies().set() from next headers it saves cookie in application tab i cookies storage, on the print screen out of there three cookie attempts only the last one persists cookie in application tab, i thought this may be because i do it in server action but if i remove use server it becomes client side because its used in client component and still it does not save any cookie (then i'm not able to use cookies() from next header), i also tried on click in submit button which is also a client component and there was no cookie stored
that's not gonna set cookies. you would need to set the cookies with the response from backend server on next side
Barbary LionOP
but if i make requests from the client it does not set the cookie either
i tried from here and it also did not work
i would like to have all the auth logic on the api side
@Barbary Lion i tried from here and it also did not work
Ray
do you see the Set-Cookies header in response?
Barbary LionOP
@Barbary Lion Click to see attachment
Ray
on backend, add your frontend domain
localhost:3000
Barbary LionOP
@Barbary Lion Click to see attachment
Ray
  res.cookie("user", "johnDoe", {
    sameSite: "none",
    maxAge: 3600,
    domain: 'localhost:3000'
  });
Barbary LionOP
on sec
ok one sec please
still this same
i mean no cookie in application tab
i've been trying to make this work for days πŸ™‚
im a frontend so i probablu don't know much but ive red tons of articles and docs and so on
@Barbary Lion i've been trying to make this work for days πŸ™‚
Ray
what backend are you using?
express?
@Barbary Lion i've been trying to make this work for days πŸ™‚
Ray
I think you need to setup cors on the backend like this
const express = require("express");
const cors = require("cors");

const app = express();
app.use(
  cors({
    origin: ["http://localhost:3000"],
    credentials: true,
  })
);

app.post("/set-cookie", (req, res) => {
  res.cookie("user", "johnDoe", {
    maxAge: 3600,
    path: "/",
  });
  res.end();
});

app.listen(5000);
Answer
Ray
then on client fetch like this
await fetch("http://localhost:5000/set-cookie", {
          method: "POST",
          credentials: "include",
        });
Barbary LionOP
yes this works thanks you! πŸ˜„ i'm using trpc as my backend, so i'm guessing i need to pass credentials include to my client, currently i'm using experimental_createTRPCNextAppDirClient because i thought i would be able to do revalidate by tag like in nextjs but i can't and i can't find option to augment fetch in experimental_nextHttpLink, i found this in the docs https://trpc.io/docs/client/cors, should i switch back to createTRPCClient with httpBatchLink if i have a completely separate package with trpc api? And thanks again thank you thank you thank you!!! πŸ˜„ you rock!
Barbary LionOP
i'll ask on their discord if that would be possible in the future, and again, thanks a million Ray!