Как получить Http only cookie в middleware Nextjs 14?

Question

[RahymCharyyev]

Всем привет. Мне нужна ваша помощь. У меня фрондентд веб-приложения на Nextjs 14, а бекеенд на nodejs, который устанавливает http-only jwt cookie в headers, когда пользователь входит в приложение. Затем у меня есть функция getMe() в middleware, которая получает информацию о профиле. Если только http установлен правильно, getMe() отправляет тип ответа «success», если нет, выдает ошибку. Затем я проверяю, если все прошло успешно, пользователь может получить доступ к своему профилю, если нет, middleware должно перенаправить его на страницу входа.
Проблема в том, что ответ функции getMe в middleware дает мне null. Но когда я тестирую это, просто копирую и вставляю URL-адрес в браузер, все работает. Можете ли вы помочь мне с этой проблемой? Вот код, который я предоставил ниже:

import { apiUrl } from '@/constants/apiUrl';
import { User, UserData } from '@/types/auth';
import { typedFetchJSON } from '@/utils/typedFetch';

export function signIn(username: string, password: string) {
  return typedFetchJSON(`${apiUrl}/user/signin`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    credentials: 'include',
    body: JSON.stringify({ username, password }),
  });
}

export function getMe() {
  return typedFetchJSON<User>(`${apiUrl}/user/me`, {
    credentials: 'include',
  });
}

import { createI18nMiddleware } from 'next-international/middleware';
import { NextRequest, NextResponse } from 'next/server';
import { getMe } from './api/auth';

const locales = ['ru', 'tm', 'en', 'tr'];

const I18nMiddleware = createI18nMiddleware({
  locales,
  defaultLocale: 'ru',
});

export async function middleware(request: NextRequest) {
  const protectedPaths = ['/profile', '/add-ads'];

  if (protectedPaths.includes(request.nextUrl.pathname.slice(3))) {
    try {
      const response = await getMe();
      if (response?.type !== 'success') {
        console.log('response getMe');
        return NextResponse.redirect(new URL('/sign-in', request.url));
      }
    } catch (error) {
      console.error('Failed to fetch user profile:', error);
    }
  }

  return I18nMiddleware(request);
}

export const config = {
  matcher: [
    '/((?!api|static|.*\\..*|_next|favicon.ico|robots.txt|serviceworker.js).*)',
  ],
};

Comments

[szQocks]

у тебя в запросе нет ни каких кук, поэтому условие не отрабатывает, а null возвращает видимо эта шляпа return I18nMiddleware(request);

когда ты из браузера отправляешь запрос - прикрепляешь куки, но щас ты отправляешь запрос с сервера на другой сервер

[RahymCharyyev]

szQocks, А каким образом мне отправлять куки? Насколько я понимаю, это нужно делать так как я описал ниже. Но тогда проблема в том что я не могу получить cookieValue внутри middleware.

export function getMe() {
  return typedFetchJSON<User>(`https://portal1.tp-projects.com/api/user/me`, {
    headers: {
      Cookie: cookieValue,
    },
    credentials: 'include',
  });
}

И как можно решить пробему с return I18nMiddleware(request)?

[szQocks]

RahymCharyyev,
import { cookies } from 'next/headers'
headers: { Cookie: cookies().toString() },

И как можно решить пробему с return I18nMiddleware(request)?

решать почему он возвращает null ? - без понятия

[RahymCharyyev]

szQocks, Так должно выглядить?

import { createI18nMiddleware } from 'next-international/middleware';
import { NextRequest, NextResponse } from 'next/server';
import { getMe } from './api/auth';
import { cookies } from 'next/headers';
import { typedFetchJSON } from './utils/typedFetch';
import { User } from './types/auth';

const locales = ['ru', 'tm', 'en', 'tr'];

const I18nMiddleware = createI18nMiddleware({
  locales,
  defaultLocale: 'ru',
});

export async function middleware(request: NextRequest) {
  const protectedPaths = ['/profile', '/add-ads'];

  if (protectedPaths.includes(request.nextUrl.pathname.slice(3))) {
    try {
      const response = function getMe() {
        return typedFetchJSON<User>(
          `${apiUrl}/user/me`,
          {
            headers: { Cookie: cookies().toString() },
            credentials: 'include',
          }
        );
      };

      if (response?.type !== 'success') {
        console.log('response getMe');
        return NextResponse.redirect(new URL('/sign-in', request.url));
      }
    } catch (error) {
      console.error('Failed to fetch user profile:', error);
    }
  }

  return I18nMiddleware(request);
}

export const config = {
  matcher: [
    '/((?!api|static|.*\\..*|_next|favicon.ico|robots.txt|serviceworker.js).*)',
  ],
};

[szQocks]

RahymCharyyev, нет, у тебя функция getMe не вызывается, как должно выглядеть - решай сам, я лишь подсказал, и я не пишу на нексте

[RahymCharyyev]

szQocks, понял, спасибо!

[szQocks]

RahymCharyyev, если мало ли не выйдет получить куки из next/cookie, то попробуй их получить из request в middleware, в общем разберешься

https://nextjs.org/docs/app/building-your-applicat...