2026 카카오 로그인 Next.js 연동 가이드 (Supabase Auth)

https://<your-project-ref>.supabase.co/auth/v1/callback

# Supabase
NEXT_PUBLIC_SUPABASE_URL=https://<your-project-ref>.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJ...your-anon-key

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

export function createSupabaseBrowserClient() {
  const url = process.env.NEXT_PUBLIC_SUPABASE_URL;
  const key = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

  if (!url || !key) {
    throw new Error(
      "NEXT_PUBLIC_SUPABASE_URL과 NEXT_PUBLIC_SUPABASE_ANON_KEY를 " +
      ".env.local에 설정하세요."
    );
  }

  return createBrowserClient(url, key);
}

"use client";

import { useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { createSupabaseBrowserClient } from "@/lib/supabase/client";

export default function LoginPage() {
  const router = useRouter();
  const [error, setError] = useState("");

  const supabase = createSupabaseBrowserClient();

  const handleOAuthLogin = async (
    provider: "kakao" | "google"
  ) => {
    setError("");
    const { error: authError } =
      await supabase.auth.signInWithOAuth({
        provider,
        options: {
          redirectTo:
            window.location.origin + "/auth/callback",
        },
      });

    if (authError) {
      setError(authError.message);
    }
  };

  return (
    <div className="flex min-h-screen items-center justify-center">
      <div className="w-full max-w-sm">
        <button
          type="button"
          onClick={() => handleOAuthLogin("kakao")}
          className="w-full rounded-lg bg-[#FEE500] px-4 py-2.5
                     text-sm font-medium text-[#191919]"
        >
          카카오로 로그인
        </button>

        <button
          type="button"
          onClick={() => handleOAuthLogin("google")}
          className="mt-3 w-full rounded-lg border
                     border-gray-300 bg-white px-4 py-2.5
                     text-sm font-medium text-gray-700"
        >
          구글로 로그인
        </button>

        {error && (
          <p className="mt-4 text-sm text-red-600">
            {error}
          </p>
        )}
      </div>
    </div>
  );
}

import { NextResponse } from "next/server";
import { createSupabaseServerClient } from "@/lib/supabase/server";

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

  // Open Redirect 방지
  const safePath =
    next.startsWith("/") && !next.startsWith("//")
      ? next
      : "/dashboard";

  if (code) {
    const supabase = await createSupabaseServerClient();
    const { error } =
      await supabase.auth.exchangeCodeForSession(code);
    if (!error) {
      return NextResponse.redirect(
        `${origin}${safePath}`
      );
    }
  }

  // 인증 실패 시 로그인 페이지로
  return NextResponse.redirect(`${origin}/login`);
}

import { createServerClient } from "@supabase/ssr";
import {
  NextResponse,
  type NextRequest,
} from "next/server";

/** 인증 불필요한 공개 라우트 */
const PUBLIC_ROUTES = [
  "/",
  "/login",
  "/signup",
  "/auth",
  "/api",
  "/terms",
  "/privacy",
  "/refund",
  "/pricing",
  "/thank-you",
];

function isPublicRoute(pathname: string): boolean {
  return PUBLIC_ROUTES.some(
    (route) =>
      pathname === route ||
      pathname.startsWith(`${route}/`)
  ) ||
    pathname === "/robots.txt" ||
    pathname === "/sitemap.xml";
}

export async function updateSession(
  request: NextRequest
) {
  const supabaseUrl =
    process.env.NEXT_PUBLIC_SUPABASE_URL;
  const supabaseAnonKey =
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;

  // 환경변수 미설정 시 스킵 (초기 배포/데모)
  if (!supabaseUrl || !supabaseAnonKey) {
    return NextResponse.next({ request });
  }

  let supabaseResponse = NextResponse.next({ request });

  const supabase = createServerClient(
    supabaseUrl,
    supabaseAnonKey,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll();
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) =>
            request.cookies.set(name, value)
          );
          supabaseResponse = NextResponse.next({
            request,
          });
          cookiesToSet.forEach(
            ({ name, value, options }) =>
              supabaseResponse.cookies.set(
                name,
                value,
                options
              )
          );
        },
      },
    }
  );

  const {
    data: { user },
  } = await supabase.auth.getUser();

  const pathname = request.nextUrl.pathname;

  // 미인증 → 로그인 페이지로 리다이렉트
  if (!isPublicRoute(pathname) && !user) {
    const url = request.nextUrl.clone();
    url.pathname = "/login";
    url.searchParams.set("redirectTo", pathname);
    return NextResponse.redirect(url);
  }

  // 이미 로그인한 사용자 → 대시보드로
  if (
    user &&
    (pathname === "/login" || pathname === "/signup")
  ) {
    const url = request.nextUrl.clone();
    url.pathname = "/dashboard";
    return NextResponse.redirect(url);
  }

  return supabaseResponse;
}

import { type NextRequest } from "next/server";
import { updateSession } from "@/lib/supabase/middleware";

export async function middleware(request: NextRequest) {
  return await updateSession(request);
}

export const config = {
  matcher: [
    // 정적 파일과 _next 제외
    "/((?!_next/static|_next/image|favicon.ico|.*\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
  ],
};

src/
├── lib/
│   └── supabase/
│       ├── client.ts          # 브라우저용 Supabase 클라이언트
│       ├── server.ts          # 서버용 Supabase 클라이언트
│       └── middleware.ts      # 인증 미들웨어 로직
├── app/
│   ├── (auth)/
│   │   └── login/
│   │       └── page.tsx       # 카카오/구글 로그인 페이지
│   ├── auth/
│   │   └── callback/
│   │       └── route.ts       # OAuth 콜백 처리
│   └── middleware.ts          # Next.js 미들웨어 진입점
└── .env.local                 # Supabase 환경변수