المهارات nextjs-supabase-auth
🔐

nextjs-supabase-auth

آمن

Добавить Supabase Auth в Next.js App Router

Этот навык предоставляет экспертное руководство по интеграции аутентификации Supabase с Next.js App Router. Он помогает разработчикам реализовывать безопасные потоки входа в систему, защищать маршруты с помощью middleware и правильно обрабатывать сессии в серверных и клиентских компонентах.

يدعم: Claude Codex Code(CC)
🥉 74 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "nextjs-supabase-auth". How do I set up Supabase Auth in Next.js App Router?

النتيجة المتوقعة:

Use @supabase/ssr package. Install it with npm install @supabase/ssr. Create a utils/supabase/server.ts file for server-side client and utils/supabase/client.ts for client-side client. Configure environment variables NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY.

استخدام "nextjs-supabase-auth". Create auth middleware for protected routes

النتيجة المتوقعة:

Import createServerClient from @supabase/ssr. In middleware, use supabase.auth.getUser() to verify tokens. Return redirect to /login if no valid session. Refresh tokens before expiration.

التدقيق الأمني

آمن
v1 • 2/18/2026

Static analysis flagged backticks in Markdown and references to 'auth' as security concerns. Both are false positives. The skill is a documentation file containing only Markdown text describing Supabase Auth integration patterns. No executable code, no network calls, no file system access, and no actual security vulnerabilities present.

1
الملفات التي تم فحصها
57
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
85
المحتوى
50
المجتمع
100
الأمان
91
الامتثال للمواصفات

ماذا يمكنك بناءه

Создание нового приложения Next.js с аутентификацией пользователей

Добавить безопасный вход в систему и управление сессиями в новый проект Next.js App Router с использованием Supabase в качестве провайдера аутентификации.

Защита маршрутов с помощью middleware

Реализовать защиту маршрутов, которая проверяет статус аутентификации и обновляет сессии перед предоставлением доступа.

Миграция с Pages Router на App Router

Понять различия в паттернах аутентификации между Pages Router и App Router при использовании Supabase.

جرّب هذه الموجهات

Базовая настройка Supabase 
How do I set up Supabase Auth in a Next.js App Router project?
Защита middleware 
Create middleware to protect routes and refresh sessions with Supabase
Обработка OAuth callback 
How do I handle OAuth callback and exchange the code for a session in Next.js?
Server Action auth 
Use Supabase with Server Actions for login, logout, and registration

أفضل الممارسات

  • Используйте пакет @supabase/ssr вместо @supabase/auth-helpers-nextjs для App Router
  • Обрабатывайте токены в middleware для защищённых маршрутов, а не в клиентских компонентах
  • Используйте Server Actions для операций аутентификации, чтобы сохранять конфиденциальную логику на сервере
  • Никогда не раскрывайте токены аутентификации клиенту без необходимости - полагайтесь на cookies HttpOnly

تجنب

  • Не используйте getSession в Server Components - используйте вместо него getUser
  • Не управляйте состоянием аутентификации в Client Components без прослушивателя сессий
  • Не храните токены вручную в localStorage - используйте сессии на основе cookies от Supabase

الأسئلة المتكررة

Какой пакет следует использовать для Supabase Auth в Next.js App Router?
Используйте @supabase/ssr. Это официальный пакет, разработанный для App Router, который правильно обрабатывает сессии на основе cookies.
Как защитить маршруты в Next.js App Router?
Используйте middleware. Импортируйте createServerClient и проверяйте действительность сессий с помощью getUser(). Перенаправляйте на страницу входа, если сессия отсутствует.
Можно ли использовать Supabase Auth с Server Components?
Да. Используйте серверный клиент из @supabase/ssr. Вызовите getUser() или getSession() в Server Components для проверки статуса аутентификации.
Как работают сессии с Supabase в Next.js?
Supabase использует сессии на основе cookies. Middleware обрабатывает ротацию cookies, автоматически обновляя токены до истечения срока их действия.
В чём разница между getSession и getUser?
getSession возвращает сессию, включая необработанные токены (избегайте в браузерах). getUser проверяет токен с помощью Supabase и возвращает данные пользователя (рекомендуется).
Как обрабатывать OAuth callbacks?
Создайте обработчик маршрута в /auth/callback. Обменяйте код из параметров URL на сессию с помощью supabase.auth.exchangeCodeForSession(). Затем перенаправьте в защищённую область.

تفاصيل المطور

المؤلف

sickn33

الترخيص

MIT

المستودع

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

مرجع

main

بنية الملفات

📄 SKILL.md