next-auth로 로그인한 후의 문제
next-auth 라이브러리를 이용하면 간편하게 소셜 로그인을 구현할 수 있다. 그런데 소셜 로그인을 구현하고 나서 사용자 정보를 데이터베이스에 저장해주어야 하는데 어디서 처리해줘야하는지 잘 몰랐다. 소셜 로그인 후 어디서 로그인했는지와 사용자 이름, 이메일의 정보를 가져와 데이터베이스에 저장해보자.
next-auth로 소셜 로그인 구현하기에 대한 글
🔗 next-auth로 카카오 로그인 구현하기
🔗 next-auth로 구글 로그인 구현하기
next-auth의 콜백은 어떻게 정의할까?
소셜 로그인을 하고 난 후에 처리해줄 수 있는 콜백 함수가 있다. 바로 signIn 함수이다. 로그인이 성공하면 이 정보를 가지고 데이터베이스에 저장하고, 만약 데이터베이스에 해당 정보를 저장해두었다면 저장하지 않는 코드를 작성해볼 것이다.
providers에서 사용할 소셜 로그인들을 정의해두었는데, 바로 밑에 callbacks를 써주면 여기서 콜백 함수를 사용할 수 있다.
로그인 콜백 함수는 signIn으로 여기서 로그인 후의 동작을 정의해주면 된다.
로그인 후 받아오는 정보
소셜 로그인 후 user, account, profile 객체를 받아온다. 그렇다면 각 객체에는 어떤 정보를 받아오는지 알아본 후 원하는 정보를 골라서 데이터베이스에 저장해주면 된다.
❶ user
사용자의 이름, 이메일, 이미지 정보를 담고 있는 객체
- user.name, user.email
➋ profile
사용자가 로그인한 소셜 로그인 제공자의 정보를 담고 있는 객체
- profile.id, profile.email, profile.name
❸ account
소셜 로그인 제공자로부터 직접 받아온 사용자 프로필 정보를 담고 있는 객체
- account.provider, account.id, account.accessToken, account.refreshToken, account.accessTokenExpires
데이터베이스에 저장하기
import NextAuth from "next-auth/next";
import { connectDB } from "@/app/util/database";
export const authOptions = {
providers: [
... (생략)
],
callbacks: {
async signIn({ user, account }) {
try {
let client = await connectDB;
const db = client.db('DB 이름');
let result = await db.collection('Collection 이름').find({ provider: account.provider, user_email: user.email }).toArray();
if (result.length === 0) {
const user_info = {
provider: account.provider,
user_email: user.email,
user_name: user.name
}
await db.collection('user').insertOne(user_info)
}
return true;
} catch (error) {
console.log(error);
return false;
}
},
},
secret : process.env.NEXTAUTH_SECRET,
}
export default NextAuth(authOptions)signIn 콜백 함수에서 데이터베이스와 연결을 먼저 해주고, 해당 데이터베이스에 소셜 로그인 정보와 이메일이 없다면 데이터베이스에 저장하도록 했다. 조건은 더 추가하거나 원하는대로 바꾸어주면 된다.
콜백 함수에서
return true를 해주어야 로그인이 성공되었다는 뜻이다. 만약 return true를 해주지 않으면 로그인에 성공해도 에러가 뜬다.
결과
데이터베이스를 확인해보면 잘 저장된 것을 볼 수 있다.
카카오 로그인 시 주의할 점
구글의 경우 로그인 하면 바로 이메일을 넘겨주지만, 카카오는 비즈앱 전환 신청을 하지 않으면 닉네임만 넘겨받을 수 있다. 이메일 정보를 받는게 편하기 때문에 앱 로고를 등록해서 비즈앱으로 전환 후 이용하면 된다.
카카오로 로그인 시 이메일을 받기 위해 비즈앱 전환을 해야해서 급하게 로고를 만들었다. 심사과정은 딱히 없는거 같고 로고 올리고 번호로 인증하는 과정을 거치고 나면 바로 이메일도 받을 수 있게 변경 가능하다.
