Nextjs에 로그인 적용하는 방법은 두가지라고 되어 있어.
첫 번째는 클라이언트에서 유저 데이터 Fetch하고 Loading state 사용하는 거고
(대부분 이런 방식을 사용하겠지)
그리고 두 번째는 서버에서 유저 데이터 Fetch하고
클라이언트에 아예 인증된 페이지만 주는 거지.
당연하겠지만
첫 번째 방식은 빠르지만 인증되지 않는 페이지들도 노출되고
두 번째 방식은 인증되지 않은 페이지는 클라이언트는 아예 보지도 못하므로 보안성은 훌륭할거야.
대신 서버는 병목이 엄청날거야.
매 request마다 페이지 pre-rendering해서 클라이언트에 뿌려줘야 하니깐.
그래서 ㅎㅎ 보통 첫 번째 방식을 사용하겠지 ㅋㅋㅋ
우린 또 느린 건 못참잖아? ㅋ
뭐 이런건 중요하지 않지 ㅋㅋ
그래서 Next.JS에서 로그인 어떻게 구현하는 거냐고~~~
그래 우리 어려운 건 삶의 여유가 생기고 날 갈구는 클라이언트와 직장 상사가 사라지면 그 때 하도록 하고
(친구들아 미안하지만 보통 그건 관짝에 들어갈때야ㅋ)
쉽게 가보자고!
역시 누군가 열심히 만들어 놓은 작품이 있어.
소개할게 Next-Auth! 뚜둔!
https://next-auth.js.org/
NextAuth.js
Authentication for Next.js
next-auth.js.org
powered by vercel 붙어 있는 거 보니 일단 안심이다 그치?
Next.js 만든 애들이 이것도 만든다는 거 아녀?
아래 문구도 있더라고 크으~
몇분 안에 인증 구현하세요~ 하고 ㅋㅋㅋㅋ
우리 모두가 뻥인걸 알지만
혼자 stack overflow에서 복붙하고 덕지덕지 걸레짝 만드는 것보다는 좋지 않겠어?
next-auth가 npm module이라 설치는 뭐 ㅎㅎ npm 이나 yarn 써서 설치하고
npm i next-auth
or
yarn add next-auth
그리고 나머지는 getting started에 친절하게 나와 있으니까
따라해볼 사람들은 링크 들어가서 보고 이 글에서는 대강 요약.
https://next-auth.js.org/getting-started/example
Getting Started | NextAuth.js
The example code below describes how to add authentication to a Next.js app.
next-auth.js.org
먼저 기존 next.js프로젝트에 pages.api/auth/ 폴더 만들고 [...nextauth].js 파일을 만들어.
그리고 아래 코드 처럼
nextauth import해주고
auth provider import해주고
provider setting 해주면 -_-;;
끝???
대박!!
import NextAuth from "next-auth"
import GithubProvider from "next-auth/providers/github"
export default NextAuth({
// Configure one or more authentication providers
providers: [
GithubProvider({
clientId: process.env.GITHUB_ID,
clientSecret: process.env.GITHUB_SECRET,
}),
// ...add more providers here
],
})
그럼 사용은?
로그인 처리하는 부분 볼까나?
로그인 처리를 하려면 useSession hook을 써야 하는데
이걸 쓰려면 Main component를 <SessionProvider> 로 감싸줘야해~
그러니까 아래 코드처럼 _app.js 에 추가추가~
import { SessionProvider } from "next-auth/react"
export default function App({
Component,
pageProps: { session, ...pageProps },
}) {
return (
<SessionProvider session={session}>
<Component {...pageProps} />
</SessionProvider>
)
}
그리고 진짜 컴포넌트에서 사용할 때는 useSession()만 쓰면 끝이네..
-_-;;;
signOut, SiginIn 전부 next-auth에서 제공하는 거 import해서 쓰면 끝이야....
우어 정말 쉽다.
import { useSession, signIn, signOut } from "next-auth/react"
export default function Component() {
const { data: session } = useSession()
if (session) {
return (
<>
Signed in as {session.user.email} <br />
<button onClick={() => signOut()}>Sign out</button>
</>
)
}
return (
<>
Not signed in <br />
<button onClick={() => signIn()}>Sign in</button>
</>
)
}
Server-Side에서도 사용할 수 있어
getSession() 이라는 훅을 사용해서 말이지.
아래 코드처럼.
👇👇👇
import { getSession } from "next-auth/react"
export default async (req, res) => {
const session = await getSession({ req })
if (session) {
res.send({
content:
"This is protected content. You can access this content because you are signed in.",
})
} else {
res.send({
error: "You must be sign in to view the protected content on this page.",
})
}
}이런 방식이 처음에 이야기 했던 Server-side authentication에 활용될 수 있어.
이렇게 하면 인증이 없는 유저는 인증 사용자용 컨텐츠 껍데기 조차 볼 수가 없겠지.
다시 말하지만
이렇게 하면 서버에 부하가 많이 생겨 느려지고 CDN에도 저장이 안되서 느려지는 단점이 있어.
그러니까 목적에 맞게 잘 쓰자.
Getting started에서는 로그인 유지를 위한 JWT나 Session도 설명하고 있는데 뭐 코드가 하도 간단해서;;;
정말 간단해 [...next-auth].js 에다가 아래 코드처럼
callback option주면 끝이네.
👇👇👇
...
callbacks: {
async jwt({ token, account }) {
// Persist the OAuth access_token to the token right after signin
if (account) {
token.accessToken = account.access_token
}
return token
},
async session({ session, token, user }) {
// Send properties to the client, like an access_token from a provider.
session.accessToken = token.accessToken
return session
}
}
...이거 점점 개발이 쉬워지는 거 같아.
좋은 건지 나쁜건지 ㅎㅎ
난 좋아 ㅋ
혼자 여러가지 해야 하는데 ㅠㅠ
너무 공부해야 할 게 많아!
암튼 예제에서는 provider로 github가 있었는데 지원하는 Provider 목록보고 깜놀.
아래 리스트만큼 있더라고.
kakao랑 line도 있다구!!
보통 ㅠㅠ 글로벌에서 kakao랑 line 잘 안셔주는데 ㅠㅠ
- 42 School
- Apple
- Atlassian
- Auth0
- Authentik
- Azure Active Directory B2C
- Azure Active Directory
- Battle.net
- Box
- BoxyHQ SAML
- Bungie
- Amazon Cognito
- Coinbase
- Credentials
- Discord
- Dropbox
- EVE Online
- FACEIT
- Foursquare
- Freshbooks
- FusionAuth
- GitHub
- GitLab
- IdentityServer4
- Overview
- Kakao
- Keycloak
- LINE
- Mailchimp
- Mail.ru
- Medium
- Naver
- Netlify
- Okta
- OneLogin
- Osso
- Osu!
- Patreon
- Pipedrive
- Salesforce
- Slack
- Spotify
- Strava
- Trakt
- Twitch
- VK
- WordPress.com
- WorkOS
- Yandex
- Zoho
- Zoom
DB에 연결하려고 하는 사람들은 Adapters에 가서 원하는 DB가 있는지 살펴바바
https://next-auth.js.org/adapters/overview
Overview | NextAuth.js
An Adapter in NextAuth.js connects your application to whatever database or backend system you want to use to store data for users, their accounts, sessions, etc. Adapters are optional, unless you need to persist user information in your own database, or y
next-auth.js.org
이렇게 지원하고 있네.
그런데 과연 GCP Firebase Authentication이나 AWS Amplify Authentication 보다 편할까?
아니면 과금에 잇점이 있을까?
하나씩 따라하기 버젼은 아래 링크👇👇👇👇👇
2022.06.02 - [Next.js] - nextauth + firebase authentication #1
nextauth + firebase authentication #1
nextjs에 next-auth를 넣고 firebase authentication이랑 연동하는 걸 해봤는데 되긴 하더라구. 그래서 블로그를 남기는데 이것 저것 테스트하던 프로젝트 위에 하니까 지저분하고 그래서 새로 nextjs 프로젝
engschool.tistory.com
'Next.js > nextauth' 카테고리의 다른 글
| next-auth cognito login (0) | 2022.06.23 |
|---|---|
| next.js + AWS amplify auth login (0) | 2022.06.21 |
| nextauth + firebase authentication #2 (2) | 2022.06.03 |
| nextauth + firebase authentication #1 (1) | 2022.06.02 |
| nextauth + firebase authentication (0) | 2022.06.02 |