SvelteKit и JWT

Question

Я хочу создать сайт с помощью Svelte / Kit и использовать JWT. Я нашел инструкции в Интернете, например:Svelte JWT Authentication https://morioh.com/p/1d95522418b2 SvelteKit Session Authentication using Cookies https://www.youtube.com/watch?v=bG7cxwBMVag Но, к сожалению, нет инструкций для Svelte Kit и JWT. Так что попробовал сам.

Маркер создается в конечной точке, но не поступает на страницу (или не вызывается). Я подозреваю, что какая-то настройка в заголовках неверна, но не могу понять, что не так. Это моя очень упрощенная тестовая среда:

(1) Я вызываю конечную точку login.js со страницы index.svelte. Для тестирования я не проверяю электронную почту и пароль и отправляю JWT обратно. Данные приходят, но я не вижу JWT.

(2) JWT должен быть отправлен на другую конечную точку. Как лучше всего это сделать?

Страница" index.svelte (упрощенно):

      <script>
  let email="", password="";
    
  const doLogin = async () => {
    const response = await fetch("/auth/login", {
      method: 'POST',
      headers: {
    "Content-Type": "application/json",
      },
      credentials: 'include',
      body: JSON.stringify({
    email,
    password
      })
    }); 
    
    if (response.status == 200) {
      const { done, value } = 
        await response.body.getReader().read();
      await console.log("done, value=", done, 
        JSON.parse(new TextDecoder("utf-8").decode(value)));
      await console.log("headers=", response.headers);
    }
  }
</script>

<h1>Welcome to MyAuth</h1>
<input type=email bind:value={email}/><br/>
<input type=password bind:value={password}/><br/>
<button on:click={doLogin}>Submit</button>

"Конечная точка" login.js (упрощенно):

      import jwt from "jsonwebtoken";  

export function post(request, context) {
  const token = jwt.sign({
    data: { text: "test" },
    "topsecret", 
  });  
    
  const response = {
    status: 200,
    headers: {
      'content-type': 'application/json',
      'Authorization': `Bearer ${token}`,
    },
    body: {
      passwordOk: true,
    }
  };
  return response;
}

Консоль показывает:

      done, value= false {passwordOk: true}
index.svelte:59 headers= Headers {}
index.svelte:44 Fetch finished loading: POST "http://localhost:3000/auth/login".
doLogin @ index.svelte:44

Answer 1

Я думаю, вы смешиваете две основные части аутентификации:

1. Запрос / отправка учетных данных.
2. Использование этих учетных данных для доступа к защищенному контенту.

обычно отправляется клиентом (браузером) на сервер для запроса доступа к защищенному контенту. Итак, прямо сейчас ваш сервер запрашивает у клиента разрешение. В этом нет смысла.

Вместо этого конечная точка входа в систему должна отправить токен через:

• заголовок в конечной точке входа.
• В body ответа (где passwordOk является).

Set-Cookieзаставляет браузер отправлять это значение в виде файла cookie при каждом следующем запросе. Сервер может проверить значение этого файла cookie перед обслуживанием защищенного содержимого. Это может быть более безопасно, поскольку вы можете отправлять куки только HTTP.

Если токен отправляется в теле ответа для входа в систему, клиент должен отправлять токен в будущих запросах с Authorization: Bearer ${token}заголовок. Затем сервер может проверить этот заголовок перед обслуживанием защищенного содержимого.