Odświeżanie accessToken'u

Question

Zastanawiam się w jaki sposób powinno się odbywać odświeżanie accessTokenu i refreshTokenu, bo póki co widzę tylko 2 opcje.
Po stronie klienta napisać jakąś funkcję automatycznie odświeżającą tokeny, która będzie działała, obliczała czas do końca ważności accessTokenu i po tym czasie wyśle request do endpoint'u /refresh i dostanie od niego nowe tokeny.

Czy jeśli czas accessTokenu się skończy i dopiero po otrzymaniu odpowiedzi ze statusem 401 wysłać request do endpointu /refresh, a po otrzymaniu nowych tokenów ponowić pierwotne zapytanie do serwera ?

No i ponad to w obu przypadkach generować nowe tokeny przy każdym wysyłanym request'cie.

Answer 1

Powiem, jak jest to w Firebase, bo wydaje mi się, że programiści Google się na tym znają.

Przy uwierzytelnieniu dostaje się 2 tokeny, tak jak pisałeś access i refresh, które są ważne tylko przez godzinę. Idea jest taka by przechowywać tylko access token, bo w razie jego wykradnięcia, haker będzie miał dostęp do danych tylko do upłynięcia godziny i nie będzie miał, możliwości by ten czas przedłużyć. Natomiast gdyby wykradł refresh token to mógłby mieć już dostęp na zawsze, bo wystarczy, że co godzinę generowałby nowy.

Dlatego bardzo ważne jest, by w razie konieczności przechowywania także refresh tokena dobrze go zabezpieczyć, jakoś umiejętnie zaszyfrować, czy coś tego typu, myślę, że ktoś to lepiej napisze jak go przechowywać.

Odnośnie pytania, wydaje mi się, że zaraz po dostaniu tokena ustawienie jakiegoś setTimeout nie jest złym rozwiązaniem(oczywiście jeżeli ta funkcjonalność jest potrzebna)

Comments

refresh tokena dobrze go zabezpieczyć, jakoś umiejętnie zaszyfrować

Trochę poleciałeś. Szyfrowanie po stronie usera? Nie widzę jak miałoby to wyglądać.

Answer 2

Zapisujesz access i refresh token. W momencie kiedy wygasa access dostajesz 401 i automatycznie wysyłasz refresh. Po otrzymaniu nowego access tokena ponawiasz request o dane.

Kiedy wygaśnie refresh jesteś wylogowany.

Comments

Refresh trzymam w ciasteczkach, a Access w zwykłej zmiennej let.
Właśnie nie mam pojęcia w jaki sposób zaimplementować wysyłanie refresh'a i ponowne wysłanie request'u, żeby było w miare uniwersalne. Mógłbym to napisać na klika promis'ów w jednym zapytaniu wszystko, ale wydaje mi się to słabe rozwiązanie, bo każde zapytanie do serwera będzie miało wtedy bardzo dużo kodu

---

1. Użyj async await. 
2. Trzymaj w tokeny w localStorage, co refresh strony będziesz generować access?
3. Po to masz serwisy, interfejsy oraz abstrakcję żeby wywoływać funkcję getPost, a to czy pod spodem leci jeden czy dwadzieścia requestów, to już nie powinno Cię interesować.

---

const onSubmit = (values: Values) => {

    fetch("http://localhost:5000/api/posts", {
      method: "POST",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
        // 'Content-Type': 'application/x-www-form-urlencoded',
      },

      body: JSON.stringify({
        name: "Nazwa",
        text: "jakiś post",
        id: "341324132"
      }),
    })
      .then((response) => {
        if (response.status == 401) {
          refreshTokens();
          [...]
        }
        return response.json();
      })
      .then((resp) => console.log(resp))
      .catch((err) => {
        console.log(err);
      });
  };

Z czym mam problem to co wpisać w miejscu [...], funckja refreshTokens() wysyłała by request z odświeżeniem tokenów. Tylko nie wiem w jaki sposób wrócić do wywołania "dodania postu" od nowa po odświeżeniu tokenów...

---

Używaj async await  albo wydziel wysyłanie do osobnej funkcji.