Set-Cookies не работает в браузере, а в Postman работает, как сохранить куки в браузере?

Question

[Alkogolik_Spermostrel]

У меня API на React использует Jwt аутентификацию с Refresh токенами в куки. Refresh токены отправляются на url https://localhost:7048/api/auth/update-user-access... для получения нового access токена каждые 5 минут.

При регистрации по https://localhost:7048/api/auth/register приходит ответ с refresh и access токенами:

access-control-allow-credentials:
true
access-control-allow-origin:
https://localhost
content-type:
application/json; charset=utf-8
date:
Mon, 14 Oct 2024 19:27:17 GMT
location:
https://localhost:7048/api/auth/register
server:
Kestrel
set-cookie:
IssuerRefreshToken=8019B0E82524B316A4798B5DC04BBAD63C7171F7C7F5F89351D7EC736CF316B7A5A3ED8E4D4FBDCBAAECEB970E1DC7016F8F968F8063DF4AA4FE2EBAA8EB55B3; path=/; secure; httponly
vary:
Origin

access токен есть,


но refresh токен не сохраняется в cookie:


Middlewares на ASP .NET Core:

var app = builder.Build();

app.UseMiddleware<HandleExceptionsMiddleware>(); // catches all exceptions in app and logging them

//app.UseHttpsRedirection();
//app.UseHsts();

app.UseRouting();

if (app.Environment.IsDevelopment())
{
    app.UseCors(builder => builder
         .WithOrigins("http://localhost:3000", "https://localhost:3000", "https://localhost:443", "http://localhost:443")
         .AllowAnyHeader()
         .AllowAnyMethod()
         .AllowCredentials()
         .SetIsOriginAllowed(origin => true)
         );

    Console.WriteLine("development environment");
}

//app.UseForwardedHeaders(new ForwardedHeadersOptions
//{
//    ForwardedHeaders = ForwardedHeaders.XForwardedFor | ForwardedHeaders.XForwardedProto
//});

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseAuthentication();
app.UseAuthorization();

app.MapControllers();

app.Run();

Код регистрации на Javascript:

import { NextRouter } from 'next/router';

export const handleRegistration = async (
  username: string,
  email: string,
  password: string,
  router: NextRouter
) => {
  // Проверка входных данных
  if (!username || !email || !password) {
    throw new Error('Все поля должны быть заполнены');
  }

  const userData = {
    username,
    email,
    password,
  };

  try {
    const response = await fetch('https://localhost:7048/api/auth/register', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'credentials': 'include',
      },
      body: JSON.stringify(userData),
    });

    if (!response.ok) {
      const errorText = await response.text();
      throw new Error(`Ошибка при регистрации: ${errorText}`);
    }

    const { userId, accessTokenString } = await response.json(); // Сервер возвращает userId и token
    localStorage.setItem('userId', userId);
    localStorage.setItem('token', accessTokenString);

    router.push('/all');

    return { userId, accessTokenString };
  } catch (error) {
    throw new Error('Ошибка при регистрации. Попробуйте снова!');
  }
};

В postman у меня получается взять access и refresh токен с https://localhost:7048/api/auth/register

Answer 1

[Aetae]

Всё сохраняется, но домен localhost != localhost:7048 != localhost:3000.
Все запросы к соответствующему домену localhost:7048 будут иметь нужный куки.

Если на проде и api и основной сайт будут на одном домене, без разделений - используй встроенный dev server proxy, чтобы и при локальной разработке они тоже были одним, проксируя запросы на localhost:7048 с localhost:3000.

Если на разных и авторизация должна работать по типу SSO - не используй куки и вообще не пили свой велосипед, используй готовые реализации oauth и для бэка и для фронта.

Comments

[Даша Циклаури]

что значит не используй куки? а на серверном рендеринге он как стэйт авторизации получит?

[Aetae]

Даша Циклаури, а нафига тебе вообще авторизация в SSR? Это говно нужно только для поисковиков, а им авторизация не нужна.:)

[Даша Циклаури]

Aetae, нет) для исполнения кода на серверной стороне в общем если говорить. Другими словами будет кейс когда надо в модуле server-only получить стэйт авторизации, без куки не обойдёшь, next-auth если что это просто обёртка которая создаёт ещё слой с куками. Ну и быстрая отрисовка это тоже плюс с тз ux (а в последствии бизнеса)