Access Token

Some information on a website should be prohibited to users who have logged in, and other information should be open to the public. How does a website channel different page views to users with different status?
As mentioned before, any HTTP communication is stateless. Therefore, the only way for the front end side to know whether the client has logged in or not and is authorized to view some information is by using the access token.
An access token contains unique user information that can be used to identify a specific user data in the database. An access token can be decoded (it is not one-way hashing), so user password, username, phone number and any other sensitive information should not be contained in the token. Instead, a user ID number is usually stored in the token, which was automatically created when the user was first added to User data table.

Login

1. A user types in his or her id and password on the login page.
2. Frontend stores these information in HTTP request body and sends them to backend.
3. Backend checks whether the provided information actually matches a real user data. If it does, backend returns an HTTP response with a jwt stored in the body.
4. Frontend stores jwt in the browser. When the user later calls an API, an HTTP request is sent from frontend along with the token in the request header.

Local storage

The data stored in localStorage persists until explicitly deleted. Changes made are saved and available for all current and future visits to the site.

Session storage

Changes are only available per window (or tab in browsers like Chrome). Changes made are saved and available for the current page, as well as future visits to the site on the same window. Once the window is closed, the storage is deleted.

Cookie

Expiration time can be set for each cookie. It is much smaller in memory, 4KB limit available for the entire cookie incuding name, value, expiry date, etc. This data is sent back to the server for every HTTP request, which can increase the amount of traffic between client and the server. (web storages above are not sent back to the server for every request)

Backend can decide for how long an access token will be effective for. Don't make the cookie do this part.

If you want the user to login just once, store the access token in the local storage. When storing, use the setItem('token_name', response.token) method.

Storing an access token in the local storage after logging in

fetch('http://localhost:8000/login/', {
  method: 'POST',
  headers: {
      'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    'id': 'kim',
    'password': '1234'
  })
})
.then(response => response.json())
.then(response => {
  if (response.token) {
    localStorage.setItem('wtw-token', response.token);
  }
})

Adding the token to request header

let token = localStorage.getItem('wtw-token') || '';

fetch('http://localhost:8000/likes/', {
  headers: {
      'Authorization': token,
  }
})
.then(response => response.json())
.then(response => {
   console.log(response.data);
})

Other methods that can replace fetch()

(1) Async/Await
(2) Axios