Next.js 14과 App Router로 Google 인증 설정하는 초보자 가이드

2024-11-12 22:27:11

nextjsbeginnersgooglecloudwebdev

Next.js 14에서 Google 인증 추가하기: 초보자를 위한 가이드

Next.js 14 앱에 Google 인증을 추가하는 것은 더 이상 복잡한 과정이 아닙니다. 이 가이드는 구글 검색 및 네이버 검색 알고리즘이 잘 인식할 수 있도록 준비되었습니다. 구글 인증을 간편하게 설정하고, 사용자에게 웹사이트 경험을 향상시키는 방법을 소개하겠습니다.

기본 준비 사항

구글 인증을 시작하기 전에 필요한 몇 가지 준비물이 있습니다:

Google Cloud Console 계정
기본적인 JavaScript 지식
설치된 Next.js 14 프로젝트

이 모든 것이 준비되었다면, 이제 기본적인 설정을 통해 Google 인증 기능을 최적화할 수 있습니다.

Step 1: Next.js 14 프로젝트 생성하기

먼저, 터미널에서 다음 명령어를 입력하여 새 Next.js 프로젝트를 만듭니다:

npx create-next-app@latest my-google-auth-app

설치 과정에서 Tailwind CSS 포함 여부를 묻는다면 '예'를 선택하세요. Tailwind CSS는 반응형 디자인을 간단하고 빠르게 스타일링할 수 있게 도와줍니다.

Step 2: Google Cloud OAuth 자격 증명 설정하기

구글 인증을 위해서는 Google Cloud에서 자격 증명을 생성해야 합니다. 이를 위해 Google Cloud Console로 이동하여 프로젝트를 시작하세요.

APIs & Services > Credentials로 이동한 후 Create Credentials를 클릭합니다.
OAuth 2.0 Client ID를 선택하고, 애플리케이션 타입을 웹 애플리케이션으로 설정합니다.
Authorized redirect URIs에 http://localhost:3000/api/auth/callback을 입력합니다.

이제 Google에서 제공한 Client ID와 Client Secret을 보관하세요.

Step 3: 환경 변수 설정

Google Cloud에서 받은 자격 증명을 안전하게 보관하기 위해 Next.js 프로젝트의 .env.local 파일에 다음과 같이 추가합니다:

GOOGLE_CLIENT_ID=your-google-client-id
GOOGLE_CLIENT_SECRET=your-google-client-secret
NEXTAUTH_SECRET=super-secret-key

your-google-client-id와 your-google-client-secret은 Google Cloud에서 받은 실제 값으로 대체해야 합니다. 이 정보를 Github에 업로드하지 않도록 주의하세요.

NEXTAUTH_SECRET 알아보기

NEXTAUTH_SECRET은 세션 보안을 유지하는 중요한 요소입니다. 이 Secret Key는 사용자 정보를 안전하게 보호하며, macOS나 Linux의 경우 다음 명령어로 쉽게 생성할 수 있습니다:

openssl rand -base64 32

생성된 키를 .env.local 파일에 추가하세요:

NEXTAUTH_SECRET=your-super-secure-random-key

Step 4: Google Provider로 NextAuth 설정하기

next-auth를 사용하여 인증 플로우를 간편하게 처리할 수 있습니다. 우선, next-auth를 설치합니다:

npm install next-auth

이후 app/api/auth/[...nextauth]/route.js 파일을 생성하고 다음과 같이 작성합니다:

import NextAuth from 'next-auth';
import GoogleProvider from 'next-auth/providers/google';

export const authOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  secret: process.env.NEXTAUTH_SECRET,
};

const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };

이 설정을 통해 NextAuth가 복잡한 OAuth 플로우를 자동으로 처리합니다.

Step 5: 로그인 및 로그아웃 함수 생성하기

사용자가 로그인 및 로그아웃 버튼을 통해 쉽게 인증을 할 수 있도록 함수를 추가합니다. lib/auth.js 파일을 생성하고 다음과 같이 작성합니다:

import { signIn, signOut } from 'next-auth/react';

export const handleSignIn = () => signIn('google');
export const handleSignOut = () => signOut();

Step 6: 로그인 및 로그아웃 버튼 추가하기

이제 사용자 인터페이스에 실제 버튼을 추가해 보겠습니다. app/page.js 파일에서 다음과 같이 코드를 작성합니다:

"use client"

import { handleSignIn, handleSignOut } from '../lib/auth';
import { useSession } from 'next-auth/react';

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

  return (
    <main className="flex items-center justify-center min-h-screen bg-gray-100">
      {session ? (
        <div>
          <h2 className="text-lg font-medium text-gray-700">
            Welcome, {session.user.name}!
          </h2>
          <button
            onClick={handleSignOut}
            className="px-4 py-2 mt-4 text-white bg-red-500 rounded-lg hover:bg-red-600"
          >
            Sign Out
          </button>
        </div>
      ) : (
        <button
          onClick={handleSignIn}
          className="px-6 py-3 text-white bg-blue-600 rounded-lg hover:bg-blue-700"
        >
          Sign in with Google
        </button>
      )}
    </main>
  );
}

이 코드는 로그인 여부에 따라 환영 메시지와 로그아웃 버튼 또는 Google로 로그인 버튼을 표시합니다.

Step 7: Google 인증 테스트 하기

모든 설정이 완료되었으니 다음 명령어로 Next.js 앱을 실행해 보세요:

npm run dev

http://localhost:3000으로 이동하면 Google로 로그인 버튼이 표시됩니다. 클릭하여 Google 로그인 화면이 나타나도록 하고, 인증을 마치면 Next.js 앱으로 다시 리다이렉션됩니다.

이 과정이 다소 번거로울 수 있지만, 이 가이드를 통해 Google 인증 기능을 안전하고 효율적으로 구현할 수 있습니다.

참고 URL: