nextjs-supabase-auth
Реализация Supabase Auth в Next.js App Router
Создание аутентификации в Next.js требует понимания границ между сервером и клиентом. Этот навык предоставляет проверенные паттерны для безопасной интеграции Supabase Auth с архитектурой App Router.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "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 обрабатывать валидацию сессии для защищённых маршрутов
التدقيق الأمني
آمن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.
درجة الجودة
ماذا يمكنك بناءه
Full-Stack разработчик, создающий SaaS-приложение
Реализация безопасной аутентификации пользователей с email и OAuth-провайдерами для SaaS-продукта на Next.js с использованием Supabase в качестве бэкенда.
Команда, мигрирующая с Pages Router на App Router
Рефакторинг существующей реализации аутентификации Supabase для работы с серверными компонентами Next.js App Router и архитектурой middleware.
Разработчик, добавляющий аутентификацию в существующее приложение
Интеграция аутентификации в существующее приложение Next.js с бэкендом Supabase, следуя лучшим практикам безопасности с самого начала.
جرّب هذه الموجهات
Помогите настроить конфигурацию клиента Supabase для проекта Next.js App Router. Мне нужны отдельные клиенты для серверных компонентов, клиентских компонентов и middleware с использованием @supabase/ssr.
Создайте middleware, который защищает маршруты под /dashboard и перенаправляет неаутентифицированных пользователей на /login. Включите логику обновления сессии для истёкших токенов.
Создайте обработчик маршрута OAuth-колбэка, который обменивает код авторизации на сессию Supabase и перенаправляет пользователей на соответствующую страницу после успешной аутентификации.
Реализуйте полный поток аутентификации с использованием 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?
Как защитить API-маршруты с помощью Supabase Auth?
Могу ли я использовать этот навык с Pages Router вместо App Router?
Как обрабатывать OAuth-провайдеры, такие как Google или GitHub?
Где следует хранить учётные данные Supabase?
Как правильно обрабатывать выход?
تفاصيل المطور
المؤلف
sickn33الترخيص
MIT
المستودع
https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/nextjs-supabase-authمرجع
main
بنية الملفات
📄 SKILL.md