L12: Refresh Token When Expired

User signs in
  ↓
Access token: Valid for 15 minutes
  ↓
User browses site (10 minutes)
  ↓
Access token still valid → Requests succeed ✅
  ↓
User continues browsing (20 minutes total)
  ↓
Access token expired → Requests fail with 401 ❌
  ↓
Without auto-refresh: User must sign in again 😞
With auto-refresh: Token refreshes automatically 😊

// Access Token (short-lived)
{
  token: "eyJhbGc...",
  expiresIn: 900,     // 15 minutes
  storage: "memory",  // JavaScript variable
  purpose: "API requests"
}

// Refresh Token (long-lived)
{
  token: "eyJhbGc...",
  expiresIn: 2592000,        // 30 days
  storage: "HTTP-only cookie", // Secure cookie
  purpose: "Get new access token"
}

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,
});

// Track if we're currently refreshing
let isRefreshing = false;
let failedQueue = [];

// Process failed requests after refresh
const processQueue = (error, token = null) => {
  failedQueue.forEach(prom => {
    if (error) {
      prom.reject(error);
    } else {
      prom.resolve(token);
    }
  });
  
  failedQueue = [];
};

// REQUEST INTERCEPTOR
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 with auto-refresh
api.interceptors.response.use(
  (response) => {
    return response;
  },
  async (error) => {
    const originalRequest = error.config;

    // Check if error is 401 and we haven't retried yet
    if (error.response?.status === 401 && !originalRequest._retry) {
      if (isRefreshing) {
        // Already refreshing, queue this request
        return new Promise((resolve, reject) => {
          failedQueue.push({ resolve, reject });
        })
          .then(token => {
            originalRequest.headers.Authorization = `Bearer ${token}`;
            return api(originalRequest);
          })
          .catch(err => {
            return Promise.reject(err);
          });
      }

      originalRequest._retry = true;
      isRefreshing = true;

      try {
        // Request new access token
        const response = await api.get('/auth/refresh');
        const { accessToken } = response.data;

        // Update token store
        tokenStore.setToken(accessToken);

        // Update original request with new token
        originalRequest.headers.Authorization = `Bearer ${accessToken}`;

        // Process queued requests
        processQueue(null, accessToken);

        // Retry original request
        return api(originalRequest);
      } catch (refreshError) {
        // Refresh failed, sign out user
        processQueue(refreshError, null);
        tokenStore.clearToken();
        
        // Redirect to sign-in (if in browser context)
        if (typeof window !== 'undefined') {
          window.location.href = '/sign-in';
        }
        
        return Promise.reject(refreshError);
      } finally {
        isRefreshing = false;
      }
    }

    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
  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();
  }, []);

  // Update token (can be called from outside)
  const updateToken = (newToken) => {
    setToken(newToken);
  };

  // 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, updateToken };
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};