import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react'
import { User } from '@/types'
import api from '@/services/api'
interface AuthContextType {
user: User | null
loading: boolean
login: (email: string, password: string) => Promise<void>
logout: () => void
isAuthenticated: boolean
}
const AuthContext = createContext<AuthContextType | undefined>(undefined)
export function AuthProvider({ children }: { children: ReactNode }) {
const [user, setUser] = useState<User | null>(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
const token = localStorage.getItem('authToken')
if (token) {
fetchCurrentUser()
} else {
setLoading(false)
}
}, [])
const fetchCurrentUser = async () => {
try {
const { data } = await api.get<User>('/auth/me')
setUser(data)
} catch (error) {
localStorage.removeItem('authToken')
} finally {
setLoading(false)
}
}
const login = async (email: string, password: string) => {
const { data } = await api.post<{ user: User; token: string }>('/auth/login', {
email,
password,
})
localStorage.setItem('authToken', data.token)
setUser(data.user)
}
const logout = () => {
localStorage.removeItem('authToken')
setUser(null)
}
return (
<AuthContext.Provider
value={{
user,
loading,
login,
logout,
isAuthenticated: !!user,
}}
>
{children}
</AuthContext.Provider>
)
}
export function useAuth() {
const context = useContext(AuthContext)
if (context === undefined) {
throw new Error('useAuth must be used within an AuthProvider')
}
return context
}
While React Query handles server state, I use Context API for client-side UI state like theme, sidebar visibility, or current user. Each context lives in its own file with a custom hook for consuming it. The context provider wraps the app at a high level and provides both state and updater functions. I avoid putting too much in context—only truly global state belongs here. For component-local state that's shared with a few children, prop drilling or composition is clearer. The useReducer hook works well for complex state transitions within a context. This pattern gives centralized state management without Redux's boilerplate for simple use cases.
