The difference is where each request actually runs. useEffect executes in the browser, so the browser automatically attaches your session/XSRF cookies to the axios call (that's why it returns 200). Next.js middleware runs server-side (Edge/Node runtime) — it's essentially a separate HTTP client with no access to the browser's cookie jar, so axios sends the request with no cookies at all unless you forward them explicitly.

Fix: read the cookies off the incoming request and attach them manually to the outgoing call:

import { NextResponse } from 'next/server';
import axios from 'axios';

export async function middleware(request) {
const cookie = request.headers.get('cookie') ?? '';

try {
await axios.get('http://localhost:8000/api/user', {
headers: { Cookie: cookie },
withCredentials: true,
});
return NextResponse.next();
} catch (e) {
return NextResponse.redirect(new URL('/login', request.url));
}
}
Also double check SANCTUM_STATEFUL_DOMAINS=localhost:3000 is set in your Laravel .env (needed since frontend/backend are on different ports) — that part is clearly already working since the useEffect call succeeds, but worth confirming if you still see issues after forwarding the cookie.