Guidance and explanations
Answered
Silver Fox posted this in #help-forum
Silver FoxOP
I'm new to next13
I'm trying to understand why I cannot fetch in a server component with a GET request on next13.
## thankful for any explanation
## Component
import { createAvailability,authStatus } from "../../services/services";
export default function Page({ params }: { params: { id: string } }) {
const user = authStatus();
console.log(user);
return (
<main>
<div>
My Page
</div>
{/* <button onClick={() => createAvailability()}></button> */}
</main>)
}
## Function file:
export const authStatus = async () => {
const response = await fetch(
credentials: 'include',
next:{
revalidate: 4
}
});
if (!response.ok){
return "You are not authenticated";
}
const data = await response.json();
console.log(data);
return data;
}
I'm trying to understand why I cannot fetch in a server component with a GET request on next13.
## thankful for any explanation
## Component
import { createAvailability,authStatus } from "../../services/services";
export default function Page({ params }: { params: { id: string } }) {
const user = authStatus();
console.log(user);
return (
<main>
<div>
My Page
</div>
{/* <button onClick={() => createAvailability()}></button> */}
</main>)
}
## Function file:
export const authStatus = async () => {
const response = await fetch(
${BUSKER_BACKEND_URL}/auth/status,{credentials: 'include',
next:{
revalidate: 4
}
});
if (!response.ok){
return "You are not authenticated";
}
const data = await response.json();
console.log(data);
return data;
}
Answered by Ray
what you need to do is send the request with the headers
const response = await fetch(${BUSKER_BACKEND_URL}/auth/status,{
headers: Object.fromEntries(headers()),
next:{
revalidate: 4
}
});12 Replies
@Ray turn the `Page` component to async and await `authStatus()`
Silver FoxOP
Getting "you are not authenticated tho, how come?
when i use "use client" I dont get this message
I'm getting receiving my user through json
@Silver Fox when i use "use client" I dont get this message
because your backend is looking for cookies to authenticate
Silver FoxOP
not quite sure what you mean, I'm getting cookies through passport google oAuth.
I wouldn't be able to get my userId if I wouldn't successfully authenticate
I wouldn't be able to get my userId if I wouldn't successfully authenticate
the cookies saved on your browser and when you fetch on client side, it will also attach the cookies to the request
what you need to do is send the request with the headers
const response = await fetch(${BUSKER_BACKEND_URL}/auth/status,{
headers: Object.fromEntries(headers()),
next:{
revalidate: 4
}
});Answer
Silver FoxOP
Cannot find name 'headers'. Did you mean 'Headers'?ts(2552)
lib.dom.d.ts(8642, 13): 'Headers' is declared here.
any
lib.dom.d.ts(8642, 13): 'Headers' is declared here.
any
@Silver Fox Cannot find name 'headers'. Did you mean 'Headers'?ts(2552)
lib.dom.d.ts(8642, 13): 'Headers' is declared here.
any
import { headers } from 'next/headers'@Ray `import { headers } from 'next/headers'`
Silver FoxOP
Thanks Ray, picked it up and it worked fine w your solution! 🙂