Навыки nextjs-supabase-auth
📦

nextjs-supabase-auth

Безопасно

Реализация Supabase Auth в Next.js App Router

Создание аутентификации в Next.js требует понимания границ между сервером и клиентом. Этот навык предоставляет проверенные паттерны для безопасной интеграции Supabase Auth с архитектурой App Router.

Поддерживает: Claude Codex Code(CC)
📊 71 Адекватно
1

Скачать ZIP навыка

2

Загрузить в Claude

Перейдите в Settings → Capabilities → Skills → Upload skill

3

Включите и начните использовать

Протестировать

Использование «nextjs-supabase-auth». Настройка Supabase auth middleware для Next.js App Router

Ожидаемый результат:

  • Создать middleware.ts в корне проекта
  • Импортировать createServerClient из @supabase/ssr
  • Настроить клиент с SUPABASE_URL и SUPABASE_ANON_KEY из переменных окружения
  • Добавить matcher для маршрутов, требующих защиты аутентификации
  • Обработать обновление токена при истечении сессии
  • Перенаправить на страницу входа при неудачной проверке аутентификации на защищённых маршрутах

Использование «nextjs-supabase-auth». Как обрабатывать аутентификацию в Server Components?

Ожидаемый результат:

  • Использовать createServerClient для создания экземпляра клиента Supabase
  • Вызвать getUser() для валидации текущей сессии
  • Передать данные пользователя как props дочерним компонентам
  • Избегать прямого вызова getSession() в Server Components
  • Позволить middleware обрабатывать валидацию сессии для защищённых маршрутов

Аудит безопасности

Безопасно
v2 • 2/24/2026

Static analysis flagged markdown backticks as shell commands (false positive). Line 57 uses backticks for inline code formatting in documentation, not command execution. No actual external commands, cryptographic operations, or dangerous patterns exist. Skill provides documentation and patterns only - no executable code with security risks.

1
Просканировано файлов
61
Проанализировано строк
0
находки
2
Всего аудитов
Проблем безопасности не найдено
Проверено: claude Посмотреть историю аудитов →

Оценка качества

38
Архитектура
100
Сопровождаемость
87
Контент
31
Сообщество
100
Безопасность
91
Соответствие спецификации

Что вы можете построить

Full-Stack разработчик, создающий SaaS-приложение

Реализация безопасной аутентификации пользователей с email и OAuth-провайдерами для SaaS-продукта на Next.js с использованием Supabase в качестве бэкенда.

Команда, мигрирующая с Pages Router на App Router

Рефакторинг существующей реализации аутентификации Supabase для работы с серверными компонентами Next.js App Router и архитектурой middleware.

Разработчик, добавляющий аутентификацию в существующее приложение

Интеграция аутентификации в существующее приложение Next.js с бэкендом Supabase, следуя лучшим практикам безопасности с самого начала.

Попробуйте эти промпты

Базовая настройка клиента Supabase 
Помогите настроить конфигурацию клиента Supabase для проекта Next.js App Router. Мне нужны отдельные клиенты для серверных компонентов, клиентских компонентов и middleware с использованием @supabase/ssr.
Реализация защищённых маршрутов 
Создайте middleware, который защищает маршруты под /dashboard и перенаправляет неаутентифицированных пользователей на /login. Включите логику обновления сессии для истёкших токенов.
Обработчик OAuth-колбэка 
Создайте обработчик маршрута OAuth-колбэка, который обменивает код авторизации на сессию Supabase и перенаправляет пользователей на соответствующую страницу после успешной аутентификации.
Полный поток аутентификации с Server Actions 
Реализуйте полный поток аутентификации с использованием Server Actions для входа, регистрации и выхода. Включите правильную обработку ошибок, валидацию форм и безопасное управление токенами без экспонирования учётных данных клиенту.

Лучшие практики

  • Использовать пакет @supabase/ssr, специально разработанный для границ сервера/клиента Next.js App Router
  • Обрабатывать аутентификацию в middleware для защиты маршрутов до рендеринга и прозрачного управления обновлением сессии
  • Хранить токены в cookies, автоматически управляемых @supabase/ssr, вместо ручного управления хранилищем токенов

Избегать

  • Прямой вызов getSession() в Server Components вместо использования middleware для защиты маршрутов
  • Управление состоянием аутентификации в клиентских компонентах без реализации правильных слушателей изменений состояния аутентификации
  • Ручное хранение или обработка JWT-токенов, когда @supabase/ssr предоставляет автоматическое управление сессиями на основе cookies

Часто задаваемые вопросы

В чём разница между @supabase/ssr и @supabase/supabase-js?
@supabase/ssr специально разработан для Next.js App Router со встроенной обработкой cookies и поддержкой границ сервера/клиента. @supabase/supabase-js — это базовая клиентская библиотека, но она требует ручного управления cookies и сессиями для сценариев SSR.
Как защитить API-маршруты с помощью Supabase Auth?
Создайте файл middleware.ts в корне вашего проекта, который проверяет аутентификацию для указанных паттернов маршрутов. Используйте createServerClient для валидации сессий и перенаправления или возврата 401 для неаутентифицированных запросов.
Могу ли я использовать этот навык с Pages Router вместо App Router?
Этот навык фокусируется на паттернах App Router. Для Pages Router используются другие паттерны с getServerSideProps и другие подходы к обработке cookies.
Как обрабатывать OAuth-провайдеры, такие как Google или GitHub?
Настройте OAuth-провайдеры в вашей панели управления Supabase, затем создайте обработчики маршрутов колбэков, которые обменивают код авторизации на сессию, используя OAuth-поток Supabase. Этот навык подробно охватывает данный паттерн.
Где следует хранить учётные данные Supabase?
Храните SUPABASE_URL и SUPABASE_ANON_KEY в ваших переменных окружения. Никогда не коммитьте их в систему контроля версий. Используйте .env.local для локальной разработки и управление секретами вашей хостинг-платформы для продакшена.
Как правильно обрабатывать выход?
Используйте метод signOut() от Supabase для инвалидации сессии на стороне сервера, затем очистите любое локальное состояние и перенаправьте на страницу входа или главную страницу. Server Actions предоставляют чистый паттерн для этой операции.

Сведения для разработчиков

Автор

sickn33

Лицензия

MIT

Репозиторий

https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/nextjs-supabase-auth

Ссылка

main

Структура файлов

📄 SKILL.md