Швидка інтеграція Clerk для аутентифікації на Next.js та React

Помилка 401 на кожному запиті, ручне генерування JWT, зберігання паролів та email-верифікація — все це забирає тижні. Типовий проект витрачає до 80% часу на аутентифікацію замість бізнес-логіки. На кожному новому проекті одне й те саме. Clerk — готовий провайдер аутентифікації, який вирішує ці завдання за кілька годин. Ми впроваджуємо Clerk у Next.js, React, Remix та інші фреймворки, гарантуючи стабільну роботу та синхронізацію з вашою базою через webhooks. Наш досвід — понад 50 інтеграцій для клієнтів зі США, Європи та СНД. Ми знаємо, як уникнути типових помилок і зробити інтеграцію непомітною для користувача. Отримайте консультацію по вашому проекту — це безкоштовно.

Чому Clerk швидше за власну реалізацію?

Власна реалізація з JWT, refresh-токенами та email-верифікацією займає 2–3 тижні. Clerk скорочує цей час в 10 разів — до 2–3 днів. Ви отримуєте готові UI, підтримку OAuth та масштабування без головного болю. Економія часу: до 3 тижнів на кожному проекті. При переході на Clerk середня команда знижує кількість помилок аутентифікації на 40% і покращує TTFB на 30% за рахунок локальної JWKS-верифікації.

Налаштування webhook-синхронізації

Webhook-події Clerk (user.created, user.updated, user.deleted) дозволяють синхронізувати дані користувачів з вашою базою. JWKS-верифікація відбувається без зовнішніх мережевих запитів, що знижує затримки. На сервері створюється POST-ендпоінт, який приймає JSON-payload і перевіряє підпис через svix — Clerk використовує Svix для підписування вебхуків. Приклад на Next.js App Router:

import { Webhook } from 'svix';
import { headers } from 'next/headers';

export async function POST(req: Request) {
  const headerPayload = headers();
  const svixId = headerPayload.get('svix-id');
  const svixTimestamp = headerPayload.get('svix-timestamp');
  const svixSignature = headerPayload.get('svix-signature');
  if (!svixId || !svixTimestamp || !svixSignature) return new Response('Missing headers', { status: 400 });
  const payload = await req.json();
  const wh = new Webhook(process.env.CLERK_WEBHOOK_SECRET!);
  try {
    wh.verify(JSON.stringify(payload), {
      'svix-id': svixId,
      'svix-timestamp': svixTimestamp,
      'svix-signature': svixSignature,
    });
    // user.created/updated/deleted → update DB
    return new Response('OK', { status: 200 });
  } catch (err) {
    return new Response('Invalid signature', { status: 400 });
  }
}

Цей обробник можна розмістити на будь-якому Node.js сервері. При отриманні події user.created виконайте вставку запису у свою базу даних. Обов'язково реалізуйте ідемпотентність, щоб повторні виклики не створювали дублі.

Як захистити API-ендпоінти?

Використовуйте getAuth() або currentUser() у серверних хендлерах. Clerk автоматично верифікує токен через JWKS — локально, без зовнішніх мережевих запитів. Це знижує TTFB та виключає N+1 запитів до зовнішнього API. Приклад для Next.js App Router:

import { auth, currentUser } from '@clerk/nextjs/server';

export async function GET() {
  const { userId } = auth();
  if (!userId) return new Response('Unauthorized', { status: 401 });
  const user = await currentUser();
  return Response.json({ user });
}

Що входить в роботу?

Процес роботи

1. Аналітика: обговорюємо сценарії входу, потрібні OAuth-провайдери, структуру даних користувачів та кастомні ролі.
2. Проектування: вибираємо фреймворк (Next.js, React, Remix), визначаємо архітектуру middleware та webhook-обробника. Враховуємо кешування та ідемпотентність.
3. Реалізація: встановлюємо пакет, конфігуруємо ClerkProvider, налаштовуємо роути та webhook. Приклад з JWT та refresh-токенами — не потрібен, все робить Clerk.
4. Тестування: перевіряємо потоки авторизації, сесії, синхронізацію webhook-ами, поведінку при помилках мережі. Використовуємо тестові середовища Clerk.
5. Деплой: публікуємо на staging, проводимо навантажувальне тестування — перевіряємо, що локальна JWKS-верифікація витримує 10 000 запитів на хвилину без падіння TTFB.

Терміни

Базова інтеграція з email+пароль та одним OAuth-провайдером — 1 робочий день. Повне налаштування з webhook-синхронізацією, кастомними метаданими та ролями — 2–3 дні. Точна оцінка дається після безкоштовної консультації. Вартість розраховується індивідуально. Замовте інтеграцію Clerk і почніть економити час вже завтра.

