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

    Powiązane artykuły

    Kontakt

    Skontaktuj się z nami

    Porozmawiajmy o Twoim projekcie. Bezpłatna wycena w ciągu 24 godzin.

    Wyślij zapytanie

    Bezpłatna wycena w 24h
    Bez zobowiązań
    Indywidualne podejście
    Ekspresowa realizacja

    Telefon

    +48 790 814 814

    Pon-Pt: 9:00 - 18:00

    Email

    adam@fotz.pl

    Odpowiadamy w ciągu 24h

    Adres

    Plac Wolności 16

    61-739 Poznań

    Godziny pracy

    Pon - Pt9:00 - 18:00
    Sob - NdzZamknięte

    Wolisz porozmawiać?

    Zadzwoń teraz i porozmawiaj z naszym specjalistą o Twoim projekcie.

    Zadzwoń teraz

    Szanujemy Twoją prywatność

    Używamy plików cookies, aby zapewnić najlepsze doświadczenia na naszej stronie. Klikając "Akceptuję", zgadzasz się na ich użycie.