Http only cookies with app router
Unanswered
Dan posted this in #help-forum
![Avatar](https://cdn.discordapp.com/avatars/78572020324896768/7f9f028485d3792952280577c676fed0.webp?size=256)
DanOP
I am using an external api that is sending back http only cookie for authentication. Is it possible to make use of these with server components / server actions?
Here is the login code:
When I try to access a protected route, I get unauthorized. In swagger though, it works fine.
Here is the login code:
"use server"
export async function serverSignIn(): Promise<ServerSignInResponse> {
const res = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/login`,
{
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json",
},
body: JSON.stringify({
email: "test@test.com",
password: "password",
}),
credentials: "include",
}
);
if (!res.ok) {
throw new Error(res.statusText);
}
return (await res.json()) as ServerSignInResponse;
When I try to access a protected route, I get unauthorized. In swagger though, it works fine.
25 Replies
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
"use server"
import { headers } from 'next/headers'
export async function serverSignIn(): Promise<ServerSignInResponse> {
const headers = new Headers(headers())
headers.set("Accept", "application/json")
headers.set("Content-Type", "application/json")
const res = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/login`,
{
method: "POST",
headers,
body: JSON.stringify({
email: "test@test.com",
password: "password",
}),
credentials: "include",
}
);
if (!res.ok) {
throw new Error(res.statusText);
}
return (await res.json()) as ServerSignInResponse;
try forwarding the header like this
![Avatar](https://cdn.discordapp.com/avatars/78572020324896768/7f9f028485d3792952280577c676fed0.webp?size=256)
DanOP
![Image](https://cdn.discordapp.com/attachments/1203073440366592020/1203078109658742834/image.png?ex=65cfc8cd&is=65bd53cd&hm=93e3fd697e03828d56a598b7dd618399e364ea6f3252e156d96c7b78d2bafd86&)
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
oh change the name of the variable
"use server"
import { headers } from 'next/headers'
export async function serverSignIn(): Promise<ServerSignInResponse> {
const newHeaders = new Headers(headers())
newHeaders.set("Accept", "application/json")
newHeaders.set("Content-Type", "application/json")
const res = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/v1/auth/login`,
{
method: "POST",
headers: newHeaders,
body: JSON.stringify({
email: "test@test.com",
password: "password",
}),
credentials: "include",
}
);
if (!res.ok) {
throw new Error(res.statusText);
}
return (await res.json()) as ServerSignInResponse;
![Avatar](https://cdn.discordapp.com/avatars/78572020324896768/7f9f028485d3792952280577c676fed0.webp?size=256)
DanOP
![Image](https://cdn.discordapp.com/attachments/1203073440366592020/1203080297340473364/image.png?ex=65cfcad7&is=65bd55d7&hm=6e74e6d04fcb53d9916bfdf14b211869426c8b6bda978c6d53870a2c97a357ec&)
Here's a more descriptive error from the logs
![Image](https://cdn.discordapp.com/attachments/1203073440366592020/1203080540748783656/image.png?ex=65cfcb11&is=65bd5611&hm=7f463754f26ca32cd6f16635dfd0591c0bc76402a0f9cbe19314fb312a386d9d&)
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
add this line
newHeaders.delete('Content-Length')
![Avatar](https://cdn.discordapp.com/avatars/78572020324896768/7f9f028485d3792952280577c676fed0.webp?size=256)
DanOP
ok yea now it works "as expected". I get unauthorized when i try to access protected route. So still same as my original issue 😄
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
how do you access the protected route?
![Avatar](https://cdn.discordapp.com/avatars/78572020324896768/7f9f028485d3792952280577c676fed0.webp?size=256)
DanOP
I'm just wondering if it is possible because I haven't really seen any material about it
The solution I've tried that works is manually setting the cookie in the server action and then forwarding the cookie as a header to each request that is protected route
The solution I've tried that works is manually setting the cookie in the server action and then forwarding the cookie as a header to each request that is protected route
is that the only way? 🤔 seems odd way to go about it
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
are you talking about the protected route of the external api?
![Avatar](https://cdn.discordapp.com/avatars/78572020324896768/7f9f028485d3792952280577c676fed0.webp?size=256)
DanOP
yup
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
are you fetching/accessing them on client side or server side?
if you access them on client side, all you need is set the cookies to the browser
![Avatar](https://cdn.discordapp.com/avatars/78572020324896768/7f9f028485d3792952280577c676fed0.webp?size=256)
DanOP
server
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
then you will need to forward the header like this
![Avatar](https://cdn.discordapp.com/avatars/78572020324896768/7f9f028485d3792952280577c676fed0.webp?size=256)
DanOP
that still gives me 401 though?
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
do you see the cookies begin set on the browser?
![Avatar](https://cdn.discordapp.com/avatars/78572020324896768/7f9f028485d3792952280577c676fed0.webp?size=256)
DanOP
nope
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
so its 401 lol
you need to authenticate with the external api then set the cookies
![Avatar](https://cdn.discordapp.com/avatars/78572020324896768/7f9f028485d3792952280577c676fed0.webp?size=256)
DanOP
so basically this?
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
yes
![Avatar](https://cdn.discordapp.com/avatars/78572020324896768/7f9f028485d3792952280577c676fed0.webp?size=256)
DanOP
alright. Just wanted to make sure I'm on the right track here. Thanks
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
no prob