المهارات 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