먼저 login을 social login을 사용하려고 한다.
왜냐하면... 이게 편하다고 느꼈다. 예전에 캡스톤 1학기 때에는 그냥 로그인, 회원가입을 구현했었는데 그게 생각보다 신경써야할 게 많았던 기억이 있다.
캡스톤 2학기 때에 Auth0를 썼었는데, 뭔가... 문서가 복잡하고 그래서 오래 걸렸지만 구현하고 나니 social login이 편한 거 같아서 이걸 쓰려고 한다.
이때, 찾아보니 nextauth 라이브러리를 사용하면 편하다고 해서 이걸 써 볼 예정이다.
원래는 kakao, naver 로그인을 하려고 했는데 내가 만드는 프로젝트의 예상 유저들은 instagram을 할 거 같아서 Instagram social login도 있길래 이걸 사용하고자 한다.
https://authjs.dev/getting-started/installation
한 번 따라해보자!
npm install next-auth@beta
5 버전 베타를 그냥 설치하도록 하겠다.
설치 후 package.json에서 버전 확인 후에
npx auth secret
을 실행한다.
필수적인 환경변수: AUTH_SECRET을 만드는 것이다.
root 폴더에 auth.ts 파일을 만든다
import NextAuth from "next-auth"
export const { handlers, signIn, signOut, auth } = NextAuth({
providers: [],
})
나는 src - app - page 식이라 src에 두었다.
그리고 /app/api/auth/[...nextauth]/route.ts로 Route Handler를 추가한다.
import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlers
session을 둘 midleware도 추가한다.
-> 아직 못 정했다
midleware.ts
export { auth as middleware } from "@/auth"
Set up Authentication Methods
카카오 소셜 로그인을 한 번 써볼 것이다!
카카오 디벨로퍼 앱 대시보드에서 카카오 로그인을 들어가 callback url을 설정해준다
http://localhost:3000/api/auth/callback/kakao일단 이렇게 하고, 나중에 배포하게 된다면 도메인으로 바꿔주면 된다.
그리고 앱 키에서 REST API key가 client_id가 될 것이다.
client_secret 값은 
이 목록 중 보안에 들어가서 발급 받을 수 있다!
AUTH_KAKAO_ID={CLIENT_ID}
AUTH_KAKAO_SECRET={CLIENT_SECRET}
환경 변수를 작성해주자
처음에 만든 auth.ts 파일의 provider를 넣어주자
import NextAuth from "next-auth"
import kakao from "next-auth/providers/kakao"
export const { handlers, signIn, signOut, auth } = NextAuth({
providers: [kakao({
clientId: process.env.AUTH_KAKAO_ID,
clientSecret: process.env.AUTH_KAKAO_SECRET,
})],
})오 된당
근데 버튼이 너무 못생겼다...
costom signin page 문서를 읽고 한 번 만들어보자
