Next.js 14과 Supabase로 간편하게 Kakao 로그인 구현하기

Supabase와 Next.js 14로 카카오 로그인 구현하기

최첨단 기술로 웹 애플리케이션을 개발하고 싶은데 어디서부터 시작해야 할지 막막하시죠? 오늘은 Supabase와 Next.js 14를 이용해 간단하게 카카오 로그인을 구현하는 방법을 소개해드리려고 합니다. 이 과정을 통해 서버사이드에서 OAuth를 처리하는 방법, 환경 변수를 설정하는 방법, 그리고 클라이언트와 서버 간의 상호작용을 손쉽게 처리하는 방법을 배울 수 있습니다.

Next.js와 Supabase 소개

먼저, Next.js는 React 기반의 프레임워크로, 서버사이드 렌더링(SSR)이나 정적 사이트 생성(SSG) 등 다양한 기능을 통해 효율적이고 빠른 웹 애플리케이션을 개발할 수 있습니다. Supabase는 Firebase와 유사한 백엔드 서비스로, 데이터베이스, 인증, 저장소 등 다양한 기능을 제공합니다. 특히 Supabase는 PostgreSQL을 기반으로 하며, SQL 쿼리를 그대로 사용할 수 있어서 매우 편리합니다.

카카오 로그인 구현을 위한 환경 설정

먼저, 프로젝트에 필요한 패키지를 설치합니다. 여기서는 @supabase/ssr 패키지를 추가적으로 설치하여 SSR 환경에서도 Supabase 클라이언트를 사용할 수 있도록 합니다.

npm install @supabase/ssr @supabase/supabase-js

또한, Supabase에서 제공하는 URL과 익명 키를 환경 변수로 저장합니다. 직접 프로젝트 내에 .env.local 파일을 생성하고 다음과 같이 설정합니다:

NEXT_PUBLIC_SUPABASE_URL=https://your-supabase-url.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

환경 변수를 설정하면 코드 내에서 이를 쉽게 참조할 수 있습니다.

Supabase 클라이언트 생성

Supabase 클라이언트는 각 요청마다 새로 생성하는 게 원칙입니다. 클라이언트를 생성하여 언제든지 사용할 수 있도록 헬퍼 함수를 작성해보겠습니다.

import { createBrowserClient } from '@supabase/ssr';

export function createClient() {
  return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY);
}

이제 이 함수로 클라이언트를 생성하여 필요한 곳에서 사용할 수 있습니다.

카카오 로그인 버튼 구현

이제 카카오 로그인 버튼을 만들어 보겠습니다. 사용자가 버튼을 클릭하면 Supabase를 통해 카카오 OAuth 로그인을 시작하도록 합니다.

'use client';

import { createClient } from './client'; // 앞서 만든 클라이언트 생성 함수 import
import { Button } from './ui/button'; // UI를 위한 버튼 컴포넌트 import

export default function KakaoButton() {
  const signInWithKakao = async () => {
    const supabase = createClient();
    await supabase.auth.signInWithOAuth({
      provider: 'kakao',
      options: { redirectTo: `${window.location.origin}/auth/callback` },
    });
  };

  return <Button onClick={signInWithKakao}>카카오 로그인</Button>;
}

OAuth 콜백 처리

카카오 로그인 후, Supabase에서 OAuth 콜백을 처리하는 함수가 필요합니다. 이를 통해 로그인 성공 여부를 확인하고, 적절한 페이지로 리다이렉트합니다.

import { NextResponse } from 'next/server';
import { createClient } from './client'; // 앞서 만든 클라이언트 생성 함수 import

export async function GET(request: Request) {
  const { searchParams, origin } = new URL(request.url);
  const code = searchParams.get('code');
  const next = searchParams.get('next') ?? '/';

  if (code) {
    const supabase = createClient();
    const { error } = await supabase.auth.exchangeCodeForSession(code);
    if (!error) {
      const forwardedHost = request.headers.get('x-forwarded-host');
      const isLocalEnv = process.env.NODE_ENV === 'development';
      if (isLocalEnv) {
        return NextResponse.redirect(`${origin}${next}`);
      } else if (forwardedHost) {
        return NextResponse.redirect(`https://${forwardedHost}${next}`);
      } else {
        return NextResponse.redirect(`${origin}${next}`);
      }
    }
  }
  
  return NextResponse.redirect(`${origin}/auth/auth-code-error`);
}

이제 카카오 로그인이 성공적으로 처리되었는지 확인할 수 있도록 콜백 URL에서 세션을 교환하고, 필요한 경우 적절한 리다이렉트를 설정합니다.

마무리

이제 Supabase와 Next.js 14을 사용하여 카카오 로그인을 쉽게 구현할 수 있게 되었습니다. 이 방법을 통해 사용자는 손쉽게 카카오 로그인을 사용할 수 있으며, 필요한 데이터는 안전하게 서버사이드에서 처리할 수 있습니다.

이 글이 여러분의 프로젝트에 도움이 되었기를 바랍니다. 더 나아가 다양한 OAuth 제공자와 통합하여 더욱 풍부한 기능을 가진 애플리케이션을 만들어 보세요.