음악 데이터를 받아서 웹 사이트를 만들려고 어떤 API를 사용해야 하지 하다가 인터넷에 검색해 보니 Spotify가 가능하다길래 무작정 이걸로 해야겠다고 마음을 먹고 결정했다. Next-auth도 처음이고 타사의 API를 이용하여 만드는 것도 진짜로 처음은 아니지만 처음이나 다름없다고 봐야 할 것 같다.
구글링과 공식 문서를 번갈아 가면서 Spotify 로그인 경로를 띄우는 과정을 적어보려고 한다. 공부 겸 누군가가 같은 고민으로 시간을 보내고 있다면 도움이 되면 좋겠다.
참고로 내가 사용한 버전은 "next": "14.2.3", "next-auth": "^5.0.0-beta.19" 참고하길 바란다.
Spotify 회원가입 하기
Spotify API를 이용하기 때문에 회원가입은 당연하다고 생각한다. 아래 링크에 사이트를 들어가 회원가입 후 로그인하면 아래와 같은 화면을 볼 수 있다.
Create App
여기서 create app을 클릭하여 생성한다. 앱 이름과 앰 설명만 다르게 예시로 빈칸을 작성하였고 나머지는 동일한다. 아래에는 어떤 API/SDKs 를 사용할 거냐고 묻는데 플레이어 생성은 WEB Playback SDK, 플레이어 조작(원하는 노래 재생하기, pause, resume)은 WEB API 사용한다고 블로그에서 봤기 때문에 이거에 맞게 클릭하여 생성해 주었다.
SPOTIFY_CLIENT_ID, SPOTIFY_CLIENT_SECRET 얻기
이제 아래를 보면 자신이 생성한 App이 있을건데 클릭한다.
Settings 클릭
View client secret 클릭
Client ID와 Client secret를 자기 프로젝트에 .env.local 파일에 저장한다.
Next.js 프로젝트에 .env.local 파일에 저장
auth.ts 파일 생성
나는 타입 스크립트를 사용하여 프로젝트를 생성했기 때문에 ts로 생성하였다. 자기 프로젝트 설정에 맞게 생성하길 바란다.
주의 할 점
auth.ts 파일을 루트 경로의 생성해야 한다.
auth.ts 파일 코드
import NextAuth from "next-auth";
import Spotify from "next-auth/providers/spotify";
export const { handlers, auth, signIn, signOut } = NextAuth({
providers: [
Spotify({
clientId: process.env.SPOTIFY_CLIENT_ID,
clientSecret: process.env.SPOTIFY_CLIENT_SECRET,
}),
],
});
위에 코드에서 process.env.SPOTIFY_CLIENT_ID가 위에서 .env.local 파일에 저장한 환경변수이다.
route.ts 파일 생성
마찬가지로 경로를 조심하면 될 것 같고 route.ts만 파일이고 나머지는 폴더이다.
app/api/auth/[...nextauth]/route.ts
import { handlers } from "@/auth" // Referring to the auth.ts we just created
export const { GET, POST } = handlersmiddleware.ts 파일 생성
auth.ts와 같은 경로에 파일을 생성한다.
middleware.ts
export { auth as middleware } from "@/auth"이제 실제로 auth.ts 파일에서 export 한 signIn 함수를 실행시켜보면 되겠다.
문제 해결
signIn 함수를 버튼을 클릭하여 간단하게 실행해 보려고 했는데 에러가 발생하였다.
실제 내 프로젝트 코드 중 일부분
발생한 에러
이게 대체 뭘까 하다가 찾아본 결과 내가 LogButton 컴포넌트에 'use client' 지시어를 사용하고 있는데 클라이언트 컴포넌트는 모듈 수준 "use server" 지시문을 사용하는 actions만 가져올 수 있다는 것이다.
lib 폴더 아래에 auth-actions.ts 파일을 생성하고 코드를 작성하였다.
"use server";
import { signIn } from "@/auth";
export async function SignIn() {
return await signIn("spotify");
}
그런 다음 LogButton 컴포넌트에 코드를 수정하였다. 기존에 auth.ts 파일에서 signIn을 바로 가져오는 것을 auth-action을 통하여 import 하여 사용.
성공적으로 SignIn 함수가 동작하였다. 다음에는 로그인 후 어떻게 처리 과정을 진행했는지 적게 될 것 같다.
