SvelteKit Auth — NextAuth.js를 모든 프레임워크로 확장하는 Auth.js

NextAuth.js의 핵심 로직을 프레임워크 독립적인 @auth/core 패키지로 분리하고, SvelteKit을 첫 번째 확장 대상으로 @auth/sveltekit을 실험적으로 공개했다. 주간 npm 다운로드 30만 건의 NextAuth.js를 기반으로 OAuth 인증을 SvelteKit에 최소 설정으로 통합할 수 있다.

핵심 포인트

@auth/core 분리: NextAuth.js 인증 로직을 프레임워크 무관 패키지로 추출, 향후 모든 웹 프레임워크에서 재사용 가능한 Auth.js 방향으로 전환
GitHub, Google, Facebook 등 주요 OAuth 플랫폼 기본 지원
src/hooks.server.ts 한 파일에 OAuth 프로바이더 설정, 환경 변수로 시크릿 관리
signIn/signOut 메서드와 session 데이터로 UI 조건 렌더링
load 함수에서 세션 검증 후 미인증 시 302 리다이렉트로 라우트 보호

상세 정리

배경: NextAuth.js(주간 30만 다운로드)는 Next.js 전용 설계. 다른 프레임워크에서 재사용 불가능해 각 프레임워크마다 별개 인증 라이브러리가 필요했던 문제.
해결 방향: @auth/core 패키지로 인증 핵심 로직 분리. 각 프레임워크는 @auth/core를 래핑한 어댑터 패키지(@auth/sveltekit)를 사용. 향후 Vue, Solid 등으로 확장 예정.
SvelteKit 선택 이유: Next.js와 설계 철학이 유사한 풀스택 프레임워크. SvelteKit 1.0 출시 시점에 맞춰 첫 확장으로 공개.
설정: @auth/sveltekit, @auth/core 설치 후 src/hooks.server.ts에 SvelteKitAuth({ providers: [GitHub({ clientId, clientSecret })] }) 설정. 시크릿은 환경 변수에서 주입.
클라이언트 통합: signIn('github') / signOut() 함수로 인증 흐름 트리거. getSession()으로 현재 세션 상태 조회. 세션 유무에 따라 사용자 아바타+이름 또는 로그인 버튼 조건 렌더링.
라우트 보호: +page.server.js의 load 함수에서 getSession() 호출 후 세션 없으면 throw redirect(302, '/') 로 미인증 접근 즉시 차단.
현재 상태: 실험적(experimental) 단계. 안정화와 타 프레임워크 지원 확장 작업 중. 프레임워크 우선순위는 커뮤니티 피드백으로 결정.

왜 읽나SvelteKit 앱에 OAuth 인증을 빠르게 통합하거나, 프레임워크 독립적인 인증 라이브러리 설계 패턴(@auth/core 분리 방식)을 참고하려는 프론트엔드 개발자에게 유용.

Vercel Blog 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

SvelteKit Auth — NextAuth.js를 모든 프레임워크로 확장하는 Auth.js

이 글과 비슷한

Chat SDK의 Discord Components V2 지원 추가

Flags SDK, 플래그 평가 속도 10배 개선

AI로 웹 엔지니어 없이 LINE 앱 안에서 그룹 영상 통화 서비스 만들기