MVP Build

frontend/src/core/api/client.ts

@@ -0,0 +1,47 @@
+/**
+ * @ai-summary Axios client configuration for API calls
+ * @ai-context Handles auth tokens and error responses
+ */
+
+import axios, { AxiosInstance, InternalAxiosRequestConfig } from 'axios';
+import toast from 'react-hot-toast';
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || '/api';
+
+export const apiClient: AxiosInstance = axios.create({
+  baseURL: API_BASE_URL,
+  timeout: 10000,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+// Request interceptor for auth token
+apiClient.interceptors.request.use(
+  async (config: InternalAxiosRequestConfig) => {
+    // Token will be added by Auth0 wrapper
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// Response interceptor for error handling
+apiClient.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      // Handle unauthorized - Auth0 will redirect to login
+      toast.error('Session expired. Please login again.');
+    } else if (error.response?.status === 403) {
+      toast.error('You do not have permission to perform this action.');
+    } else if (error.response?.status >= 500) {
+      toast.error('Server error. Please try again later.');
+    }
+    
+    return Promise.reject(error);
+  }
+);
+
+export default apiClient;

frontend/src/core/auth/Auth0Provider.tsx

@@ -0,0 +1,61 @@
+/**
+ * @ai-summary Auth0 provider wrapper with API token injection
+ */
+
+import React from 'react';
+import { Auth0Provider as BaseAuth0Provider, useAuth0 } from '@auth0/auth0-react';
+import { useNavigate } from 'react-router-dom';
+import { apiClient } from '../api/client';
+
+interface Auth0ProviderProps {
+  children: React.ReactNode;
+}
+
+export const Auth0Provider: React.FC<Auth0ProviderProps> = ({ children }) => {
+  const navigate = useNavigate();
+
+  const domain = import.meta.env.VITE_AUTH0_DOMAIN;
+  const clientId = import.meta.env.VITE_AUTH0_CLIENT_ID;
+  const audience = import.meta.env.VITE_AUTH0_AUDIENCE;
+
+  const onRedirectCallback = (appState?: { returnTo?: string }) => {
+    navigate(appState?.returnTo || '/dashboard');
+  };
+
+  return (
+    <BaseAuth0Provider
+      domain={domain}
+      clientId={clientId}
+      authorizationParams={{
+        redirect_uri: window.location.origin,
+        audience: audience,
+      }}
+      onRedirectCallback={onRedirectCallback}
+      cacheLocation="localstorage"
+    >
+      <TokenInjector>{children}</TokenInjector>
+    </BaseAuth0Provider>
+  );
+};
+
+// Component to inject token into API client
+const TokenInjector: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const { getAccessTokenSilently, isAuthenticated } = useAuth0();
+
+  React.useEffect(() => {
+    if (isAuthenticated) {
+      // Add token to all API requests
+      apiClient.interceptors.request.use(async (config) => {
+        try {
+          const token = await getAccessTokenSilently();
+          config.headers.Authorization = `Bearer ${token}`;
+        } catch (error) {
+          console.error('Failed to get access token:', error);
+        }
+        return config;
+      });
+    }
+  }, [isAuthenticated, getAccessTokenSilently]);
+
+  return <>{children}</>;
+};

frontend/src/core/store/index.ts

@@ -0,0 +1,54 @@
+/**
+ * @ai-summary Global state management with Zustand
+ * @ai-context Minimal global state, features manage their own state
+ */
+
+import { create } from 'zustand';
+import { devtools, persist } from 'zustand/middleware';
+
+interface User {
+  id: string;
+  email: string;
+  name?: string;
+}
+
+interface AppState {
+  // User state
+  user: User | null;
+  setUser: (user: User | null) => void;
+  
+  // UI state
+  sidebarOpen: boolean;
+  toggleSidebar: () => void;
+  
+  // Selected vehicle (for context)
+  selectedVehicleId: string | null;
+  setSelectedVehicle: (id: string | null) => void;
+}
+
+export const useAppStore = create<AppState>()(
+  devtools(
+    persist(
+      (set) => ({
+        // User state
+        user: null,
+        setUser: (user) => set({ user }),
+        
+        // UI state
+        sidebarOpen: true,
+        toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
+        
+        // Selected vehicle
+        selectedVehicleId: null,
+        setSelectedVehicle: (vehicleId) => set({ selectedVehicleId: vehicleId }),
+      }),
+      {
+        name: 'motovaultpro-storage',
+        partialize: (state) => ({
+          selectedVehicleId: state.selectedVehicleId,
+          sidebarOpen: state.sidebarOpen,
+        }),
+      }
+    )
+  )
+);