Firebase Logo
Firebase Starter Setup
Follow these steps to set up your Firebase project

Step 1: Create a Firebase Project

  1. Go to the Firebase Console
  2. Click "Add project" and follow the setup steps
  3. Enable Authentication with Email/Password provider
  4. Enable Google Sign-In provider in Authentication settings
  5. Create a Firestore database in test mode
  6. Set up Firebase Storage if needed

Step 2: Configure Google Authentication

  1. In Firebase Console, go to Authentication → Sign-in method
  2. Enable Google provider
  3. Add your domain to authorized domains (for production)
  4. Copy the Web client ID if you need additional Google API access

Step 3: Register Your Web App

  1. In your Firebase project, click the web icon (<>) to add a web app
  2. Register your app with a nickname
  3. Copy the Firebase configuration object

Firebase Configuration Guide

To use this starter, you need to add your Firebase configuration to your environment variables.

Add the following to your .env.local file:

NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_storage_bucket
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=your_measurement_id

You can find these values in your Firebase project settings.

Step 5: Run Your Application

  1. Start your development server with npm run dev
  2. Visit http://localhost:3000 to see your app
  3. Try signing up and signing in with email/password or Google