Build a Team Task Manager · Part 2

Add Firebase Authentication

Published 2026-06-12

What you'll build

In this part you'll add full authentication to the task manager — email/password sign-in, Google OAuth, and middleware that protects all routes under /dashboard. Users who aren't signed in are redirected to /login.

By the end of this part your app will have:

A sign-in page at /login with email and Google options
A middleware that protects /dashboard and all routes under it
A sign-out button accessible from the nav bar
Firebase ID tokens stored in a secure HTTP-only cookie

Prerequisites

Part 1 completed — you have a running Next.js 14 project
A Firebase project. If you don't have one yet, go to console.firebase.google.com, click Add project, give it a name, and follow the setup wizard

Set up Firebase

Create a web app

In the Firebase console, open your project and click Add app → Web. Give it a nickname (e.g. task-manager-web). Copy the firebaseConfig object — you'll need it shortly.

Go to Authentication → Sign-in method and enable:

Email/Password — toggle on, save
Google — toggle on, set a support email, save

Add environment variables

Create a .env.local file in your project root:

NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

These variables are read by the browser bundle. The NEXT_PUBLIC_ prefix is required by Next.js to expose them to the client.

Install the Firebase SDK

npm install firebase

Let BlocWeave write the auth layer

With the environment variables in place, describe the complete auth system in one prompt:

BlocWeave prompt

Add Firebase Authentication to this Next.js 14 app. Use the environment variables in .env.local for the Firebase config. Create: 1. src/lib/firebase.ts — initialise the Firebase app and export `auth` 2. src/lib/auth-actions.ts — server actions for sign-in with email/password, sign-in with Google (popup), and sign-out; each action sets or clears a `session` cookie containing the Firebase ID token 3. src/app/login/page.tsx — a login page with an email/password form and a "Continue with Google" button; redirect to /dashboard on success; show an inline error message on failure 4. src/middleware.ts — Next.js middleware that reads the `session` cookie and redirects unauthenticated users from /dashboard and all routes under it to /login; authenticated users visiting /login are redirected to /dashboard Use Tailwind CSS for all UI. Keep forms accessible — label every input.

This prompt gives BlocWeave the full picture: what files to create, what each one does, and how they connect. It will write all four files in a single agent pass.

Review the generated files

After BlocWeave finishes, check each file before accepting:

src/lib/firebase.ts — should initialise the app once using getApps().length to avoid duplicate initialisation in Next.js dev mode.

src/lib/auth-actions.ts — server actions must be marked "use server" at the top. The cookie should be set with httpOnly: true, secure: true, sameSite: "lax".

src/middleware.ts — should match /dashboard/:path* and /dashboard using matcher config. Verify the cookie name matches what auth-actions.ts sets.

src/app/login/page.tsx — should be a client component ("use client") since it handles form state and button clicks.

If anything looks off, describe the issue in a follow-up message — BlocWeave will fix it without rewriting the parts that are correct.

The nav bar from Part 1 shows a static "Sign in" link. Now that auth exists, update it to show the user's email and a sign-out button when they're logged in:

BlocWeave prompt

Update src/components/Navbar.tsx to show different content based on auth state. If the user is signed in (check the `session` cookie in a server component), show their email address and a sign-out button on the right. If they're not signed in, show a "Sign in" link pointing to /login. Use the signOut server action from src/lib/auth-actions.ts for the sign-out button.

Test the flow

Start the dev server:

npm run dev

Walk through both sign-in paths:

Go to http://localhost:3000/dashboard — you should be redirected to /login
Sign in with email/password — you should land on /dashboard
Refresh the page — you should stay on /dashboard (cookie persists)
Click sign out — you should be redirected to /login
Sign in with Google — the OAuth popup should open and redirect you to /dashboard on success

**Google sign-in in development:** Firebase requires the domain to be authorised. Go to Firebase console → Authentication → Settings → Authorised domains and add `localhost` if it's not already there.

Project structure after Part 2

src/
  app/
    dashboard/         ← protected (middleware redirects if no cookie)
    login/
      page.tsx         ← sign-in page
    layout.tsx
    page.tsx
  components/
    Navbar.tsx         ← now auth-aware
  lib/
    firebase.ts        ← Firebase initialisation
    auth-actions.ts    ← server actions: signIn, signInWithGoogle, signOut
  middleware.ts        ← route protection

What's next

In Part 3 we connect Supabase as the database, create the tasks table, and build the CRUD interface — create, read, update, and delete tasks. BlocWeave will generate the Supabase client, database types, and server actions in one pass.

← Previous Next →