Cookie czy JWT?

Nie jestem pewien czy dobry, dział - jeśli nie, przepraszam i proszę o przeniesienie.

A teraz do rzeczy:
Aplikacja Angular 11 + WebApi (.NET Core 3.1).
Funkcjonalność autentykacji i autoryzacji:
Tzn potrzebuję by użytkownik mógł się zalogować, a później kontrolować możliwość wywołania przez niego metod API w zależności od posiadanych uprawnień, oraz dostęp do zakładek na stronie.

Co będzie lepsze do użycia w tym wypadku: Cookie czy JWT? I dlaczego?
W obu przypadkach jestem w stanie przechowywać Claimsy (takie jak Imię usera, Role, itp) więc nie wiem jak wybrać właściwie.

A może ktoś jest w stanie wytłumaczyć w prosty sposób kiedy używać Cookie ,a kiedy JWT?

Z góry dziękuję za odpowiedzi i wyrozumiałość za laickie pytanie

Jeżeli znasz angielski, to tu jest dobra odpowiedź:

https://stackoverflow.com/questions/37582444/jwt-vs-cookies-for-token-based-authentication

Nie bardzo właśnie odpowiada to na moje wątpliwości.
Chodzi o to, że wiele tutoriali przedstawia jak zrobić JWT, w którym przechowujemy claimsy i to JWT dodajemy do Headera.

Gdy zacząłem zgłębiać temat, na wielu forach, w tym StackOverflow, ludzie twierdzą, że to nie jest bezpieczne i lepsze są ciastka bo są Secure (HttpOnly).
I że jak już to żeby trzymać JWT w ciastku.

No i wszystko spoko do momentu aż nie potrzebuję sprawdzać po stronie Angulara czy klient jest zalogowany.
Ciastka Secure nie mogę przecież odczytać po stronie klienta.

Dlatego tego nie rozumiem.
Skoro JWT w headerze nie jest bezpieczne, to jak inaczej?

@hercules:

No i wszystko spoko do momentu aż nie potrzebuję sprawdzać po stronie Angulara czy klient jest zalogowany.
Ciastka Secure nie mogę przecież odczytać po stronie klienta.

Dlatego tego nie rozumiem.
Skoro JWT w headerze nie jest bezpieczne, to jak inaczej?

Nowy endpoint w postaci np. /users/me, który zwraca Ci dane o obecnym użytkowniku. Zwyczajnie wysyłasz request i sprawdzasz, czy zapytanie się udało.

Hmmm, no w sumie...

Tylko problem jeszcze mam taki, że jak wywołuję endpointy bezpośrednio (wpisując URL w przeglądarce) to serwer zwraca, ze jest zalogowany (ciasto istnieje). Ale jak Angular odpyta dokłądnie ten sam endpoint, to już twierdzi, że nie. Ręcznie ciastka do requesta angularowego dodać nie mogę bo jest ono Secure. Więc JS/TS go nie widzi.

Pozwoliłem sobie kontynuować wątek:
Cross domain cookie?

bo to już wygląda dalej na techniczny problem, nie koncepcyjny :)

Ostatnio zmieniałem metodę z JWT na cookie właśnie. Robię tak:

• app component uderza na zabezpieczony endpoint i tu jeśli dobrze zrozumiałem to nie wiesz jak wrzucić cookies do zapytania http ? Jeśli tak to po prostu dodaj opcje credentials na true. Dzięki temu możemy wykorzystać ciasteczka już zapisane w przeglądarce - jeśli nie wygasły.
  return this.httpClient.post(this.apiUrl + '/login', x, {withCredentials: true}) załączy te ciasteczka do zapytania. Jesli wpisujesz bezpośrednio adres w przeglądarce to działa, bo przeglądarka sama je dołączyła. W przypadku aplikacji Angulara musisz jakoś http clienta poinformować, że chcesz to zrobic.
• jesli status odpowiedzi jest OK to od razu pobierasz switchMapą profil uzytkownika i zapisujesz sobie go w jakimś BehaviourSubjecie. Tym możesz utrzymywać stan aplikacji. Dodatkowo jakiś http interceptor, który po otrzymaniu odpowiedzi ze statusem 401 usunie wartość z BehaviourSubjecta i tym samym wyloguje uzytkownika z aplikacji.

Dokładnie tak zrobiłem, ale mimo flagi withCredentials , angular nie dodaje tego ciastka.
(Podałem link do kontynuacji wątku w dziale .NET)

Popularna biblioteka: https://github.com/auth0/angular2-jwt wspiera oba podejścia. Ja kiedyś po prostu trzymałem in-memory w JS (jako closure wiec nie było dostępne), wada taka że nowa tabka wymaga ponownej autentykacji.

Najnowszy owasp poleca żeby to trzymać w sessionStorage (https://cheatsheetseries.owasp.org/cheatsheets/JSON_Web_Token_for_Java_Cheat_Sheet.html#token-storage-on-client-side)

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage