authentication-and-security-patterns

🔐 Authentication & Security Patterns

🚀 Essential Authentication Architecture

JWT-Based Authentication Flow

// Complete authentication workflow
class APIClient {
  constructor() {
    const apiUrl = import.meta.env?.VITE_API_URL || 'http://localhost:8080/api/v1';
    console.log('🔧 API Client baseURL:', apiUrl);
    
    this.client = axios.create({
      baseURL: apiUrl,
      timeout: 30000,
      headers: { 'Content-Type': 'application/json' }
    });

    // Auto-attach token from localStorage
    this.loadStoredAuth();
  }

  private loadStoredAuth(): void {
    const token = localStorage.getItem('pos_token');
    if (token) {
      this.client.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    }
  }

  setAuthToken(token: string): void {
    localStorage.setItem('pos_token', token);
    this.client.defaults.headers.common['Authorization'] = `Bearer ${token}`;
  }

  clearAuth(): void {
    localStorage.removeItem('pos_token');
    localStorage.removeItem('pos_user');
    delete this.client.defaults.headers.common['Authorization'];
  }

  isAuthenticated(): boolean {
    return !!localStorage.getItem('pos_token');
  }
}

🏗️ React Authentication Components

Protected Route Pattern (Avoid Infinite Redirects)

function HomePage() {
  // ✅ ALL HOOKS AT TOP LEVEL - NEVER after returns
  const [user, setUser] = useState<User | null>(null);
  const [isLoadingAuth, setIsLoadingAuth] = useState(true); // Critical: Start true

  const { isLoading: isVerifying, error } = useQuery({
    queryKey: ['currentUser'],
    queryFn: () => apiClient.getCurrentUser(),
    enabled: false, // Control when to verify
    retry: 1,
  });

  // Load auth state from localStorage FIRST
  useEffect(() => {
    const loadAuthState = async () => {
      const token = localStorage.getItem('pos_token');
      const storedUser = localStorage.getItem('pos_user');
      
      console.log('🔍 Loading auth - token:', token ? 'exists' : 'missing');
      console.log('🔍 Loading auth - user:', storedUser ? 'exists' : 'missing');
      
      if (storedUser && token) {
        try {
          const parsedUser = JSON.parse(storedUser);
          setUser(parsedUser);
          console.log('✅ Auth loaded - user role:', parsedUser.role);
        } catch (error) {
          console.error('❌ Invalid stored auth data, clearing');
          apiClient.clearAuth();
        }
      }
      
      setIsLoadingAuth(false);
    };
    
    loadAuthState();
  }, []);

  // ✅ CRITICAL: Wait for localStorage loading before auth checks
  if (isLoadingAuth) {
    return <LoadingSpinner message="Loading authentication..." />;
  }

  // Only check auth AFTER loading is complete
  if (!apiClient.isAuthenticated() || !user) {
    console.log('🔄 Not authenticated, redirecting to login');
    return <Navigate to="/login" replace />;
  }

  // Render protected content with user context
  return <RoleBasedLayout user={user} />;
}