feat: add login page and auth logic

client/src/api/api.ts

@@ -1,5 +1,8 @@
 import axios from 'axios';
 import { Access, Auth } from '../types/auth';
+import { User } from '../types/user';
+import { AuthService } from '../services/auth';
+import axiosRetry from 'axios-retry';
 
 const baseURL = `${process.env.REACT_APP_HTTP_PROTOCOL}://${process.env.REACT_APP_API_URL}/api/v1`;
 
@@ -11,20 +14,75 @@ const base = axios.create({
   },
 });
 
-// base.interceptors.request.use((config) => {
-//   const token = localStorage.getItem('accessToken');
-//   if (token) {
-//     config.headers.Authorization = `Bearer ${token}`;
-//   }
-//   return config;
-// });
+base.interceptors.request.use((config) => {
+  const token = localStorage.getItem('accessToken');
+  if (token) {
+    config.headers.Authorization = `Bearer ${token}`;
+  }
+  return config;
+});
+
+axiosRetry(base, {
+  retries: 3,
+  retryDelay: (retryCount: number) => {
+    console.log(`retry attempt: ${retryCount}`);
+    return retryCount * 2000;
+  },
+  retryCondition: async (error: any) => {
+    if (error.code === 'ERR_CANCELED') {
+      return true;
+    }
+    return false;
+  },
+});
+
+base.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  async function (error) {
+    console.log('error', error);
+    const originalRequest = error.response.config;
+    console.log('originalRequest._retry', originalRequest);
+    const urlTokens = error?.request?.responseURL.split('/');
+    const url = urlTokens[urlTokens.length - 1];
+    console.log('url', url);
+    if (
+      error.response.status === 401 &&
+      !(originalRequest?._retry != null) &&
+      url !== 'login' &&
+      url !== 'refresh' &&
+      url !== 'logout'
+    ) {
+      originalRequest._retry = true;
+      const res = await AuthService.refresh().catch(async () => {
+        await AuthService.logout();
+      });
+      console.log('res', res);
+      return await base(originalRequest);
+    }
+    return await Promise.reject(error);
+  }
+);
 
 const api = {
+  // auth
   async login(auth: Auth): Promise<Access> {
     console.log(auth);
     const response = await base.post<Access>('/auth', auth);
     return response.data;
   },
+
+  async refreshToken(): Promise<Access> {
+    const response = await base.post<Access>('/auth/refresh');
+    return response.data;
+  },
+
+  // user
+  async getProfile(): Promise<User> {
+    const response = await base.get<User>('/profile');
+    return response.data;
+  },
 };
 
 export default api;