스킬 nextjs-supabase-auth
📦

nextjs-supabase-auth

안전

Next.js App Router 에서 Supabase Auth 구현하기

Next.js 에서 인증을 구축하려면 서버와 클라이언트 경계를 이해해야 합니다. 이 스킬은 App Router 아키텍처와 함께 안전한 Supabase Auth 통합을 위한 검증된 패턴을 제공합니다.

지원: Claude Codex Code(CC)
📊 71 적절함
1

스킬 ZIP 다운로드

2

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

3

토글을 켜고 사용 시작

테스트해 보기

"nextjs-supabase-auth" 사용 중입니다. Next.js App Router 를 위한 Supabase auth 미들웨어 설정

예상 결과:

  • 프로젝트 루트에 middleware.ts 생성
  • @supabase/ssr 에서 createServerClient import
  • 환경 변수에서 SUPABASE_URL 및 SUPABASE_ANON_KEY 로 클라이언트 구성
  • 인증 보호가 필요한 라우트에 대한 matcher 추가
  • 세션 만료 시 토큰 갱신 처리
  • 보호된 라우트에서 인증 확인 실패 시 로그인 페이지로 리디렉션

"nextjs-supabase-auth" 사용 중입니다. Server Components 에서 인증을 어떻게 처리하나요?

예상 결과:

  • createServerClient 를 사용하여 Supabase 클라이언트 인스턴스화
  • getUser() 를 호출하여 현재 세션 유효성 검사
  • 사용자 데이터를 props 로 하위 컴포넌트에 전달
  • Server Components 에서 getSession() 직접 호출 방지
  • 보호된 라우트의 경우 미들웨어에서 세션 유효성 검사 처리

보안 감사

안전
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
사양 준수

만들 수 있는 것

SaaS 애플리케이션을 구축하는 풀스택 개발자

Supabase 를 백엔드로 사용하는 Next.js SaaS 제품에 이메일 및 OAuth 공급자와 함께 안전한 사용자 인증을 구현합니다.

Pages Router 에서 App Router 로 마이그레이션하는 팀

기존 Supabase 인증 구현을 Next.js App Router 서버 컴포넌트 및 미들웨어 아키텍처에서 작동하도록 리팩토링합니다.

기존 앱에 인증을 추가하는 개발자

보안 모범 사례를 처음부터 따르면서 Supabase 백엔드와 함께 기존 Next.js 애플리케이션에 인증을 통합합니다.

이 프롬프트를 사용해 보세요

기본 Supabase 클라이언트 설정 
Next.js App Router 프로젝트를 위한 Supabase 클라이언트 구성 설정을 도와주세요. @supabase/ssr 을 사용하여 서버 컴포넌트, 클라이언트 컴포넌트 및 미들웨어를 위한 별도의 클라이언트가 필요합니다.
보호된 라우트 구현 
/dashboard 아래의 라우트를 보호하고 인증되지 않은 사용자를 /login 으로 리디렉션하는 미들웨어를 생성하세요. 만료된 토큰에 대한 세션 갱신 로직을 포함하세요.
OAuth 콜백 핸들러 
인증 코드를 Supabase 세션으로 교환하고 인증 성공 후 사용자를 적절한 페이지로 리디렉션하는 OAuth 콜백 라우트 핸들러를 구축하세요.
Server Actions 를 사용한 전체 인증 플로우 
Server Actions 를 사용하여 로그인, 회원가입 및 로그아웃을 위한 완전한 인증 플로우를 구현하세요. 자격 증명을 클라이언트에 노출하지 않으면서 적절한 오류 처리, 양식 유효성 검사 및 안전한 토큰 관리를 포함하세요.

모범 사례

  • Next.js App Router 서버/클라이언트 경계를 위해 특별히 설계된 @supabase/ssr 패키지 사용
  • 렌더링 전에 라우트를 보호하고 세션 갱신을 투명하게 관리하기 위해 미들웨어에서 인증 처리
  • 수동으로 토큰 저장을 처리하는 대신 @supabase/ssr 에서 자동으로 관리하는 쿠키에 토큰 저장

피하기

  • 라우트 보호를 위해 미들웨어를 사용하는 대신 Server Components 에서 getSession() 직접 호출
  • 적절한 인증 상태 변경 리스너를 구현하지 않고 클라이언트 컴포넌트에서 인증 상태 관리
  • @supabase/ssr 이 자동 쿠키 기반 세션 관리를 제공하는데 수동으로 JWT 토큰 저장 또는 처리

자주 묻는 질문

@supabase/ssr 과 @supabase/supabase-js 의 차이점은 무엇인가요?
@supabase/ssr 은 내장 쿠키 처리 및 서버/클라이언트 경계 지원을 통해 Next.js App Router 를 위해 특별히 설계되었습니다. @supabase/supabase-js 는 핵심 클라이언트 라이브러리이지만 SSR 시나리오를 위해 수동 쿠키 및 세션 관리가 필요합니다.
Supabase Auth 로 API 라우트를 어떻게 보호하나요?
프로젝트 루트에 middleware.ts 파일을 생성하여 지정된 라우트 패턴에 대한 인증을 확인하세요. createServerClient 를 사용하여 세션을 유효성 검사하고 인증되지 않은 요청에 대해 리디렉션하거나 401 을 반환하세요.
App Router 대신 Pages Router 에서 이 스킬을 사용할 수 있나요?
이 스킬은 App Router 패턴에 중점을 둡니다. Pages Router 의 경우 getServerSideProps 를 사용한 다른 패턴과 다른 쿠키 처리 접근 방식을 사용하게 됩니다.
Google 또는 GitHub 와 같은 OAuth 공급자를 어떻게 처리하나요?
Supabase 대시보드에서 OAuth 공급자를 구성한 다음 Supabase 의 OAuth 플로우를 사용하여 인증 코드를 세션으로 교환하는 콜백 라우트 핸들러를 생성하세요. 이 스킬에서 이 패턴을 상세히 다룹니다.
Supabase 자격 증명을 어디에 저장해야 하나요?
SUPABASE_URL 및 SUPABASE_ANON_KEY 를 환경 변수에 저장하세요. 이를 버전 관리에 커밋하지 마세요. 로컬 개발에는 .env.local 을 사용하고 프로덕션에는 호스팅 플랫폼의 비밀 관리 기능을 사용하세요.
로그아웃을 어떻게 올바르게 처리하나요?
서버 측에서 세션을 무효화하기 위해 Supabase 의 signOut() 메서드를 사용한 다음 로컬 상태를クリア하고 로그인 또는 홈페이지로 리디렉션하세요. Server Actions 는 이 작업을 위한 깔끔한 패턴을 제공합니다.

개발자 세부 정보

작성자

sickn33

라이선스

MIT

리포지토리

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

참조

main

파일 구조

📄 SKILL.md