Auth Provider

Detailed Explanation

An Auth Provider is a Component that wraps your entire React app and manages Authentication state using React Context. It tracks whether a user is logged in or out and provides that information to any Component that needs it.

The Auth Provider pattern typically:

1. Checks for an existing Session when the app loads
2. Listens for auth state changes using onAuthStateChange
3. Provides a useAuth Hook so any component can access the current user, loading state, and logout function

In code, you wrap your app with the provider:

<AuthProvider>
  <App />
</AuthProvider>

Then any child component can use const { user, loading, logout } = useAuth() to access auth state. This avoids passing user data through Props at every level of your component tree.