Denoder / nuxt-module-alternatives

Alternative modules to use while waiting for Nuxt 3 Compatibility
MIT License
144 stars 14 forks source link

XSRF-TOKEN header is not set when login #111

Closed mittci closed 2 years ago

mittci commented 2 years ago

Environment

nuxt 3 last

Reproduction

https://github.com/Maxp777/nuxt3_2

Describe the bug

When make a call to api XSRF-TOKEN header are set and no 403 csurf error. After press login and all work well.

But if refresh page and press login (without call to some api point) XSRF-TOKEN header are not set.

Additional context

At first api call when press login XSRF-TOKEN is present in cookies in section request header

POST /api/auth/login HTTP/1.1
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,ru;q=0.8
Connection: keep-alive
Content-Length: 0
Cookie: auth.strategy=local; _csrf=z2Fbi3OZ5-l6RpkmtOiy4WdG; XSRF-TOKEN=w6dKRkLT-YmiC8xwC_m8_H0TH9SkGR94So-o; auth.redirect=%2Flogin; auth._token.local=false; auth._token_expiration.local=false; auth._refresh_token.local=false; auth._refresh_token_expiration.local=false
Host: localhost:3000
Origin: http://localhost:3000
Referer: http://localhost:3000/login
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-origin
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36
accept: application/json, text/plain, */*
sec-ch-ua: "Chromium";v="107", "Not=A?Brand";v="24"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Linux"

Logs

$http.$post('/api/me', { body: { email: 'test@test.com', pass: '123' } }) result

Response header

set-cookie: XSRF-TOKEN=SqMGdF8Z-vYDoN4lglcb3HFfRp43g6q-bVUQ; Path=/
set-cookie: xsrf-token=SqMGdF8Z-vYDoN4lglcb3HFfRp43g6q-bVUQ; Path=/

Request header

x-xsrf-token: tNRlO9qn-u4Ulf7KfjsUWb6N-IisEn7JPFng

But useNuxtApp().$auth.loginWith('local', { body: { email: 'mail@mail.com', password: '123qwe' }}) result in

Status Code: 403 Forbidden

Response header - no set cookies

Request header - no x-xsrf-token

No response

mittci commented 2 years ago

Header is set wrong (not with set)

console.log('check', ctx.options.headers.get('X-XSRF-TOKEN'), ' | ', ctx.options.headers['X-XSRF-TOKEN']) return check null | xLk4607R-q2iUfqGACIYWmLdZiQvCaBmyPBQ

mittci commented 2 years ago

In @refactorjs/ofetch is config.headers[config.xsrfHeaderName] = decodeURIComponent(cookie); but need to be config.headers.set(config.xsrfHeaderName, decodeURIComponent(cookie)); And like in ohmyfetch config.headers = new Headers(config.headers) before

That will be

addXSRFHeader_fn = function(config) {
  const cookie = getCookie(config.xsrfCookieName);
  const cookies = getCookies();

  if (config.credentials === "include" && config.xsrfCookieName && cookies[config.xsrfCookieName]) {
    config.headers[config.xsrfHeaderName] = decodeURIComponent(cookie);
  }
  return config;

};

Like so

addXSRFHeader_fn = function(config) {
  const cookie = getCookie(config.xsrfCookieName);
  const cookies = getCookies();

  if (config.credentials === "include" && config.xsrfCookieName && cookies[config.xsrfCookieName]) {
    console.log('addXSRFHeader_fn', config.headers)

    if (config.headers.constructor.name === 'Object') {
      config.headers = new Headers(config.headers)
    }

    // config.headers[config.xsrfHeaderName] = decodeURIComponent(cookie);
    config.headers.set(config.xsrfHeaderName, decodeURIComponent(cookie));
  }
  return config;
};
mittci commented 2 years ago

Need some changes like so https://github.com/refactorjs/ofetch/pull/1