# Frontend Integration Example

## React + Clerk Setup

### 1. Login Flow (After Clerk Sign-In)

```javascript
import { useUser } from "@clerk/clerk-react";
import axios from "axios";

function LoginHandler() {
  const { user, isSignedIn } = useUser();

  useEffect(() => {
    if (isSignedIn && user) {
      handleBackendLogin();
    }
  }, [isSignedIn, user]);

  const handleBackendLogin = async () => {
    try {
      const userData = {
        user_type: "direct_client",
        clerk_user_id: user.id,
        email: user.primaryEmailAddress?.emailAddress,
        first_name: user.firstName,
        last_name: user.lastName,
        full_name: user.fullName,
        image_url: user.imageUrl,
      };

      const response = await axios.post(
        "http://localhost:5000/api/auth/login",
        userData
      );

      // Store JWT token
      const { token, user: dbUser, account } = response.data.data;
      localStorage.setItem("token", token);
      
      // Set default auth header for all future requests
      axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;

      console.log("Logged in:", dbUser);
      console.log("Account:", account);
    } catch (error) {
      console.error("Backend login failed:", error);
    }
  };

  return null;
}
```

### 2. Making Authenticated API Calls (JWT)

```javascript
// Create location example
const createLocation = async (locationData) => {
  try {
    const token = localStorage.getItem("token");
    
    const response = await axios.post(
      "http://localhost:5000/api/locations",
      locationData,
      {
        headers: {
          Authorization: `Bearer ${token}`
        }
      }
    );

    return response.data;
  } catch (error) {
    console.error("Error creating location:", error);
    throw error;
  }
};
```

### 3. Alternative: Using Clerk Session Token (Optional)

```javascript
import { useAuth } from "@clerk/clerk-react";

function useClerkAPI() {
  const { getToken } = useAuth();

  const createLocation = async (locationData) => {
    try {
      // Get Clerk session token
      const clerkToken = await getToken();
      
      const response = await axios.post(
        "http://localhost:5000/api/locations",
        locationData,
        {
          headers: {
            Authorization: `Bearer ${clerkToken}`
          }
        }
      );

      return response.data;
    } catch (error) {
      console.error("Error creating location:", error);
      throw error;
    }
  };

  return { createLocation };
}
```

## Axios Interceptor Setup (Recommended)

```javascript
// src/api/axios.js
import axios from "axios";

const api = axios.create({
  baseURL: "http://localhost:5000/api",
});

// Add token to all requests
api.interceptors.request.use(
  (config) => {
    const token = localStorage.getItem("token");
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// Handle 401 errors (token expired)
api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response?.status === 401) {
      // Token expired or invalid
      localStorage.removeItem("token");
      window.location.href = "/login";
    }
    return Promise.reject(error);
  }
);

export default api;
```

### Usage with Interceptor

```javascript
import api from "./api/axios";

// No need to manually add token - interceptor handles it
const createLocation = async (locationData) => {
  const response = await api.post("/locations", locationData);
  return response.data;
};
```

## Complete App.jsx Example

```javascript
import { ClerkProvider, SignedIn, SignedOut, useUser } from "@clerk/clerk-react";
import { useEffect } from "react";
import axios from "axios";

const CLERK_PUBLISHABLE_KEY = "pk_test_dmFsaWQta2FuZ2Fyb28tOTguY2xlcmsuYWNjb3VudHMuZGV2JA";

function App() {
  return (
    <ClerkProvider publishableKey={CLERK_PUBLISHABLE_KEY}>
      <SignedIn>
        <Dashboard />
      </SignedIn>
      <SignedOut>
        <Login />
      </SignedOut>
    </ClerkProvider>
  );
}

function Dashboard() {
  const { user } = useUser();

  useEffect(() => {
    // Auto-login to backend when Clerk session is active
    loginToBackend();
  }, []);

  const loginToBackend = async () => {
    try {
      const response = await axios.post("http://localhost:5000/api/auth/login", {
        user_type: "direct_client",
        clerk_user_id: user.id,
        email: user.primaryEmailAddress?.emailAddress,
        first_name: user.firstName,
        last_name: user.lastName,
        full_name: user.fullName,
        image_url: user.imageUrl,
      });

      localStorage.setItem("token", response.data.data.token);
      axios.defaults.headers.common["Authorization"] = `Bearer ${response.data.data.token}`;
    } catch (error) {
      console.error("Backend login failed:", error);
    }
  };

  return <div>Welcome, {user.fullName}!</div>;
}

export default App;
```