Типові помилки при інтеграції Clerk

Часто розробники пропускають налаштування middleware для захищених роутів — без authMiddleware() критичні маршрути залишаються відкритими. Інша поширена проблема — ігнорування помилок верифікації підпису webhook. Якщо не обробляти виключення, дані користувача можуть розсинхронізуватися. Також важливо не використовувати публічні ключі development-середовища в production — їх підпис відрізняється. І нарешті, у webhook-обробнику обов'язково реалізувати ідемпотентність: повторні виклики не повинні створювати дублі записів у БД.

Типова архітектура з Clerk

Браузер → Clerk Hosted UI → JWT (session token) → ваш API На стороні сервера токен перевіряється через clerkClient.verifyToken() або автоматично через middleware. Публічний ключ Clerk доступний по JWKS-endpoint — верифікація відбувається локально без мережевих запитів. Ми вже реалізували понад 50 таких інтеграцій. Зв'яжіться з нами — отримайте консультацію по інтеграції Clerk безкоштовно.

Аутентифікація та авторизація: OAuth, JWT, сесії, RBAC, 2FA

На одному проєкті токен JWT із роллю admin: false» міг бути змінений клієнтом на admin: true» — і сервер прийняв його без верифікації підпису. Ми знайшли це на тестовому стенді, коли робили огляд існуючої кодової бази новому замовнику. Причина — застаріла бібліотека jsonwebtoken, яка в певних версіях пропускала алгоритм «none». Наслідки — повний доступ до адміністративного API для будь-якого зареєстрованого користувача. Замовник не знав про це, але ми оцінили ризик, переписали модуль авторизації під ключ і запровадили обов’язкову перевірку алгоритму. Тепер подібних інцидентів немає. За 7+ років ми реалізували понад 50 проєктів із системами аутентифікації та авторизації користувачів — від стартапів до корпоративних рішень, що працюють із фінансовими даними.

Чому JWT не варто зберігати в localStorage?

JWT складається з трьох частин: header (алгоритм), payload (дані), signature (підпис). Підпис верифікує, що payload не змінено. Без перевірки підпису — це просто base64-encoded JSON, який будь-хто може підробити. Помилки, які бачимо в коді регулярно:

• Зберігання в localStorage. LocalStorage доступний будь-якому JS на сторінці — XSS-атака читає токен і відправляє на сервер зловмисника. Access token в пам’яті (змінна модуля), refresh token в httpOnly cookie — правильна схема.
• Довгоживучі access-токени. Access token на 7 днів без можливості відкликання — витік дає 7 днів доступу. Стандарт: 15 хвилин для access token, 30 днів для refresh token з ротацією. При кожному використанні refresh token видається новий, старий інвалідується — якщо старий хтось використовує повторно, це детектується як Token Reuse Attack, уся сім’я токенів відкликається.
• Зберігання секретних даних у payload. JWT payload не зашифровано, лише підписано — його видно в base64. Паролі, платіжні дані, особиста інформація — не в JWT. Алгоритм RS256 (асиметричний) кращий за HS256 (симетричний) у мікросервісній архітектурі: сервіси можуть верифікувати токен публічним ключем, не маючи доступу до секрету для його створення.

Як обрати між сесіями та токенами?

Сесії зберігають стан на сервері (Redis, database) — сервер може миттєво відкликати сесію. При масштабуванні на кілька інстансів потрібен спільний store (Redis Cluster). Cookie з session ID — httpOnly, Secure, SameSite=Strict.

Stateless JWT не вимагають server-side storage, масштабуються горизонтально. Але відкликання токена до завершення терміну — тільки через blacklist (Redis), що частково знімає перевагу stateless.

Для більшості веб-додатків сесії простіші та безпечніші. JWT має сенс для API, що споживаються з мобільного додатку, та для мікросервісної архітектури. Оцініть ваш сценарій — ми допоможемо обрати правильний підхід.

OAuth 2.0 та OpenID Connect

OAuth 2.0 — протокол делегованої авторизації, не аутентифікації. «Увійти через Google» — це OpenID Connect поверх OAuth 2.0, який додає id_token з даними користувача. Authorization Code Flow з PKCE — єдиний правильний flow для браузерних SPA та мобільних додатків. Implicit Flow застарів і небезпечний. PKCE (Proof Key for Code Exchange) захищає від перехоплення authorization code.

