Are you using pages router or app router?

Oh pages router, hm

Is step2.js working fine

thank you, here is the code in blocks please.

=======================Folder Structure=======================
pages/
donate/
index.js
steps/
step1.js
step2.js
step3.js

=======================
// pages/donate/steps/step2.js
=======================
import { useRouter } from 'next/router';
import { useState } from 'react';

export default function Step2() {
const router = useRouter();
const { type } = router.query;

const handleNext = () => {
router.push({
pathname: '/donate/steps/step3',
query: { type },
});
};

return (
<button onClick={handleNext}>Next</button>
);


=======================// pages/donate/steps/step3.js=======================

import { useRouter } from 'next/router';

export default function Step3() {
const { query } = useRouter();
return <div>Step 3 - Type: {query.type}</div>;
}

=======================Logs or Errors=======================
GET /donate/steps/step3?type=One-Off 404
GET /_next/static/chunks/pages/donate/steps/step3.js 404

yes, step2.js is working fine sir

The code is not in blocks

Can you provide a min repro repo

can I upload the folder here with the code please donate (it has all the pages code)

Here is the code please.

Can you provide via github?

ok, sure.

HI Team,

Can you review my Next.js authentication setup? I’m using cookies for JWT storage, but the token isn’t being sent with API requests. I’ve configured CORS, cookies (SameSite=None; Secure), and fetch with credentials: "include", but still getting 401 Unauthorized. Anything missing?

.

https://github.com/nawaz5124/auth-api-files_JWT.git

Here are the files. Please could you help on this.

1️⃣ Overview
This document outlines the implementation of JWT-based authentication using cookies in a Next.js frontend and a Django backend. It includes key configurations, encountered issues, and troubleshooting steps.
 
2️⃣ Authentication Flow
1. User logs in → Backend generates an access_token and sets it in an HTTP-only cookie.
2. Frontend requests protected resources → Next.js retrieves the token from cookies and attaches it to requests.
3. Django validates the token → If valid, it allows access; otherwise, it returns 401 Unauthorized.
4. Token refresh logic → If the token expires, the frontend requests a new token automatically.
 
 
 
3️⃣ Implementation Details
Frontend (Next.js) Changes
✅ Updated authService.js to retrieve tokens from cookies instead of LocalStorage.
✅ Updated apiClient.js to attach Authorization: Bearer <token> in every request.
✅ Ensured API calls use withCredentials: true to send cookies in requests.
 
Backend (Django) Changes
✅ Modified authentication views to set access_token in cookies instead of returning it in JSON response.
✅ Configured CORS & cookie settings:
* Access-Control-Allow-Credentials: true
* SameSite=None; Secure (for cross-origin requests)
* SESSION_COOKIE_HTTPONLY = True

I've shared the gitHub link please. thank you for. your help.

I am struggling hard.

Are the cookies returned by backend httpOnly, are you able to access it with document.cookies?

yes, sir, they are visible in the browser cookie

not able to access via document.cookies

that means the cookies are httpOnly

is the url to which you're trying to send a request, a different domain or same domain?

same domain only

Backend (Django) running on 8000 port
Next.js running on 3000 port

localhost

try setting sameSite to lax when setting cookie

python(django)
settings

Its lax

Do you want me to set in fronted as well, explicitly

Yup, also try setting it to none if it works(just for testing)

ok, thank you.

If SESSION_COOKIE_HTTPONLY=True, does that mean my frontend (Next.js) won’t be able to access the token using document.cookie? Should I temporarily set it to False for debugging?

yes, thats right

ok, thank you

frontend won't be able to access using document.cookie*

But if that is false, incase of a XSS attack, the attacker can steal the cookies

Hmmm, yeah 🙂

I made it None

SESSION_COOKIE_SAMESITE = "None"

but no luck - its the same error (changes only in the backend settings ) tried with Lax and None

Also, CSRF_COOKIE_SAMESITE = "None"

Sir, The issue seems to be the Authorization header is not being passed in the header request.

When I hardcoded., it worked fine with hard-coded values.

Hi @"use php" - please could you help

Hi I’ll check it once I’m free

With httpOnly, you are able to access document.cookies?

Hi @"use php" ,
Thank you for the response.

No, Unable to access from next.js but I can see the access_token in Cookie(browser) please.

I need to retrieve and pass the token for the subsequent API calls please

I faced a similar issue when i separated front end and back end
Even I wasn’t able to find solution

But I guess Maybe since it’s in different domain, maybe it needs to be directly passed, because when the app is communicating to an external api, passing cookies directly is not used.

So what I did was:
- get raw cookie from server and get from client
- send request with that cookie send via headers

ok, sir, that make sense.
so is it fine to do this way please.

frontend and backend both will be running on the same domain and backend servere please.

when I hardcoded cookie /authorization header in the code, it worked fine.||

Backend API is updating cookie properly as httpOnly and secure but our next.js is unable to read and pass it please

Flow : Next.js Invoke api_service to get the cookie / (update in the cookie as acces_token) and then ready and pass as Authorization Header Bearer <token>

I am the developer for frontend and backend end. I will make the changes if you suggest me anything please.

Front end: domain.com
Back end: api.domain.com

Nextjs can’t read with document.cookie if cookie is httpOnly

Passing IIRC, it should work with subdomains

Thank you @"use php" , I will back to you.

You might need to set up domain property for it in cookie

ok, thank you. sir. yes added. I think, some more changes are required.

JWT token-based authentication is working fine when I hard code in the code.. It seems the backend (Python) needs to read the token from cookies. I am working on it.

😭

If it’s just interacting through api, I would recommend headers rather than cookies

Thank you @"use php" for your continuous support and guidance.. I was able to progress and get ideas on the resolution. I added all you suggestion like domain details, Lax settings and reading cookies and passing as header.. It was also the issue with Python which was not reading it properly.

Here’s a detailed summary of what we did to fix JWT Cookie-based authentication in Django Rest Framework (DRF) and make it work in both backend (cURL) and frontend (browser)

Added JWT Middleware → Automatically attached access_token from cookies to Authorization headers.
Fixed SameSite & Secure Cookie settings → Allowed cookies on localhost (Lax and False)
Updated API to check both headers & cookies → Ensured the token was validated from both sources.
Verified API works in terminal → Confirmed cookie authentication in cURL.
NextJS - Fixed browser API request → Ensured frontend sends cookies correctly.

Fix in NexJs
Replaced fetch() with axios
Added withCredentials: true in axios.post()
Enabled CORS_ALLOW_CREDENTIALS = True in Django settings
Fixed SameSite=Lax & Secure=False for local testing
Started working in DevTools (Cookies Sent & Received)

I see you replaced fetch with axios.

For some reason, even I’ve noticed many times that withCredentials only work properly with axios.

but also check https://adios-axios.com/

I’ll check and let you know for any alternative with fetch.

Can you send how you’re accessing cookies or auth in backend

Check this @Nawaz https://stackoverflow.com/questions/40543372/set-withcredentials-to-the-new-es6-built-in-http-request-api-fetch

Thank you @"use php" for your help. I will try with fetch and get back to you.

I've gone through the links and it gives detail insights.