Server side fetching to api route protected with cookie auth
Answered
Grass Carrying Wasp posted this in #help-forum
Grass Carrying WaspOP
I'm building a web application using Next.js (frontend) on localhost:3000 and Laravel (backend) on localhost:8000. I'm using Laravel's built-in authentication for users, which relies on cookies.
Challenge with Fetching Data on Authenticated Routes:
I'm facing a challenge when fetching data from my Laravel API on routes that require authentication within Next.js server-side components. By default, Next.js doesn't automatically copy cookies from the user's request when making requests from server-side components to the Laravel API on a different port (localhost:8000).
Current Approach (Axios Interceptors):
To address this, I'm currently using Axios interceptors in my Next.js application. (See picture)
The code ensures that cookies are included in the API calls made from my Next.js server-side components to the Laravel API.
The Issue with Caching:
However, I also want to leverage the built-in caching features of Next.js for server-side data fetching. Unfortunately, these caching functionalities don't currently allow setting cookies in the request.
The Questions:
1. How can I effectively fetch data on authenticated routes from my Next.js server-side components while still taking advantage of Next.js' built-in caching feature.
2. Will it be better to not use app directory so I can use getServerSideProps and use the revalidate there?
Challenge with Fetching Data on Authenticated Routes:
I'm facing a challenge when fetching data from my Laravel API on routes that require authentication within Next.js server-side components. By default, Next.js doesn't automatically copy cookies from the user's request when making requests from server-side components to the Laravel API on a different port (localhost:8000).
Current Approach (Axios Interceptors):
To address this, I'm currently using Axios interceptors in my Next.js application. (See picture)
The code ensures that cookies are included in the API calls made from my Next.js server-side components to the Laravel API.
The Issue with Caching:
However, I also want to leverage the built-in caching features of Next.js for server-side data fetching. Unfortunately, these caching functionalities don't currently allow setting cookies in the request.
The Questions:
1. How can I effectively fetch data on authenticated routes from my Next.js server-side components while still taking advantage of Next.js' built-in caching feature.
2. Will it be better to not use app directory so I can use getServerSideProps and use the revalidate there?
Answered by Ray
I usually just pass the header like this
and the backend will be able to see the cookies
import {headers} from 'next/headers'
fetch("apiUrl", {
headers: new Headers(headers())
})and the backend will be able to see the cookies
2 Replies
@Grass Carrying Wasp I'm building a web application using Next.js (frontend) on localhost:3000 and Laravel (backend) on localhost:8000. I'm using Laravel's built-in authentication for users, which relies on cookies.
Challenge with Fetching Data on Authenticated Routes:
I'm facing a challenge when fetching data from my Laravel API on routes that require authentication within Next.js server-side components. By default, Next.js doesn't automatically copy cookies from the user's request when making requests from server-side components to the Laravel API on a different port (localhost:8000).
Current Approach (Axios Interceptors):
To address this, I'm currently using Axios interceptors in my Next.js application. (See picture)
The code ensures that cookies are included in the API calls made from my Next.js server-side components to the Laravel API.
The Issue with Caching:
However, I also want to leverage the built-in caching features of Next.js for server-side data fetching. Unfortunately, these caching functionalities don't currently allow setting cookies in the request.
The Questions:
1. How can I effectively fetch data on authenticated routes from my Next.js server-side components while still taking advantage of Next.js' built-in caching feature.
2. Will it be better to not use app directory so I can use getServerSideProps and use the revalidate there?
I usually just pass the header like this
and the backend will be able to see the cookies
import {headers} from 'next/headers'
fetch("apiUrl", {
headers: new Headers(headers())
})and the backend will be able to see the cookies
Answer
Grass Carrying WaspOP
It all works now, thanks to you. And all I needed to add was these headers
_headers.append("Accept", "application/json");
_headers.append("Referer", "localhost:3000");
I dont really understand why, but can someone please enlighten me.
Here's my env values in my laravel app
FRONTEND_URL=http://localhost:3000
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:3000
SESSION_DRIVER=cookie
_headers.append("Accept", "application/json");
_headers.append("Referer", "localhost:3000");
I dont really understand why, but can someone please enlighten me.
Here's my env values in my laravel app
FRONTEND_URL=http://localhost:3000
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:3000
SESSION_DRIVER=cookie