카카오 소셜 로그인 리액트로 구현하는 방법

by

개인정보수집을 피하는 방법중에 하나는 로그인 정보를 직접 구현하지 않고 소셜 로그인 기능을 사용하는 방법이 있습니다. 카카오 소셜 로그인 기능을 React와 Next.js를 사용해 구현하는 방법을 알아보도록 하겠습니다.

아래는 Next.js 프로젝트 설정 시 TypeScript, ESLint, Tailwind CSS, src/ 디렉토리, App Router, 그리고 커스텀 import alias를 사용하는 구성에 맞춘 전체 소스 코드

1단계: Next.js 프로젝트 생성

먼저 Next.js 프로젝트를 생성합니다. 이 과정에서 질문에 맞게 옵션을 선택합니다.

npx create-next-app@latest my-kakao-login-app

질문에 대한 답변:

  • Would you like to use TypeScript? … Yes
  • Would you like to use ESLint? … Yes
  • Would you like to use Tailwind CSS? … Yes
  • Would you like to use src/ directory? … Yes
  • Would you like to use App Router? (recommended) … Yes
  • Would you like to customize the default import alias (@/*)? … Yes

2단계: 카카오 OAuth 설정

카카오 앱을 생성하고 .env.local 파일을 프로젝트 루트에 추가합니다.

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=your_secret

KAKAO_CLIENT_ID=your_kakao_client_id
KAKAO_CLIENT_SECRET=your_kakao_client_secret
KAKAO_REDIRECT_URI=http://localhost:3000/api/auth/callback/kakao

3단계: next-auth 설치

next-auth 라이브러리와 카카오 SDK를 설치합니다.

npm install next-auth @types/next-auth

4단계: next-auth 설정 파일 생성

src/app/api/auth/[...nextauth]/route.ts 파일을 생성하고, 아래 코드를 작성합니다.

// src/app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import KakaoProvider from "next-auth/providers/kakao";

export const authOptions = {
  providers: [
    KakaoProvider({
      clientId: process.env.KAKAO_CLIENT_ID!,
      clientSecret: process.env.KAKAO_CLIENT_SECRET!,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET!,
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

5단계: 로그인 페이지 및 버튼 구현

src/app/page.tsx 파일을 생성하고, 아래 코드를 작성합니다.

// src/app/page.tsx
import { signIn, signOut, useSession } from "next-auth/react";

export default function Home() {
  const { data: session } = useSession();

  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <h1 className="text-2xl font-bold">Kakao Login</h1>
      {session ? (
        <div>
          <p>Welcome, {session.user?.name}</p>
          <button
            onClick={() => signOut()}
            className="mt-4 px-4 py-2 bg-red-500 text-white rounded"
          >
            Sign out
          </button>
        </div>
      ) : (
        <button
          onClick={() => signIn("kakao")}
          className="mt-4 px-4 py-2 bg-yellow-400 text-black rounded"
        >
          Sign in with Kakao
        </button>
      )}
    </div>
  );
}

6단계: Tailwind CSS 설정

Tailwind CSS 설정을 위해 tailwind.config.js, postcss.config.js, globals.css 파일을 수정합니다.

  1. tailwind.config.js:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
  1. postcss.config.js:
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};
  1. src/app/globals.css 파일을 수정합니다.
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply bg-gray-100;
}

7단계: 세션 상태 확인 및 보호된 페이지 구현

src/app/protected/page.tsx 파일을 생성하고, 아래와 같이 코드를 작성합니다.

// src/app/protected/page.tsx
import { getSession } from "next-auth/react";
import { GetServerSidePropsContext } from "next";

export default function Protected({ session }: { session: any }) {
  if (!session) {
    return <p>Access Denied</p>;
  }

  return (
    <div className="flex flex-col items-center justify-center h-screen">
      <h1 className="text-2xl font-bold">Protected Page</h1>
      <p>Welcome, {session.user?.name}</p>
    </div>
  );
}

export async function getServerSideProps(context: GetServerSidePropsContext) {
  const session = await getSession(context);

  if (!session) {
    return {
      redirect: {
        destination: "/",
        permanent: false,
      },
    };
  }

  return {
    props: { session },
  };
}

8단계: ESLint 및 TypeScript 설정

tsconfig.json 및 .eslintrc.json 파일은 Next.js 기본 설정을 따릅니다. 필요에 따라 커스텀 규칙을 추가할 수 있습니다.

// tsconfig.json
{
  "compilerOptions": {
    "target": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "incremental": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "module": "esnext",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "next.config.js"
  ],
  "exclude": ["node_modules"]
}
// .eslintrc.json
{
  "extends": "next/core-web-vitals",
  "rules": {
    "react/react-in-jsx-scope": "off"
  }
}

이제 모든 설정이 완료되었습니다. 다음 명령어로 프로젝트를 실행하여 확인할 수 있습니다.

npm run dev

브라우저에서 http://localhost:3000에 접속하여 카카오 소셜 로그인을 테스트하세요. 이 프로젝트는 TypeScript, ESLint, Tailwind CSS를 사용하며, src/ 디렉토리 구조와 App Router를 활용하여 구조적으로 깔끔한 코드베이스를 유지할 수 있습니다.

Leave a Comment