How to Use Firebase Auth with Next.js

1// lib/firebase.ts
2import { initializeApp, getApps } from 'firebase/app';
3import { getAuth } from 'firebase/auth';
4
5const firebaseConfig = {
6  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
7  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
8  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
9  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
10  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
11  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
12};
13
14// Prevent re-initialization in hot reload
15const app = getApps().length === 0 ? initializeApp(firebaseConfig) : getApps()[0];
16export const auth = getAuth(app);
17export default app;

1// lib/firebase-admin.ts
2import { initializeApp, getApps, cert } from 'firebase-admin/app';
3import { getAuth } from 'firebase-admin/auth';
4
5const adminApp =
6  getApps().length === 0
7    ? initializeApp({
8        credential: cert({
9          projectId: process.env.FIREBASE_PROJECT_ID,
10          clientEmail: process.env.FIREBASE_CLIENT_EMAIL,
11          privateKey: process.env.FIREBASE_PRIVATE_KEY?.replace(/\\n/g, '\n'),
12        }),
13      })
14    : getApps()[0];
15
16export const adminAuth = getAuth(adminApp);

1'use client';
2
3import { createContext, useContext, useEffect, useState } from 'react';
4import { onAuthStateChanged, User } from 'firebase/auth';
5import { auth } from '@/lib/firebase';
6
7interface AuthContextType {
8  user: User | null;
9  loading: boolean;
10}
11
12const AuthContext = createContext<AuthContextType>({
13  user: null,
14  loading: true,
15});
16
17export function AuthProvider({ children }: { children: React.ReactNode }) {
18  const [user, setUser] = useState<User | null>(null);
19  const [loading, setLoading] = useState(true);
20
21  useEffect(() => {
22    const unsubscribe = onAuthStateChanged(auth, (user) => {
23      setUser(user);
24      setLoading(false);
25    });
26    return unsubscribe;
27  }, []);
28
29  return (
30    <AuthContext.Provider value={{ user, loading }}>
31      {children}
32    </AuthContext.Provider>
33  );
34}
35
36export const useAuth = () => useContext(AuthContext);

1'use client';
2
3import {
4  signInWithEmailAndPassword,
5  createUserWithEmailAndPassword,
6  signOut as firebaseSignOut,
7} from 'firebase/auth';
8import { auth } from '@/lib/firebase';
9
10export async function signIn(email: string, password: string) {
11  const credential = await signInWithEmailAndPassword(auth, email, password);
12  const idToken = await credential.user.getIdToken();
13
14  // Store token in HTTP-only cookie via API route
15  await fetch('/api/auth/session', {
16    method: 'POST',
17    headers: { 'Content-Type': 'application/json' },
18    body: JSON.stringify({ idToken }),
19  });
20
21  return credential.user;
22}
23
24export async function signUp(email: string, password: string) {
25  const credential = await createUserWithEmailAndPassword(auth, email, password);
26  const idToken = await credential.user.getIdToken();
27
28  await fetch('/api/auth/session', {
29    method: 'POST',
30    headers: { 'Content-Type': 'application/json' },
31    body: JSON.stringify({ idToken }),
32  });
33
34  return credential.user;
35}
36
37export async function signOut() {
38  await firebaseSignOut(auth);
39  await fetch('/api/auth/session', { method: 'DELETE' });
40}

1// app/api/auth/session/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { adminAuth } from '@/lib/firebase-admin';
4import { cookies } from 'next/headers';
5
6export async function POST(request: NextRequest) {
7  const { idToken } = await request.json();
8
9  // Verify the ID token
10  try {
11    await adminAuth.verifyIdToken(idToken);
12  } catch {
13    return NextResponse.json({ error: 'Invalid token' }, { status: 401 });
14  }
15
16  // Create a session cookie (14-day expiry)
17  const expiresIn = 60 * 60 * 24 * 14 * 1000; // 14 days
18  const sessionCookie = await adminAuth.createSessionCookie(idToken, { expiresIn });
19
20  const cookieStore = await cookies();
21  cookieStore.set('session', sessionCookie, {
22    maxAge: expiresIn / 1000,
23    httpOnly: true,
24    secure: process.env.NODE_ENV === 'production',
25    path: '/',
26    sameSite: 'lax',
27  });
28
29  return NextResponse.json({ status: 'success' });
30}
31
32export async function DELETE() {
33  const cookieStore = await cookies();
34  cookieStore.delete('session');
35  return NextResponse.json({ status: 'success' });
36}

1// lib/auth-server.ts
2import { cookies } from 'next/headers';
3import { adminAuth } from '@/lib/firebase-admin';
4import { DecodedIdToken } from 'firebase-admin/auth';
5
6export async function getServerUser(): Promise<DecodedIdToken | null> {
7  const cookieStore = await cookies();
8  const session = cookieStore.get('session')?.value;
9  if (!session) return null;
10
11  try {
12    return await adminAuth.verifySessionCookie(session, true);
13  } catch {
14    return null;
15  }
16}
17
18// Usage in a server component:
19// app/dashboard/page.tsx
20import { redirect } from 'next/navigation';
21import { getServerUser } from '@/lib/auth-server';
22
23export default async function DashboardPage() {
24  const user = await getServerUser();
25  if (!user) redirect('/login');
26
27  return <div>Welcome, {user.email}</div>;
28}