Моя настройка аутентификации требует setTimeout перед перенаправлением, чтобы разрешить запись файлов cookie в браузере. ⇐ Javascript

[Anonymous]

Последовательность аутентификации:

• Пользователь перенаправляется обратно на мой сайт (в /auth/callback) после входа в систему через стороннее устройство. Обратное перенаправление включает параметры запроса. Функция React на странице обратного вызова отправляет эти параметры запроса в мой API, который выполняет дальнейшие восходящие запросы, сохраняет их и отправляет обратно файл cookie «sid» только для http. Этот файл cookie автоматически отправляется со всеми дальнейшими запросами веб-клиента к моему API. Вот ответ API:

  Код: Выделить всё

  const cookie =
  [
  `sid=${encodeURIComponent(sessionId)}`,
  "HttpOnly",
  "Secure",
  "SameSite=None",
  "Path=/",
  "Domain=.domain.com",
  `Max-Age=${THIRTY_DAYS_SEC}`
  ].filter(Boolean).join("; ");
  return {
  statusCode: 302,
  headers: {
  "Access-Control-Allow-Origin": origin,
  Location: `${origin}/uploads`,
  "Vary": "Origin",
  "Access-Control-Allow-Credentials": "true",
  "Access-Control-Allow-Headers": "Content-Type",
  "Access-Control-Allow-Methods": "POST,OPTIONS,DELETE,GET",
  "Content-Type": "application/json",
  "Set-Cookie": cookie
  },
  body: JSON.stringify({ success: true user_name: displayName })
  };
  

  Страница обратного вызова получает ответ и устанавливает 2 дополнительных файла cookie:

  Код: Выделить всё

  const body = await resp.json();
  if (!resp.ok) throw new Error('Auth callback failed');
  else {
  document.cookie = `session_present=true; path=/;`;
  document.cookie = `user_name=${body.user_name}; path=/;`;
  }
  } catch (e) {
  console.error(e);
  } finally {
  setTimeout(() => window.location.replace('/uploads'), 1000);
  }
  

Я устанавливаю 2 файла cookie отсюда, потому что, поскольку файл cookie sid является httpOnly, при монтировании страницы в /uploads этот файл cookie появляется только позже. Не знаю, почему это так. Во время монтирования приложение не видит файл cookie sid, поэтому оно не может определить, какой статус аутентификации установить. Файл cookie sid появляется в браузере только после монтирования страницы. Вот почему у нас есть файл cookie session_present, созданный браузером, который сразу же доступен при монтировании. Это не заменяет файл cookie sid, поскольку он все равно потребуется для запросов к API, и если API возвращает 401, приложение может удалить файл cookie session_present и исправить состояние аутентификации.
Поскольку этот файл cookie sid задерживается, мне нужно использовать файлы cookie локального браузера для компенсации. Перенаправление на /uploads немедленно вместо задержки в 1000 мс приводит к тому, что браузер не сохраняет файлы cookie, включая sid. Это ужасно, потому что я не хочу устанавливать слишком короткий таймаут, чтобы некоторые браузеры никогда не сохраняли эти файлы cookie, но я также не хочу заставлять большинство пользователей ждать заданный период времени.
Я рассматриваю возможность использования localStorage или другого альтернативного хранилища для значений session_present и user_name, но это не решит проблему с файлами cookie sid, потому что мне все равно придется ждать таймаута, иначе sid cookie исчезают
Как я могу дождаться, пока браузер завершит запись файлов cookie, а затем перейти к /uploads после этого, не дожидаясь 1000 мс?

Подробнее здесь: https://stackoverflow.com/questions/798 ... -cookies-t