import { createContext, useContext, useState, useEffect } from 'react'; import api from '../api/axios'; import { useNavigate } from 'react-router-dom'; const AuthContext = createContext(null); export const AuthProvider = ({ children }) => { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const navigate = useNavigate(); useEffect(() => { checkUser(); }, []); const checkUser = async () => { const token = localStorage.getItem('access_token'); if (token) { try { const response = await api.get('auth/profile/'); setUser(response.data); } catch (error) { // Token might be invalid or expired (and refresh failed) localStorage.removeItem('access_token'); localStorage.removeItem('refresh_token'); setUser(null); } } setLoading(false); }; const login = async (username, password) => { const response = await api.post('auth/login/', { username, password }); localStorage.setItem('access_token', response.data.access); localStorage.setItem('refresh_token', response.data.refresh); await checkUser(); navigate('/dashboard'); }; const register = async (username, email, password) => { const response = await api.post('auth/register/', { username, email, password }); // Auto-login with the tokens returned from registration localStorage.setItem('access_token', response.data.access); localStorage.setItem('refresh_token', response.data.refresh); setUser(response.data.user); navigate('/dashboard'); }; const logout = () => { localStorage.removeItem('access_token'); localStorage.removeItem('refresh_token'); setUser(null); navigate('/'); }; return ( {!loading && children} ); }; export const useAuth = () => useContext(AuthContext);