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

Паттерны Clerk TanStack

TanStack React Start auth patterns with @clerk/tanstack-react-start - createServerFn, beforeLoad guards, loaders, Vinxi server. Triggers on: TanStack auth, createServerFn clerk, beforeLoad protection, TanStack Start middleware.

clerk official Дизайн

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

Набор паттернов для интеграции аутентификации Clerk в приложения на базе TanStack React Start, работающие на сервере Vinxi. Позволяет защищать маршруты, получать данные пользователя в серверных функциях и лоадерах, а также настраивать middleware.

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

  • Защита маршрутов с помощью guards beforeLoad, перенаправляя неавторизованных пользователей на страницу входа.
  • Получение состояния аутентификации (isAuthenticated, userId) внутри createServerFn.
  • Передача контекста аутентификации в лоадеры (loaders) для использования на стороне клиента.
  • Настройка clerkMiddleware в точке входа Vinxi (src/start.ts).

Как работает

  1. Установить пакет @clerk/tanstack-react-start и добавить ключи CLERK_PUBLISHABLE_KEY и CLERK_SECRET_KEY в .env.
  2. Импортировать и добавить clerkMiddleware() в массив requestMiddleware в файле src/start.ts.
  3. Обернуть корневой компонент (src/routes/__root.tsx) в ClerkProvider.
  4. Использовать auth() из @clerk/tanstack-react-start/server внутри createServerFn или beforeLoad.
  5. Вызывать throw redirect() для перенаправления неавторизованных пользователей.
  6. Возвращать данные из beforeLoad для доступа к ним через контекст лоадеров.

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

Как защитить маршрут /dashboard с помощью beforeLoad и createServerFn?
Как настроить clerkMiddleware в start.ts для TanStack Start?
Как получить userId в createServerFn, используя auth()?

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

  • npm пакет @clerk/tanstack-react-start
  • Переменные окружения CLERK_PUBLISHABLE_KEY и CLERK_SECRET_KEY
  • Серверная среда на базе Vinxi

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

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

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

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