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

nextjs-supabase-auth

آمن

Next.js 앱 라우터에 Supabase 인증 추가

이 스킬은 Next.js 앱 라우터에서 Supabase 인증을 통합하기 위한 전문가 수준의 안내를 제공합니다. 개발자가 안전한 로그인 흐름을 구현하고, 미들웨어로 라우트를 보호하며, 서버 및 클라이언트 컴포넌트에서 세션을 올바르게 처리할 수 있도록 도와줍니다.

يدعم: 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?

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

@supabase/ssr 패키지를 사용하세요. npm install @supabase/ssr로 설치합니다. 서버측 클라이언트용 utils/supabase/server.ts 파일과 클라이언트측 클라이언트용 utils/supabase/client.ts 파일을 생성합니다. 환경 변수 NEXT_PUBLIC_SUPABASE_URL과 NEXT_PUBLIC_SUPABASE_ANON_KEY를 구성합니다.

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

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

@supabase/ssr에서 createServerClient를 가져옵니다. 미들웨어에서 supabase.auth.getUser()를 사용하여 토큰을 확인합니다. 유효한 세션이 없으면 /login으로 리디렉션합니다. 만료 전에 토큰을 새로 고칩니다.

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

آمن
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 앱 구축

Supabase를 인증 공급자로 사용하여 새 Next.js 앱 라우터 프로젝트에 안전한 로그인 및 세션 관리를 추가합니다.

미들웨어로 라우트 보호

인증 상태를 확인하고 세션을 새로 고친 후 액세스를 부여하는 라우트 보호를 구현합니다.

페이지 라우터에서 앱 라우터로 마이그레이션

Supabase를 사용할 때 페이지 라우터와 앱 라우터 간의 인증 패턴 차이점을 이해합니다.

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

기본 Supabase 설정 
Next.js 앱 라우터 프로젝트에서 Supabase 인증을 어떻게 설정하나요?
미들웨어 보호 
Supabase로 라우트를 보호하고 세션을 새로 고치는 미들웨어를 생성하세요
OAuth 콜백 처리 
OAuth 콜백을 처리하고 Next.js에서 코드를 세션으로 교환하려면 어떻게 해야 하나요?
서버 액션 인증 
로그인, 로그아웃 및 등록에 서버 액션과 Supabase를 사용하세요

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

  • 앱 라우터에는 @supabase/ssr 패키지를 @supabase/auth-helpers-nextjs 대신 사용하세요
  • 보호된 라우트의 토큰은 클라이언트 컴포넌트가 아닌 미들웨어에서 처리하세요
  • 인증 작업에는 서버 액션을 사용하여 민감한 로직을 서버에 유지하세요
  • 불필요하게 auth 토큰을 클라이언트에 노출하지 마세요 - HttpOnly 쿠키에 의존하세요

تجنب

  • 서버 컴포넌트에서 getSession을 사용하지 마세요 - 대신 getUser를 사용하세요
  • 세션 리스너 없이 클라이언트 컴포넌트에서 인증 상태를 관리하지 마세요
  • 토큰을 수동으로 localStorage에 저장하지 마세요 - Supabase의 쿠키 기반 세션을 사용하세요

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

Next.js 앱 라우터에서 Supabase 인증에 어떤 패키지를 사용해야 하나요?
@supabase/ssr를 사용하세요. 앱 라우터용으로 설계된 공식 패키지이며 쿠키 기반 세션을 올바르게 처리합니다.
Next.js 앱 라우터에서 라우트를 어떻게 보호하나요?
미들웨어를 사용하세요. createServerClient를 가져오고 getUser()를 사용하여 유효한 세션을 확인합니다. 세션이 없으면 로그인 페이지로 리디렉션합니다.
서버 컴포넌트에서 Supabase 인증을 사용할 수 있나요?
네. @supabase/ssr의 서버 클라이언트를 사용하세요. Server Component에서 getUser() 또는 getUser()를 호출하여 인증 상태를 확인합니다.
Next.js에서 Supabase 세션은 어떻게 작동하나요?
Supabase는 쿠키 기반 세션을 사용합니다. 미들웨어가 쿠키 로테이션을 처리하며 만료 전에 자동으로 토큰을 새로 고칩니다.
getSession과 getUser의 차이점은 무엇인가요?
getSession은 (브라우저에서 피하세요) 원시 토큰을 포함한 세션을 반환합니다. getUser는 Supabase에서 토큰을 검증하고 사용자 데이터를 반환합니다(권장).
OAuth 콜백을 어떻게 처리하나요?
/auth/callback에 라우트 핸들러를 생성합니다. URL 매개변수의 코드를 supabase.auth.exchangeCodeForSession()을 사용하여 세션으로 교환합니다. 그런 다음 보호된 영역으로 리디렉션합니다.

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

المؤلف

sickn33

الترخيص

MIT

المستودع

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

مرجع

main

بنية الملفات

📄 SKILL.md