L11: Add Token to Requests (Interceptors)

// ❌ Add token to every request manually
const getVenues = async () => {
  const response = await api.get('/holidaze/venues', {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });
};

const createVenue = async (data) => {
  const response = await api.post('/holidaze/venues', data, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });
};

// Repeat for every request... tedious!

// ✅ Token added automatically
const getVenues = async () => {
  const response = await api.get('/holidaze/venues');
  // Token included automatically!
};

const createVenue = async (data) => {
  const response = await api.post('/holidaze/venues', data);
  // Token included automatically!
};

Your code:
  api.get('/venues')
    ↓
Request Interceptor:
  Add Authorization header
  Add any other headers
    ↓
Axios sends request:
  GET /venues
  Headers: { Authorization: "Bearer ..." }
    ↓
Server responds:
  200 OK
  { data: [...] }
    ↓
Response Interceptor:
  Process response
  Handle errors
    ↓
Your code receives:
  response.data

// 1. Request Interceptor (BEFORE sending)
api.interceptors.request.use(
  config => {
    // Modify request before sending
    return config;
  },
  error => {
    // Handle request error
    return Promise.reject(error);
  }
);

// 2. Response Interceptor (AFTER receiving)
api.interceptors.response.use(
  response => {
    // Process successful response
    return response;
  },
  error => {
    // Handle response error
    return Promise.reject(error);
  }
);

// Singleton pattern to store token in memory
let currentToken = null;

export const tokenStore = {
  getToken: () => currentToken,
  
  setToken: (token) => {
    currentToken = token;
  },
  
  clearToken: () => {
    currentToken = null;
  },
};

import axios from 'axios';
import { tokenStore } from './tokenStore';

const api = axios.create({
  baseURL: 'https://v2.api.noroff.dev',
  headers: {
    'Content-Type': 'application/json',
  },
  withCredentials: true,
});

// REQUEST INTERCEPTOR: Add token to every request
api.interceptors.request.use(
  (config) => {
    const token = tokenStore.getToken();
    
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// RESPONSE INTERCEPTOR: Handle errors
api.interceptors.response.use(
  (response) => {
    // Pass through successful responses
    return response;
  },
  (error) => {
    // Log errors for debugging
    console.error('API Error:', error.response?.data || error.message);
    
    // Pass error to calling code
    return Promise.reject(error);
  }
);

export default api;

import { createContext, useContext, useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import api from '@/lib/api';
import { tokenStore } from '@/lib/tokenStore';

const AuthContext = createContext(undefined);

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (context === undefined) {
    throw new Error('useAuth must be used within AuthProvider');
  }
  return context;
};

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [token, setToken] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const navigate = useNavigate();

  // Sync token with tokenStore whenever it changes
  useEffect(() => {
    if (token) {
      tokenStore.setToken(token);
    } else {
      tokenStore.clearToken();
    }
  }, [token]);

  // Fetch token on mount
  useEffect(() => {
    const fetchToken = async () => {
      try {
        const response = await api.get('/auth/refresh');
        const { accessToken, data } = response.data;
        setToken(accessToken);
        setUser(data);
      } catch (error) {
        console.log('No valid session');
      } finally {
        setIsLoading(false);
      }
    };
    fetchToken();
  }, []);

  // Sign in
  const signIn = async (email, password) => {
    try {
      const response = await api.post('/auth/login', {
        email,
        password,
      });

      const { accessToken, data } = response.data;
      setToken(accessToken);
      setUser(data);
      navigate('/');

      return { success: true };
    } catch (error) {
      const message = error.response?.data?.errors?.[0]?.message 
        || 'Invalid email or password';
      return { success: false, error: message };
    }
  };

  // Sign out
  const signOut = async () => {
    try {
      await api.post('/auth/logout');
    } catch (error) {
      console.error('Logout error:', error);
    } finally {
      setUser(null);
      setToken(null);
      navigate('/sign-in');
    }
  };

  const value = { user, token, isLoading, signIn, signOut };
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};

import { useEffect, useState } from 'react';
import { useAuth } from '@/contexts/AuthContext';
import api from '@/lib/api';

function HomePage() {
  const { user } = useAuth();
  const [venues, setVenues] = useState([]);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (user) {
      fetchVenues();
    }
  }, [user]);

  const fetchVenues = async () => {
    setLoading(true);
    try {
      // Token automatically included via interceptor!
      const response = await api.get('/holidaze/venues');
      setVenues(response.data.data);
    } catch (error) {
      console.error('Failed to fetch venues:', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="home-page">
      <h1>Welcome {user ? user.name : 'Guest'}!</h1>
      
      {loading && <p>Loading venues...</p>}
      
      {venues.length > 0 && (
        <div className="venues-grid">
          {venues.map(venue => (
            <div key={venue.id} className="venue-card">
              <h3>{venue.name}</h3>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

export default HomePage;