Next.js / Authentication

Biblioteki autentykacji Next.js

Auth.js v5, Lucia Auth, Clerk i Supabase Auth — od self-hosted session management po hosted UI components i enterprise OIDC.

Auth.js v5

Self-hosted

Lucia Auth

Session control

Clerk

Hosted UI

Supabase

BaaS auth

6 bibliotek autentykacji dla TypeScript

Auth.js, Lucia, Clerk, Supabase Auth, Auth0 i Better-Auth — każda rozwiązuje inny kompromis między kontrolą, DX a kosztem.

Biblioteka	Typ	Podejście	Frameworki	Providery	Kiedy
Auth.js (NextAuth v5)	Self-hosted library	Session + JWT	Next.js, SvelteKit, Express	50+ OAuth providers	Next.js projekty, kontrola danych
Lucia Auth v3	Session management lib	Session-based (DB)	Framework agnostic	Arctic (OAuth)	Pełna kontrola, custom auth logic
Clerk	Hosted service	Session + JWT	Next.js, React, Vue	Wbudowane (UI components)	Szybki start, DX, multi-tenancy
Supabase Auth	Hosted (BaaS)	JWT + RLS	Any (REST/SDK)	OAuth + Email + Phone	Projekty z Supabase, RLS ważne
Auth0 / Okta	Enterprise hosted	OIDC / SAML	Any (SDK)	Enterprise IdP	Enterprise, compliance (SOC2, HIPAA)
Better Auth	Self-hosted library	Session + JWT	Framework agnostic	Plugin system	Open-source Clerk alternative

Często zadawane pytania

Co to jest NextAuth.js (Auth.js) i jak działa?

NextAuth.js (teraz Auth.js v5): biblioteka autentykacji dla Next.js (i innych frameworków). Obsługuje OAuth providers, Email/magic link, Credentials (username/password). Wersja 5 (Auth.js): framework agnostic (Next.js, SvelteKit, Express). Edge runtime compatible. Nowe Session API. Instalacja: npm install next-auth@beta. Konfiguracja (auth.ts): import NextAuth from 'next-auth'. import GitHub from 'next-auth/providers/github'. export const {handlers, auth, signIn, signOut} = NextAuth({providers: [GitHub({clientId, clientSecret})]}). Route handler (app/api/auth/[...nextauth]/route.ts): export {GET, POST} from '@/auth'. Middleware (ochrona tras): export {auth as middleware} from '@/auth'. config: {matcher: ['/dashboard/:path*']}. Server Component: const session = await auth(). Providers wbudowane: Google, GitHub, Facebook, Twitter/X, Discord, Slack, Apple, Microsoft, Spotify. Custom Credentials: authorize(credentials) => user | null. Email provider: magic link. Callbacks: jwt() — dodaj pola do token. session() — mapuj token do session. signIn() — blokuj login. redirect() — custom redirect. Adaptery bazy danych: @auth/prisma-adapter, @auth/drizzle-adapter, @auth/mongodb-adapter. Przechowywanie sesji/kont w DB.

Lucia Auth — co to jest i jak różni się od NextAuth?

Lucia Auth: minimalistyczna biblioteka autentykacji dla TypeScript (Pilcrow, 2022). Framework agnostic. Bazuje na session-based auth (nie JWT). Filozofia: daj devowi kontrolę. Brak magic — wiesz co robisz. Lucia v3 (2024): uproszczone API. Nie jest 'biblioteka auth' ale 'session management library'. Zarządza sesjami i user-session binding. Ty implementujesz logikę logowania. Lucia + Prisma: User model + Session model. lucia.createSession(userId, {}) — stwórz sesję. lucia.validateSession(sessionId) — zweryfikuj. lucia.invalidateSession(sessionId) — logout. lucia.createSessionCookie(sessionId) — cookie. Cookie management: lucia.sessionCookieName. Ustawianie + czyszczenie. HttpOnly, Secure, SameSite. OAuth z Arctic: @oslojs/oauth2 (od twórcy Lucia). Arctic — OAuth providers library. GitHub, Google, Discord, Apple. Lucia + Hono: import {Lucia} from 'lucia'. const lucia = new Lucia(adapter, {sessionCookie: {secure: env.NODE_ENV === 'production'}}). Kiedy Lucia zamiast NextAuth: chcesz pełną kontrolę nad logiką auth. Session-based (nie JWT). Nie Next.js (SvelteKit, Hono, Express). Custom provider logic. Kiedy NextAuth: szybki start. Wiele OAuth providers out-of-the-box. Next.js ecosystem. Mniej konfiguracji.

