Next.js에서 로그인 구현
Next.js 프로젝트에서 로그인 기능을 구현할 때, Next-Auth 라이브러리를 사용하면 간편하게 로그인 기능을 구현할 수 있습니다. (Next-Auth 살펴보기)
NextAuth.js
Authentication for Next.js
next-auth.js.org
Next-Auth 라이브러리 세팅하기
npm을 이용하여 터미널에서 Next-Auth 라이브러리를 간단하게 설치할 수 있으며, pages/api/auth/[...nextauth].js 파일을 만들어서 아래 코드를 작성하면 됩니다.
npm을 통한 라이브러리 설치
$ npm install next-authNext-Auth 서버 세팅 (Backend)
// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth'
import AppleProvider from 'next-auth/providers/apple'
import FacebookProvider from 'next-auth/providers/facebook'
import GoogleProvider from 'next-auth/providers/google'
import EmailProvider from 'next-auth/providers/email'
export default NextAuth({
providers: [
// OAuth authentication providers...
AppleProvider({
clientId: process.env.APPLE_ID,
clientSecret: process.env.APPLE_SECRET
}),
FacebookProvider({
clientId: process.env.FACEBOOK_ID,
clientSecret: process.env.FACEBOOK_SECRET
}),
GoogleProvider({
clientId: process.env.GOOGLE_ID,
clientSecret: process.env.GOOGLE_SECRET
}),
// Passwordless / email sign in
EmailProvider({
server: process.env.MAIL_SERVER,
from: 'NextAuth.js <no-reply@example.com>'
}),
]
})Next-Auth 페이지 세팅 (Frontend)
// Login.js
import { signIn } from 'next-auth/react'
export default function Login() {
return <button onClick={() => { signIn() }}>로그인</button>
}// Layout.js
// next 프로젝트에 가장 기본이 되는 layout.js 파일입니다.
import './globals.css'
import { Inter } from 'next/font/google'
import Login from './Login' // 임포트하기
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<Login/> // 컴포넌트 추가
<body className={inter.className}>{children}</body>
</html>
)
}이렇게 코드를 작성하면, 기본적인 로그인 버튼과 로그인 기능은 완성됩니다. (구체적인 로그인 페이지는 라이브러리에서 제공합니다.)
.env 파일에 대한 간단한 설명
이때, process.env.어쩌구 써져있는 것들이 있는데 이는 민감한 개인정보들을 .env 파일에 따로 적고 변수로 가져온 것입니다. 이렇게 할 경우 직접적으로 개인정보들을 하드코딩할 필요가 없으며 또한 파일을 분류하였기에 원격저장소에 .env 파일만 빼서 올려 안전하게 코드 공유를 할 수 있습니다.
래퍼런스 (Reference)
반응형
