Authentication Patterns in JavaScript

// Bearer token authentication
const api = axios.create({
  baseURL: 'https://api.example.com'
});

api.interceptors.request.use((config) => {
  const token = localStorage.getItem('accessToken');
  if (token) {
    config.headers.Authorization = \`Bearer \${token}\`;
  }
  return config;
});

// Token refresh on 401
api.interceptors.response.use(
  (response) => response,
  async (error) => {
    const originalRequest = error.config;

    if (error.response?.status === 401 && !originalRequest._retry) {
      originalRequest._retry = true;

      const refreshToken = localStorage.getItem('refreshToken');
      const { data } = await axios.post('/auth/refresh', {
        refreshToken
      });

      localStorage.setItem('accessToken', data.accessToken);
      originalRequest.headers.Authorization = \`Bearer \${data.accessToken}\`;

      return api(originalRequest);
    }

    return Promise.reject(error);
  }
);