Passkey

peer dependencies 설치

npm install @simplewebauthn/browser@9.0.1 @simplewebauthn/server@9.0.3

pnpm add @simplewebauthn/browser@9.0.1 @simplewebauthn/server@9.0.3

yarn add @simplewebauthn/browser@9.0.1 @simplewebauthn/server@9.0.3

bun add @simplewebauthn/browser@9.0.1 @simplewebauthn/server@9.0.3

@simplewebauthn/browser peer dependency는 커스텀 로그인 페이지를 사용할 때만 필요합니다. Auth.js 기본 페이지를 사용한다면 이 peer dependency는 설치하지 않아도 됩니다.

데이터베이스 설정

Passkeys 프로바이더는 Authenticator라는 추가 테이블이 필요합니다. Passkeys는 현재 여러 어댑터에서 지원되며, 더 자세한 마이그레이션 단계는 각각의 문서 페이지를 참고하세요. 여기서는 Prisma를 예로 들어 설명하겠지만, 아래에는 원시 SQL 마이그레이션도 포함되어 있습니다.

Edge 호환성

Next.js와 미들웨어를 함께 사용하면서 next-auth를 활용한다면, 선택한 데이터베이스 클라이언트가 “edge 호환”인지 확인해야 합니다. 만약 이전 버전의 Prisma나 다른 어댑터를 사용 중이고, 이들이 edge 호환되지 않는다면 몇 가지 조정이 필요합니다. 자세한 내용은 edge 호환성 가이드를 참고하세요. 또한 Prisma 어댑터 문서에서 Prisma 관련 정보를 확인할 수 있습니다.

Auth.js 설정 업데이트

Passkey 프로바이더를 설정에 추가하고 호환 가능한 데이터베이스 어댑터를 사용 중인지 확인하세요. 또한 실험적인 WebAuthn 기능을 명시적으로 활성화해야 합니다.

import Passkey from "next-auth/providers/passkey"
import { PrismaAdapter } from "@auth/prisma-adapter"
import { PrismaClient } from "@prisma/client"
 
const prisma = new PrismaClient()
 
export default {
  adapter: PrismaAdapter(prisma),
  providers: [Passkey],
  experimental: { enableWebAuthn: true },
}

기본 제공되는 Auth.js 페이지를 사용 중이라면, 이제 준비가 완료된 것입니다! /signin 라우트로 이동하면 “Passkeys로 로그인” 버튼이 표시될 것입니다.

커스텀 페이지

커스텀 로그인 페이지를 만들 때, next-auth/webauthn의 signIn 함수를 사용하여 WebAuthn 등록과 인증을 시작할 수 있습니다. WebAuthn signIn 함수를 사용할 때는 @simplewebauth/browser 피어 의존성도 설치해야 한다는 점을 기억하세요.

"use client"
 
import { useSession } from "next-auth/react"
import { signIn } from "next-auth/webauthn"
 
export default function Login() {
  const { data: session, update, status } = useSession()
 
  return (
    <div>
      {status === "authenticated" ? (
        <button onClick={() => signIn("passkey", { action: "register" })}>
          새로운 Passkey 등록
        </button>
      ) : status === "unauthenticated" ? (
        <button onClick={() => signIn("passkey")}>Passkey로 로그인</button>
      ) : null}
    </div>
  )
}