File size: 2,077 Bytes
c0e8080 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
typescript
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react'
interface User {
id: string
name: string
email: string
role: string
avatar?: string
}
interface AuthContextType {
user: User | null
login: (email: string, password: string) => Promise<void>
logout: () => void
isLoading: boolean
}
const AuthContext = createContext<AuthContextType | undefined>(undefined)
export const useAuth = () => {
const context = useContext(AuthContext)
if (context === undefined) {
throw new Error('useAuth must be used within an AuthProvider')
}
return context
}
interface AuthProviderProps {
children: ReactNode
}
export const AuthProvider: React.FC<AuthProviderProps> = ({ children }) => {
const [user, setUser] = useState<User | null>(null)
const [isLoading, setIsLoading] = useState(true)
useEffect(() => {
// Check for stored auth token on app load
const token = localStorage.getItem('auth_token')
if (token) {
// Mock user data - in real app, verify token with backend
setUser({
id: '1',
name: 'John Doe',
email: 'john.doe@company.com',
role: 'admin'
})
}
setIsLoading(false)
}, [])
const login = async (email: string, password: string): Promise<void> => {
setIsLoading(true)
try {
// Mock API call
await new Promise(resolve => setTimeout(resolve, 1000))
if (email === 'admin@mapit.com' && password === 'password') {
const userData: User = {
id: '1',
name: 'John Doe',
email: email,
role: 'admin'
}
setUser(userData)
localStorage.setItem('auth_token', 'mock_jwt_token')
} else {
throw new Error('Invalid credentials')
}
} finally {
setIsLoading(false)
}
}
const logout = () => {
setUser(null)
localStorage.removeItem('auth_token')
}
return (
<AuthContext.Provider value={{ user, login, logout, isLoading }}>
{children}
</AuthContext.Provider>
)
}
</html> |