Реалізація OAuth сервера: не пишемо з нуля. Keycloak (open source, self-hosted), Auth0, Okta — готові рішення. Laravel Passport або Laravel Sanctum для серверних додатків. NextAuth.js для Next.js — підтримує 50+ провайдерів з коробки. Для B2B продуктів з корпоративними клієнтами — SAML 2.0 SSO. Корпоративні IT-відділи часто вимагають його замість OAuth. @boxyhq/saml-jackson — node.js бібліотека для SAML → OAuth2 адаптера.

RBAC, ABAC, ReBAC — що і коли застосовувати

Role-Based Access Control — у користувача є ролі, у ролей — права. Проста реалізація: user → roles → permissions. Але коли з'являється ресурсна авторизація («користувач може редагувати лише свої пости»), RBAC ускладнюється. У такому разі використовуйте Spatie Laravel Permission (стандарт для Laravel): поліморфні ролі та права, кешування, super-admin через gate. Інтеграція з Eloquent — $user->can('edit posts'), $user->hasRole('editor').

ABAC (Attribute-Based Access Control) — політики на основі атрибутів: користувача, ресурсу, середовища. Потрібен, коли правила доступу складні: «менеджер може переглядати замовлення свого регіону, якщо замовлення створено більше 24 годин тому». Casbin — популярна cross-language бібліотека для ABAC.

ReBAC (Relationship-Based Access Control) — Google Zanzibar model. Доступ визначається графом відносин: «користувач X є учасником команди Y, яка має доступ до проєкту Z». OpenFGA — open source реалізація від Okta.

Як ми це робимо: кейс із впровадження 2FA

Проєкт — платіжний шлюз для маркетплейсу. Потрібно було захистити доступ до операцій виводу коштів. Ми спроєктували систему:

• Основний пароль замінили на комбінацію пароль + TOTP (Google Authenticator). Використали otplib (Node.js) для генерації та верифікації кодів.
• Під час першого підключення 2FA показували QR-код (base32-encoded secret) і генерували 10 одноразових backup-кодів, хешованих bcrypt. Відображали коди лише один раз.
• Secret для TOTP зберігали у зашифрованому вигляді в базі даних (AES-256-GCM, ключ у AWS KMS).
• На стороні фронтенду інтегрували @simplewebauthn/browser для passkeys — біометрична аутентифікація як альтернатива паролю. Публічний ключ зберігали на сервері, private key на пристрої користувача.
• Результат: час на логін зріс на 5 секунд, але кількість зламаних акаунтів упала до нуля за пів року роботи. Гарантія безпеки — на рівні OWASP ASVS Level 2.

Також варто зазначити, що TOTP значно надійніше за SMS-верифікацію через SIM-swapping, тому для фінансових даних ми рекомендуємо TOTP або апаратні ключі.

Типові вразливості, які ми знаходимо

• Broken Object Level Authorization (BOLA/IDOR): /api/orders/12345 повертає замовлення без перевірки, чи належить воно поточному користувачу. Найпоширеніша вразливість API за OWASP. Кожен запит до ресурсу — перевірка через $user->can('view', $order).
• Mass Assignment: User::create($request->all()) — користувач передає is_admin: true в тілі запиту. Laravel вирішує через $fillable / $guarded, але часто забувають.
• Небезпечний CORS: Access-Control-Allow-Origin: * на API з авторизацією по cookie — credentials не передаються з wildcard origin, але якщо хтось зробив Allow-Credentials: true + Allow-Origin: * — це діра.

Penetration testing обов’язковий для продуктів з фінансовими даними або персональними даними користувачів. Ми проводимо аудит коду й інфраструктури на етапі приймання.

Що входить у роботу

Ми передаємо замовнику:

• Документацію архітектури авторизації (flow діаграми, опис токенів, політик доступу).
• Репозиторій із вихідним кодом, покритий unit- та integration-тестами.
• Конфігурацію для CI/CD (GitHub Actions/ GitLab CI) із перевірками безпеки.
• Доступи до середовищ (staging, production) із правами адміністратора.
• Інструкцію з експлуатації та супроводу.
• Підтримку після впровадження — 2 тижні безкоштовних консультацій.

Терміни та вартість

Базова аутентифікація (email/password + OAuth + JWT/сесії): 1–3 тижні. RBAC з детальними політиками доступу: 2–4 тижні. 2FA (TOTP + SMS): 1–2 тижні. WebAuthn/Passkeys: 2–3 тижні. Повна система аутентифікації для SaaS з multi-tenancy: 4–8 тижнів.

Вартість розраховується індивідуально залежно від обсягу та складності. Замовте консультацію — оцінимо ваш проєкт безкоштовно. Отримайте гарантію безпеки вашої авторизації користувачів.