AIKraft/AI/Войти
AIKraft/Skills/Паттерны Clerk React

Паттерны Clerk React

React SPA auth patterns with @clerk/react for Vite/CRA - ClerkProvider setup, useAuth/useUser/useClerk hooks, React Router protected routes, custom sign-in flows. Triggers on: Vite Clerk setup, React Router auth, useAuth hook, protected route, custom sign-in form React.

clerk official Разработка

Что делает навык

Skill описывает использование @clerk/react для настройки аутентификации в React SPA (Vite/CRA). Он покрывает инициализацию ClerkProvider, работу с хуками (useAuth, useUser, useClerk), создание защищённых маршрутов в React Router и кастомные сценарии входа.

Когда применять

  • Настройка ClerkProvider в main.tsx для Vite-приложений
  • Создание защищённых маршрутов (ProtectedRoute) с использованием React Router v6/v7
  • Получение JWT-токена через useAuth().getToken() для авторизации API-запросов
  • Реализация кастомных форм входа и регистрации с использованием хуков useSignIn и useSignUp

Как работает

  1. Установить пакет npm install @clerk/react и добавить переменную окружения VITE_CLERK_PUBLISHABLE_KEY
  2. Обернуть приложение в ClerkProvider в main.tsx, передав publishableKey из import.meta.env
  3. Использовать хук useAuth() для получения состояния аутентификации, всегда проверяя isLoaded перед проверкой isSignedIn
  4. Создать компонент ProtectedRoute, который перенаправляет на /sign-in, если пользователь не авторизован
  5. Вызывать getToken() из useAuth() для получения токена сессии и передачи его в заголовке Authorization при запросах к API

Примеры запросов агенту

Настрой ClerkProvider для Vite приложения с использованием переменной окружения VITE_CLERK_PUBLISHABLE_KEY
Создай защищённый маршрут для React Router v6, который перенаправляет на страницу входа, если пользователь не авторизован
Реализуй компонент, который получает JWT-токен через useAuth и отправляет его в заголовке при запросе к API

Что понадобится

  • npm пакет @clerk/react
  • Переменная окружения VITE_CLERK_PUBLISHABLE_KEY
  • React Router v6/v7 (для защищённых маршрутов)

Описание составлено по SKILL.md навыка, сверено 06.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «clerk-react-patterns» из репозитория: # https://github.com/clerk/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r clerk-react-patterns/ ~/.claude/skills/clerk-react-patterns/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.