Http only cookies with app router
Unanswered
Dan posted this in #help-forum
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
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
DanOP
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;
DanOP
Here's a more descriptive error from the logs
Ray
add this line
newHeaders.delete('Content-Length')
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 😄
Ray
how do you access the protected route?
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
Ray
are you talking about the protected route of the external api?
DanOP
yup
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
DanOP
server
Ray
then you will need to forward the header like this
DanOP
that still gives me 401 though?
Ray
do you see the cookies begin set on the browser?
DanOP
nope
Ray
so its 401 lol
you need to authenticate with the external api then set the cookies
DanOP
so basically this?
Ray
yes
DanOP
alright. Just wanted to make sure I'm on the right track here. Thanks
Ray
no prob