업그레이드 가이드 (v4)
NextAuth.js 버전 4에는 지난 주요 버전(3.x)에서 몇 가지 획기적인 변경 사항이 포함되어 있습니다. 따라서 최대한 원활하게 애플리케이션을 업그레이드할 수 있도록 도와드리겠습니다. 다음 몇 가지 마이그레이션 단계에 따라 3.x 버전에서 최신 4 릴리즈로 업그레이드할 수 있습니다.
버전 4가 GA로 출시되었습니다 🚨.
사용자 여러분께서 직접 사용해 보시고 문제가 발생하면 제보해 주시기 바랍니다.
다음을 실행하여 새 버전으로 업그레이드할 수 있습니다:
- npm
- yarn
- pnpm
npm install next-auth
yarn add next-auth
pnpm add next-auth
next-auth/jwt
더 이상 next-auth/jwt에 기본 내보내기가 없습니다. 이를 준수하려면 다음을 변경하세요:
- import jwt from "next-auth/jwt"
+ import { getToken } from "next-auth/jwt"
next-auth/react
클라이언트 측 가져오기 소스의 이름을 next-auth/react로 변경했습니다. 이 변경 사항을 준수하려면 next-auth/client를 사용하던 곳의 이름을 바꾸기만 하면 됩니다.
예시:
- import { useSession } from "next-auth/client"
+ import { useSession } from "next-auth/react"
내보 내기 이름도 다음과 같이 변경했습니다:
setOptions: 더 이상 노출되지 않음,SessionProviderprops를 사용하세요options: 더 이상 노출되지 않음,SessionProviderprops를 사용하세요session:getSession으로 이름이 변경되었습니다.providers:getProviders로 이름이 변경되었습니다.csrfToken:getCsrfToken으로 이름이 변경되었습니다.signin:signIn으로 이름이 변경되었습니다.signout:signOut으로 이름이 변경되었습니다.Provider:SessionProvider로 이름이 변경되었습니다.
https://github.com/nextauthjs/next-auth/releases/tag/v4.0.0-next.12 에 도입되었습니다
SessionProvider
버전 4에서는 SessionProvider 사용이 의무화되었습니다. 즉, 아직 사용하지 않았다면 이 공급자에서 useSession을 사용하여 애플리케이션의 모든 부분을 래핑해야 합니다. SessionProvider도 몇 가지 추가 변경이 있었습니다:
Provider는SessionProvider로 이름이 변경되었습니다.- options 속성은 이제 SessionProvider의 속성으로 병합되었습니다.
keepAlive은 이제refetchInterval로 이름이 변경되었습니다.clientMaxAge는refetchInterval과 기능이 겹치므로 제거되었지만,refetchInterval의 한가지 다른점은 세션 유지를 위해 백그라운드에서 주기적으로 재요청을 날립니다.
앱을 프로바이더로 래핑하는 가장 좋은 방법은 pages/_app.jsx 파일에서 래핑하는 것입니다.
새로운 변경 사항이 적용된 사용 사례의 예시입니다:
import { SessionProvider } from "next-auth/react"
export default function App({
Component,
pageProps: { session, ...pageProps },
}) {
return (
// `session`은 `getServerSideProps` 또는 `getInitialProps`에서 나옵니다.
// 첫 번째 로드 시 깜박임/세션 로딩을 방지합니다.
<SessionProvider session={session} refetchInterval={5 * 60}>
<Component {...pageProps} />
</SessionProvider>
)
}
https://github.com/nextauthjs/next-auth/releases/tag/v4.0.0-next.12에 도입되었습니다
공급자
이제 공급자는 개별적으로 가져와야 합니다.
- import Provider from "next-auth/providers"
- Providers.Auth0({...})
- Providers.Google({...})
+ import Auth0Provider from "next-auth/providers/auth0"
+ import GoogleProvider from "next-auth/providers/google"
+ Auth0Provider({...})
+ GoogleProvider({...})
AzureADB2C공급자의 이름이AzureAD로 변경되었습니다.Basecamp공급자가 제거되었습니다(여기를 참조하세요).- 이제 기본적으로 GitHub 공급자는 사용자 프로필에 대한 전체 쓰기 권한을 요청하지 않습니다. 이 범위가 필요한 경우 범위 옵션에
user를 수동으로 추가하세요.
구성에서 제공업체를 정의할 때 다음과 같은 새로운 옵션을 사용할 수 있습니다:
authorization(authorizationUrl,authorizationParams,scope를 대체함)token(accessTokenUrl,headers,params를 대체함)userinfo(profileUrl를 대체함)issuer(domain를 대체함)
사 용법에 대한 자세한 내용은 OAuth 공급자 문서의 옵션 섹션을 참조하세요.
레포지토리에 새 OAuth 공급자를 제출할 때 이제부터 profile 콜백은 다음 필드만 반환할 것으로 예상됩니다: id, name, email, 그리고 image. 이 중 하나라도 누락된 값이 있으면 null로 설정해야 합니다.
또한 id는 string 유형으로 반환될 것으로 예상됩니다(예를 들어 공급자가 숫자로 반환하는 경우 .toString() 메서드를 사용하여 캐스팅할 수 있습니다). 이렇게 하면 반환된 프로필 객체가 모든 공급자/계정/어댑터에서 호환되므로 향후 혼란을 줄일 수 있습니다.
구현: #2411 https://github.com/nextauthjs/next-auth/releases/tag/v4.0.0-next.20에서 소개되었습니다
useSession 훅
useSession 훅이 객체를 반환하도록 업데이트되었습니다. 이제 새로운 status 옵션을 사용하여 상태를 훨씬 더 깔끔하게 테스트할 수 있습니다.
- const [ session, loading ] = useSession()
+ const { data: session, status } = useSession()
+ const loading = status === "loading"
session.status와 session.data에서 사용 가능한 값은 문서를 확인하세요.
https://github.com/nextauthjs/next-auth/releases/tag/v4.0.0-next.18에서 소개되었습니다.
정의된 매개변수
콜백에 대한 인수를 명명된 매개변수 패턴으로 변경했습니다. 이렇게 하면 더미 _ 자리 표시자나 다른 트릭을 사용할 필요가 없습니다.
콜백
이제 콜백 메서드의 매개변수값은 다음과 같습니다:
- signIn(user, account, profileOrEmailOrCredentials)
+ signIn({ user, account, profile, email, credentials })
- redirect(url, baseUrl)
+ redirect({ url, baseUrl })
- session(session, tokenOrUser)
+ session({ session, token, user })
- jwt(token, user, account, OAuthProfile, isNewUser)
+ jwt({ token, user, account, profile, isNewUser })
https://github.com/nextauthjs/next-auth/releases/tag/v4.0.0-next.17에서 소개되었습니다.
이벤트
signOut과 updateUser 두 개의 이벤트도 정의된 매개변수 패턴을 사용하도록 변경되었습니다.
...
events: {
- signOut(tokenOrSession),
+ signOut({ token, session }), // token if using JWT, session if DB persisted sessions.
- updateUser(user)
+ updateUser({ user })
}
https://github.com/nextauthjs/next-auth/releases/tag/v4.0.0-next.20에서 소개되었습니다.
JWT 구성
우리는 JSON Web Tokens를 구성할때 일부 구성옵션을 제거 하였으며, 자세한 내용은 여기에서 확인해주세요.
export default NextAuth({
// ...
jwt: {
secret,
maxAge,
- encryptionKey
- signingKey
- encryptionKey
- verificationOptions
encode({
token
secret
maxAge
- signingKey
- signingOptions
- encryptionKey
- encryptionOptions
- encryption
}) {},
decode({
token
secret
- maxAge
- signingKey
- verificationKey
- verificationOptions
- encryptionKey
- decryptionKey
- decryptionOptions
- encryption
}) {}
}
})
로거 API
로거 API는 최대 두 개의 매개변수만 사용하도록 단순화되었으며, 두 번째 매개변수는 일반적으로 error 객체를 포함하는 객체(metadata)입니다. 로거 설정을 사용하지 않는 경우에는 이 변경 사항을 무시해도 됩니다.
import log from "some-logger-service"
...
logger: {
- error(code, ...message) {},
+ error(code, metadata) {},
- warn(code, ...message) {},
+ warn(code) {}
- debug(code, ...message) {}
+ debug(code, metadata) {}
}
https://github.com/nextauthjs/next-auth/releases/tag/v4.0.0-next.19에서 소개되었습니다.
nodemailer
typeorm 및 prisma와 마찬가지로 nodemailer는 이제 더 이상 기본적으로 종속적이지 않습니다. 만약 이메일 공급자를 사용하는 경우 프로젝트에 수동으로 추가하거나, 기타 다른 라이브러리안에 sendVerificationRequest콜백을 사용하세요. 이렇게 하면 이메일 제공업체를 실제로 사용하지 않는 경우 번들 크기가 줄어듭니다. 이메일 공급자를 사용하는 경우 매직링크 기능이 작동하려면 인증 토큰이 장기간 유지되어야 하므로 데이터베이스 어댑터도 반드시 사용해야 한다는 점을 기억하세요.
https://github.com/nextauthjs/next-auth/releases/tag/v4.0.0-next.2에서 소개되었습니다.
테마
signin, signout 등과 같은 기본 제공 페이지에 몇 가지 기본 사용자 지정 옵션을 추가했습니다.
이러한 옵션은 theme 구성 키에서 설정할 수 있습니다. 이전에는 색 구성표 옵션만 제어하는 문자열이었습니다. 이제 다음과 같은 옵션이 있는 객체입니다:
theme: {
colorScheme: "auto", // "auto" | "dark" | "light"
brandColor: "", // Hex color value
logo: "" // Absolute URL to logo image
}
최소한의 구성/사용자 정의 옵션을 통해 사용자가 기본 제공 페이지를 자신만의 페이지로 교체할 필요성을 바로 느끼지 않기를 바랍니다.
새로운 테마 옵션에 대한 자세한 내용과 스크린샷은 구성/페이지에서 확인할 수 있습니다.
#2788에서 소개되었습니다.
세션
session.jwt: boolean 옵션이 session.strategy: "jwt" | "database"으로 변경되었습니다. 이는 사용자의 옵션을 보다 직관적으로 만들기 위한 것입니다:
- 어댑터 없음,
strategy: "jwt": 기본값입니다. 세션은 쿠키에 저장되며 어디에도 지속되지 않습니다. - 어댑터 사용,
strategy: "database": 어댑터가 정의된 경우 이 설정이 암시적 설정이 됩니다. 사용자 구성이 필요하지 않습니다. - 어댑터 사용,
strategy: "jwt": 사용자는 데이터베이스를 사용할 수 있는 경우에도 명시적으로next-auth에 JWT를 사용하도록 지시할 수 있습니다. 이렇게 하면 보안이 저하되는 대신 조회 속도가 빨라질 수 있습니다. 자세히 알아보세요: https://nextauth-ko.wsbox.pw/faq#json-web-tokens
예시:
session: {
- jwt: true,
+ strategy: "jwt",
}
#3144에서 소개되었습니다.
어댑터
가장 중요한 것은 next-auth코어 패키지가 더 이상 기본적으로 typeorm 또는 다른 데이터베이스 어댑터와 함께 제공되지 않는다는 점입니다. 따라서 사용자 데이터를 데이터베이스에 보존할 필요가 없는 경우 기본 번들 크기가 크게 줄어듭니다.
공식 어댑 터는 기본 모노레포의 packages 디렉토리에서 찾을 수 있습니다(nextauthjs/next-auth). 새로운 간소화된 어댑터 API를 사용하여 직접 생성할 수도 있습니다.
만약 3.x.x 또는 이전 버전의 NextAuth.js로 만든 데이터베이스가 있는 경우 마이그레이션을 실행하여 스키마를 새 버전 4 데이터베이스 모델로 업데이트해야 합니다. 데이터베이스별 마이그레이션 예는 하단의 마이그레이션 가이드를 참조하세요.
- 기본 제공된 TypeORM 또는 Prisma 어댑터를 사용하는 경우,
next-auth코어 패키지에서 제거되었습니다. 다행히 마이그레이션은 간단합니다. 데이터베이스용 외부 패키지를 설치하고[...nextauth].js에서 가져오기를 변경하기만 하면 됩니다.
database 옵션이 제거되었으므로, 이제 database 옵션대신 다음과 같이 해야 합니다:
import NextAuth from "next-auth"
+ import { TypeORMLegacyAdapter } from "@next-auth/typeorm-legacy-adapter"
...
export default NextAuth({
- database: "yourconnectionstring",
+ adapter: TypeORMLegacyAdapter("yourconnectionstring")
})
-
prisma-legacy어댑터가 제거되었으며, 대신@next-auth/prisma-adapter를 사용해야 합니다. -
typeorm-legacy어댑터는 새로운 어댑터 API로 업그레이드되었지만,typeorm-legacy라는 이름은 유지되었습니다. 향후에는 각 데이터베이스 유형에 맞춘 가벼운 어댑터로 마이그레이션하거나typeorm을 교체할 계획입니다. -
MongoDB는
@next-auth/mongodb-adapter라는 자체 어댑터로 분리되었습니다. 자세한 내용은 MongoDB 어댑터 문서를 참조하세요.
이 변경 사항들은 https://github.com/nextauthjs/next-auth/releases/tag/v4.0.0-next.8 및 #2361에서 소개되었습니다.
어댑터 API
사용자에게는 변경이 필요하지 않습니다. 이는 어댑터에만 해당하는 변경 사항입니다.
NextAuth.js v4에서 어댑터 API가 다시 작성되고 크게 단순화되었습니다. 이제 어댑터는 더 적은 작업을 하게 되며, 일부 기능(예: 검증 토큰 해싱)이 NextAuth의 코어로 이동되었습니다.
어댑터 유지보수자이거나 직접 어댑터를 작성하려는 경우 #2361 및 https://github.com/nextauthjs/next-auth/releases/tag/v4.0.0-next.22에서 이 변경 사항에 대한 추가 정보를 찾을 수 있습니다.
스키마 변경
어댑터 API가 새롭게 변경되면서 데이터 저장 방식이 약간 변경되었습니다. 새로운 어댑터 API로, 추가 필드를 데이터베이스에 쉽게 확장할 수 있도록 하였습니다. 예를 들어, 사용자의 phone 필드가 필요할 경우, 데이터베이스 스키마에 해당 필드를 추가하는 것만으로 충분하며, 어댑터에서는 변경이 필요하지 않습니다.
created_at/createdAt및updated_at/updatedAt필드는 모든 모델에서 제거되었습니다.user_id/userId는 일관되게userId로 이름이 통일되었습니다.compound_id/compoundId는 Account에서 제거되었습니다.access_token/accessToken은 Session에서 제거되었습니다.email_verified/emailVerified는 일관되게emailVerified로 이름이 통일되었습니다.provider_id/providerId는 Account에서provider로 이름이 변경되었습니다.provider_type/providerType은 Account에서type으로 이름이 변경되었습니다.provider_account_id/providerAccountId는 Account에서 일관되게providerAccountId로 이름이 통일되었습니다.access_token_expires/accessTokenExpires는 Account에서expires_at으로 이름이 변경되었습니다.- Account에 새 필드가 추가되었습니다:
token_type,scope,id_token,session_state verification_requests테이블은verification_tokens로 이름이 변경되었습니다.
변경사항 보기
User {
id
name
email
+ emailVerified
- email_verified
image
- created_at
- updated_at
}
Account {
id
- compound_id
- user_id
+ userId
- provider_type
+ type
- provider_id
+ provider
- provider_account_id
+ providerAccountId
refresh_token
access_token
- access_token_expires
+ expires_in
+ expires_at
+ token_type
+ scope
+ id_token
+ session_state
- created_at
- updated_at
}
Session {
id
userId
expires
sessionToken
- access_token
- created_at
- updated_at
}
VerificationToken {
id
token
expires
identifier
- created_at
- updated_at
}
자세한 정보는 데이터베이스 모델페이지에서 확인하세요.