AuthContext.jsx 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. import React, { createContext, useContext, useState, useEffect } from 'react';
  2. const API_BASE = 'http://localhost:3001/api';
  3. const AuthContext = createContext();
  4. export function useAuth() {
  5. const context = useContext(AuthContext);
  6. if (context === undefined) {
  7. throw new Error('useAuth must be used within an AuthProvider');
  8. }
  9. return context;
  10. }
  11. export function AuthProvider({ children }) {
  12. const [user, setUser] = useState(null);
  13. const [loading, setLoading] = useState(true);
  14. const [error, setError] = useState(null);
  15. // Check if user is already authenticated on app start
  16. useEffect(() => {
  17. checkAuth();
  18. }, []);
  19. const checkAuth = async () => {
  20. try {
  21. const response = await fetch(`${API_BASE}/auth/me`, {
  22. credentials: 'include'
  23. });
  24. if (response.ok) {
  25. const data = await response.json();
  26. setUser(data.user);
  27. } else {
  28. setUser(null);
  29. }
  30. } catch (err) {
  31. console.error('Auth check failed:', err);
  32. setUser(null);
  33. } finally {
  34. setLoading(false);
  35. }
  36. };
  37. const login = async (username, password) => {
  38. try {
  39. setLoading(true);
  40. setError(null);
  41. const response = await fetch(`${API_BASE}/auth/login`, {
  42. method: 'POST',
  43. headers: {
  44. 'Content-Type': 'application/json',
  45. },
  46. credentials: 'include',
  47. body: JSON.stringify({ username, password }),
  48. });
  49. const data = await response.json();
  50. if (response.ok) {
  51. setUser(data.user);
  52. return { success: true };
  53. } else {
  54. setError(data.error || 'Login failed');
  55. return { success: false, error: data.error || 'Login failed' };
  56. }
  57. } catch (err) {
  58. const errorMessage = 'Network error. Please check if the server is running.';
  59. setError(errorMessage);
  60. return { success: false, error: errorMessage };
  61. } finally {
  62. setLoading(false);
  63. }
  64. };
  65. const logout = async () => {
  66. try {
  67. await fetch(`${API_BASE}/auth/logout`, {
  68. method: 'POST',
  69. credentials: 'include',
  70. });
  71. } catch (err) {
  72. console.error('Logout request failed:', err);
  73. } finally {
  74. setUser(null);
  75. setError(null);
  76. }
  77. };
  78. const changePassword = async (currentPassword, newPassword) => {
  79. try {
  80. const response = await fetch(`${API_BASE}/auth/change-password`, {
  81. method: 'POST',
  82. headers: {
  83. 'Content-Type': 'application/json',
  84. },
  85. credentials: 'include',
  86. body: JSON.stringify({ currentPassword, newPassword }),
  87. });
  88. const data = await response.json();
  89. if (response.ok) {
  90. return { success: true, message: data.message };
  91. } else {
  92. return { success: false, error: data.error || 'Password change failed' };
  93. }
  94. } catch (err) {
  95. return { success: false, error: 'Network error. Please try again.' };
  96. }
  97. };
  98. const value = {
  99. user,
  100. loading,
  101. error,
  102. login,
  103. logout,
  104. changePassword,
  105. isAdmin: user?.role === 'admin',
  106. isAuthenticated: !!user,
  107. };
  108. return (
  109. <AuthContext.Provider value={value}>
  110. {children}
  111. </AuthContext.Provider>
  112. );
  113. }