• Why cookies are better than local storage to store auth tokens

  For years I’ve been keeping my auth and session tokens in the local storage. This strategy has many shortcomings:

  1- You need to explicitly manage the writing and reading of the token from the local storage 2- Once you store the token in the local storage, the obvious choice to send it back to the server is inside an auth header, eg: “Authorization: bearer ". Unfortunately you can add an header only to HTTP calls made with JavaScript, not calls made by the browser itself to static resource. So, for instance, if you need to protect your images with a token, you cannot just drop an `img` tag in the page with an `src` attribute. The browser would not sent any token. You are forced to use an horrible workaround, like putting the token in the image URL's query string. 3- Local storage can be accessed by JavaScript, that exposes the token to possible [XSS attacks](https://owasp.org/www-community/attacks/xss/) 4- Local storage does not expires. Either you choose session storage, and the information is wiped out at every session, or choose local storage and the information sits there forever, until is not explicitly removed by the user. Ok, the token duration should be handled by the token emitter, but having more control on token expiration on the cline side is not bad.

  All this problems can be, not only solved, but entirely avoided just by keeping the token in a cookie.

• How to use the <dialog> element in React

  To render a modal in React I usually use (material ui)[https://mui.com/core] or (react-modal)[https://github.com/reactjs/react-modal]. Today I came across a (nasty bug)[https://github.com/wojtekmaj/react-date-picker/issues/415] that happens to react-date-picker when it is rendered inside a modal created by react-modal. The only solution I found is to remove react-modal. So I took a look at the (native

  element)[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog] and apparently it works quite well, it is accessible, has a strong browser support and it works as ma modal is supposed to work: it opens on top of the content and prevents any interaction with that content.

• How to integrate Google Maps into React

  Sure, you can use an npm package to integrate Google Maps into a React application, but you can easily do it by yourself and avoid a dependency that must be maintained during the project lifetime.

• Event listeners run only once

  If you want to add an event listener and run it only once, you can use the once option.

  element.addEventListener('click', () => console.log('I run only once'), {
    once: true,
  })
  

• Copy to clipboard

  You can use the Clipboard API to create a “Copy to Clipboard” function.

  function copyToClipboard(text) {
    navigator.clipboard.writeText(text)
  }
  

• How to setup a react project with Vite

  I’ve been using Create React App for years now. I didn’t want to deal with the Webpack configuration. Usually I’m not a fan of tooling, I just want to code and get things done.

  More often than not you need to apply some customization to Create React App, and that is not possible out of the box. You need to use tools like Craco or React App Rewired. This can be troublesome because they are not always in sync with the CRA releases, but usually, with a minimum effort, you can bend CRA just enough to suite your needs.

  But in the last six months I hit a limitation of Create React App that I could not override without ejecting. CRA doesn’t allow imports outside of the src folder, and the dev server doesn’t update when a dependency in the node_modules folder changes. This is a problem when you work in a monorepo project. For instance, if you have a monorepo with this folders:

    |
    +- Packages
      +- Components
      +- App1
      +- App2
  

  You want your dev server to update App1 and App2 whenever the components they import from the Components folder change.

  I couldn’t find a way to achieve this with CRA, if you know how, please drop me a note in comments.

  So I began experimenting alternative solutions to CRA. I played with Vite in a project using solid js and I decided to give it a try.

  I discovered that bootstrapping a React project with vite is quite easy and, all in all doesn’t require much more work than with CRA.

  This is my recipe. It is quite long, but the only actually required step is the first one. All the others are optional and depends on your desired setup. Almost all of them, except the 3 and 4, are required also with CRA.