Centralizing Identity: Building an AuthContext in React

The Challenge of Distributed Auth

In the beauty-appointment-system project, we recently hit a point where prop-drilling authentication state became a bottleneck. As the application grew, passing user tokens and session data through multiple layers of components began to complicate our architecture. We needed a single source of truth for identity management that was both performant and easy to consume across our feature modules.

Implementation Strategy

To solve this, we moved toward a centralized AuthContext pattern. By leveraging the React Context API, we created a provider that encapsulates the authentication state and lifecycle.

Instead of manual state management in every view, components can now subscribe to the identity context, effectively "plugging in" to the session data as needed. This approach mimics a power grid: the AuthProvider acts as the generator, and individual components act as appliances that draw power only when they are active.

Simplified Provider Pattern

const AuthContext = createContext(null);

export const AuthProvider = ({ children }) => {
  const [user, setUser] = useState(null);
  const [token, setToken] = useState(null);

  const login = (userData, authToken) => {
    setUser(userData);
    setToken(authToken);
  };

  return (
    <AuthContext.Provider value={{ user, token, login }}>
      {children}
    </AuthContext.Provider>
  );
};

Key Benefits

• Decoupling: Components no longer need to know how the token is stored or refreshed.
• Readability: Logic related to user sessions is isolated, keeping feature files cleaner.
• Scalability: Adding new auth-related requirements—like token expiration handling or role-based access—can now be done in one location rather than across the entire codebase.

Takeaway

If you find yourself passing auth tokens through more than two levels of component hierarchy, it is time to lift that state into a Context. Start by creating a dedicated provider to manage your global user identity, and then gradually migrate your authentication hooks to consume this context. Your codebase will be easier to test, refactor, and maintain.

Generated with Gitvlg.com