조금 헤맨 NextAuth 애플 소셜 로그인 apple login 구현기

hyoon·2024년 6월 18일

AppleProvider NextAuth client_secret 그저감격 리다이렉트 버그기록 소셜로그인 애플로그인 환경변수

Web

목록 보기

1/2

💡 애플 개발자 센터에 등록하는 잘 정리된 글도 있었으나, 나의 헤맨 원인 중 많은 시간이 환경 변수 값을 잘못 지정한 것에 있었다.
또한 추가적으로 경험했던 버그들을 기록하고자 남깁니다. 다들 한 번쯤은 헤매지 않을까 싶어요..

애플 로그인 구현 코드

// login.jsx
import { signIn, useSession } from 'next-auth/react';

const { data: session } = useSession();

<LoginButton onClick={() => signIn('apple')}>
	<AppleLogo />
	<LoginText>Apple로 로그인</LoginText>
</LoginButton>

// app/api/auth/[...nextauth]/route.ts
import { createPrivateKey } from 'crypto';
import process from 'process';

import { SignJWT } from 'jose';
import NextAuth from 'next-auth';
import AppleProvider, { AppleProfile } from 'next-auth/providers/apple';

async function handler(req, res) {
	// AppleProvider clientSecret 토큰 생성
	const getAppleToken = async () => {
		const key = `-----BEGIN PRIVATE KEY-----\n${process.env.APPLE_PRIVATE_KEY}\n-----END PRIVATE KEY-----`;
		const appleToken = await new SignJWT({})
			.setAudience('https://appleid.apple.com')
			.setIssuer(process.env.APPLE_TEAM_ID!)
			.setIssuedAt(new Date().getTime() / 1000)
			.setExpirationTime(new Date().getTime() / 1000 + 3600 * 2)
			.setSubject(process.env.APPLE_ID!)
			.setProtectedHeader({
				alg: 'ES256',
				kid: process.env.APPLE_KEY_ID,
			})
			.sign(createPrivateKey(key));
		return appleToken;
	};

	return NextAuth(req, res, {
	  // 애플 로그인 시, 쿠키 필요함
		cookies: {
			pkceCodeVerifier: {
				name: 'next-auth.pkce.code_verifier',
				options: {
					httpOnly: true,
					sameSite: 'none',
					path: '/',
					secure: true,
				},
			},
		},
		providers: [
			AppleProvider({
				clientId: process.env.APPLE_ID!,
				clientSecret: await getAppleToken(),
				profile(profile: AppleProfile) {
					return {
						id: profile.sub,
						email: profile.email,
						from: 'apple',
					};
				},
			}),
		],
		callbacks: {
			async jwt({ token, user }) {
				return { ...token, ...user };
			},
			async session({ session, token }) {
				session.user = token as any;
				return session;
			},
		},
	});
}

export { handler as GET, handler as POST };