Clerk, Supabase Auth i Auth0 — hosted authentication services?

Clerk: kompletna platforma autentykacji dla Next.js / React. Drop-in UI components (SignIn, SignUp, UserButton). Wbudowany user management dashboard. Organizations / multi-tenancy. Session management. MFA, Passkeys, Social OAuth. Instalacja: npm install @clerk/nextjs. ClerkProvider wrapper. middleware: clerkMiddleware. auth() w Server Components. currentUser() — pełny user object. Zalety Clerk: najlepsza DX (UI komponenty out-of-the-box). Webhook eventy (user.created, user.updated). Łatwe multi-tenancy. Wady: koszt (free do 10k MAU, potem $25/mies). Vendor lock-in. Supabase Auth: wbudowana autentykacja Supabase (PostgreSQL). Email/password, Magic Link, OAuth, Phone OTP. Row Level Security (RLS) — auth.uid() w PostgreSQL policies. supabase.auth.signInWithPassword, signInWithOAuth. useSession() hook (@supabase/auth-ui-react). Integracja z Prisma/Drizzle przez JWT verification. Auth0: enterprise auth platform. OIDC/OAuth2 compliant. Actions (custom code przy auth events). Management API. Machine-to-machine tokens. Drogi (free tier ograniczony). Better-Auth (2024): nowy, open-source, self-hosted. Plugin system. Obsługuje Prisma, Drizzle, Mongo. Dobra alternatywa dla Lucia dla kompletnych rozwiązań. Kiedy hosted auth: Clerk — szybki dev, Next.js, start-up. Supabase Auth — masz już Supabase. Auth0 — enterprise compliance (SOC2, HIPAA).

Implementacja RBAC i ABAC — kontrola dostępu w aplikacjach?

RBAC (Role-Based Access Control): uprawnienia przypisane do ról. User -> Role -> Permissions. Implementacja w JWT: {sub: 'user123', role: 'admin'}. Sprawdzanie: if (session.user.role !== 'admin') return 403. Prisma RBAC: enum Role {USER ADMIN MODERATOR}. model User {role Role @default(USER)}. Middleware RBAC Next.js: export function withRole(role) {return async (req) => {const session = await auth(). if (session?.user?.role !== role) redirect('/403')}}. ABAC (Attribute-Based Access Control): decyzja na podstawie atrybutów (user + resource + environment). Bardziej granularne niż RBAC. Przykład: user może edytować tylko swoje posty. CASL: popularny ABAC library dla JavaScript. defineAbility((can, cannot) => {can('read', 'Article'). can('update', 'Article', {authorId: user.id})}). ability.can('update', article) — sprawdź uprawnienie. Nest.js + CASL: @UseGuards(PoliciesGuard). @CheckPolicies(can manage Article). Next.js middleware przykład: matcher dla chronionych route. Auth check + role check. Redirect do /login lub /forbidden. Permissions bitfield: uprawnienia jako bity (szybkie sprawdzanie). 0b00000001 = read. 0b00000010 = write. 0b00000100 = delete. user.permissions & PERMISSIONS.WRITE !== 0 — ma prawo zapisu. Prisma + Postgres RLS: Row Level Security na poziomie DB. auth.uid() = user_id — izolacja danych per user. Supabase używa tego intensywnie.

Implementacja autentykacji w Next.js App Router — kompletny przewodnik?

Next.js App Router + Auth.js (NextAuth v5): Route Handler: app/api/auth/[...nextauth]/route.ts. handlers GET, POST z NextAuth. Middleware: middleware.ts (root). auth check, redirect do /login. Cookies automatyczne. Server Components: const session = await auth(). await auth() blokuje render do sesji. Szybki access do user. Client Components: import {useSession} from 'next-auth/react'. const {data: session, status} = useSession(). SessionProvider wrapper w layout. Protected pages: redirect('/login') jeśli brak sesji. Przekierowanie zachowania URL (?callbackUrl=/dashboard). signIn(provider, {redirectTo: callbackUrl}). Database adapter: @auth/prisma-adapter z User + Account + Session + VerificationToken models. Custom session fields: JWT callback (dodaj userId, role do token). Session callback (mapuj token do session). TypeScript session types: declare module 'next-auth' {interface User {role: string}}. LoginPage: signIn('github') — OAuth. signIn('credentials', formData) — credentials. signOut() — logout. Server Actions + signIn: use server. await signIn('credentials', {email, password, redirectTo: '/dashboard'}). Pełny stack 2024: Next.js App Router + Auth.js v5 + Prisma + NextAuth Prisma Adapter + PostgreSQL.

Czytaj dalej