Authentication

Hi Povilas,

I know you always say you are not a frontend person. I am in the same boat as you. I just do not enjoy frontend. On the contrary, I enjoy backend so much.

However, I have this observation on frontend and storing Access Token on the local storage. A JavaScript tutor once said, "if you can store the token anywhere in the browser (like local storage, for instance), it can be retrieved with JavaScript by hackers".

Perhaps, you could consider doing the next tutorial (on your to-do list) you have on frontend, storing the Access Token in state.

Finally, I must say, I have learnt new tips from this tutorial as I was really anticipating it.

Cheers!

Advice for JS developers: instead of relying on a third-party library to do something simple such as manipulating local storage with state variables for each item, it is not difficult to write such code in your own application - or even copy paste from an open-source library - instead of importing a whole dependency that you're probably not going to use completely.

Here's a free example:

import { useState } from "react";

export default function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const existingValue = window.localStorage.getItem(key);
      return existingValue ? JSON.parse(existingValue) : initialValue;
    } catch (error) {
      console.error(error);
      return initialValue;
    }
  });

  function setValue(newValue) {
    try {
      setStoredValue(newValue);
      window.localStorage.setItem(key, JSON.stringify(newValue));
    } catch (error) {
      console.error(error);
    }
  }

  function removeValue() {
    try {
      setStoredValue(initialValue);
      window.localStorage.removeItem(key);
    } catch (error) {
        console.error(error);
    }
  }

  return [storedValue, setValue, removeValue];
}

There's a little problem with part of the code provided: not all errors returned by an API have http status code - e.g: network errors -, so using error.response.status with the API out-of-air would result in an error of trying to access a property from undefined.

To fix this, the optional chaining operator - recent in new EcmaScript updates - should be applied: error.response?.status.