Firebase Auth på 20 minuter — komplett guide

Guide

Firebase Auth är snabbaste vägen till fungerande login — om man vet ordningen att göra saker.

Förutsättningar - Firebase-projekt skapat på console.firebase.google.com - firebase-paket installerat: npm install firebase firebase-admin

Steg 1: Aktivera providers (5 min) Firebase Console → Authentication → Sign-in method → aktivera Google och GitHub. För GitHub: skapa en OAuth App på github.com/settings/applications och klistra in Client ID + Secret.

Steg 2: Klientkonfiguration (5 min) Skapa src/lib/firebase/client.ts:

import { initializeApp, getApps } from "firebase/app";
import { getAuth } from "firebase/auth";

const app = getApps().length ? getApps()[0] : initializeApp({ /* config */ });
export const auth = getAuth(app);

Steg 3: Auth-context (5 min) En React context som lyssnar på onAuthStateChanged och exponerar user och loading. Lägg den i src/contexts/AuthContext.tsx och wrappa <body> i layout.tsx.

Steg 4: Skyddad route med middleware (5 min) Next.js middleware.ts i projektroten — kolla __session-cookien (Firebase sätter den automatiskt) och redirecta till /login om den saknas.

Gotcha: Firebase Admin SDK kräver FIREBASE_SERVICE_ACCOUNT_KEY som env-variabel. Lägg ALDRIG in den i klientkod — bara i server-komponenter och API-routes.

Dela en egen guide Fler genvägar →