example frontend-backend communication

SerpentRace_Frontend/src/api/userApi.js

@@ -0,0 +1,67 @@
+import axios from 'axios';
+
+
+export const API_CONFIG = {
+  baseURL: import.meta.env.VITE_API_URL+'/api',
+  wsURL: 'http://localhost:3000',
+  timeout: 10000,
+  retryAttempts: 3
+};
+
+const apiClient = axios.create({
+  baseURL: API_CONFIG.baseURL,
+  timeout: API_CONFIG.timeout,
+  withCredentials: true, // Important for cookie-based auth
+  headers: {
+    'Content-Type': 'application/json'
+  }
+});
+
+
+// Add request interceptor for debugging
+apiClient.interceptors.request.use(
+  (config) => {
+    console.log('Request URL:', config.url);
+    console.log('Request headers:', config.headers);
+    console.log('Current cookies:', document.cookie);
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// Add response interceptor for debugging cookies
+apiClient.interceptors.response.use(
+  (response) => {
+    console.log('Response status:', response.status);
+    console.log('Response headers:', response.headers);
+    console.log('Set-Cookie headers:', response.headers['set-cookie']);
+    console.log('Cookies after response:', document.cookie);
+    return response;
+  },
+  (error) => {
+    console.error('API Error:', error.response?.data || error.message);
+    return Promise.reject(error);
+  }
+);
+
+//login
+export const login = async (username, password) => {
+    try {
+        const response = await apiClient.post('/users/login', { username, password });
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+};
+
+//register
+export const register = async (username, email, password, fname, lname, phone) => {
+    try {
+        const response = await apiClient.post('/users/create', { username, email, password, fname, lname, phone });
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+};