Firebase Authentication Setup

Firebase Authentication Implementation

SoloType uses Firebase Authentication to handle user sign-up, sign-in, and session management.

Key Components

1. Firebase Configuration (lib/firebase/config.ts):
   • Initializes the Firebase application using credentials stored securely in environment variables (.env.local for local development, loaded from Azure App Settings in production).
   • Exports the necessary Firebase auth instance for use throughout the application.
2. Authentication Context (context/auth-context.tsx):
   • Provides a global context (AuthProvider) that wraps the application (in components/client-layout.tsx).
   • Uses the onAuthStateChanged listener from the Firebase SDK to track the user's real-time authentication state.
   • Manages user (Firebase User object or null) and loading state.
   • Exposes functions (signIn, signUp, signInWithGoogle, signOut) via the useAuth hook, which wrap the core Firebase SDK authentication methods.
   • Includes basic error handling.
3. UI Integration:
   • Header (components/header.tsx): Uses the useAuth hook to conditionally display "Sign In"/"Sign Up" links (using next/link) or user information (email) and a "Sign Out" button/dropdown item.
   • Login Page (app/login/page.tsx): Contains a form that uses the signIn function from the context for email/password login and the signInWithGoogle function for Google Sign-In. Handles form state, errors, and redirection on success.
   • Signup Page (app/signup/page.tsx): Contains a form that uses the signUp function from the context for email/password registration and signInWithGoogle. Handles form state, errors, and redirection on success.

This setup allows users to authenticate using Email/Password or their Google account, with their session state managed centrally via the React Context and Firebase SDK.

---