🔐 Next.js App Router 인증 구현 가이드

🔐 Next.js App Router 인증 구현 가이드

Next.js App Router 기반 애플리케이션에서 인증(Authentication) 기능을 구현하는 방법을 정리했습니다.
NextAuth.js, 미들웨어, 세션 관리 등 실전에서 바로 사용할 수 있는 전략 위주로 구성되어 있습니다.

---

✅ 1. 인증의 핵심 개념

• Authentication: 사용자의 신원을 확인 (로그인)
• Authorization: 권한 부여 (접근 제어)
• Session Management: 로그인 상태 유지 (쿠키, JWT 등)

---

✅ 2. NextAuth.js로 인증 구현하기

설치

npm install next-auth

환경변수 설정 (.env)

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=long-random-string

→ secret 값은 openssl rand -base64 32 명령어로 생성 가능

---

API 라우트 생성

// app/api/auth/[...nextauth]/route.ts
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';

const handler = NextAuth({
  providers: [
    GitHubProvider({
      clientId: process.env.GITHUB_ID!,
      clientSecret: process.env.GITHUB_SECRET!,
    }),
  ],
});

export { handler as GET, handler as POST };

---

✅ 3. 로그인/로그아웃 UI

반응형

// app/login/page.tsx
'use client';
import { signIn } from 'next-auth/react';

export default function LoginPage() {
  return (
    <div>
      <h2>로그인</h2>
      <button onClick={() => signIn('github')}>GitHub 로그인</button>
    </div>
  );
}

// app/dashboard/page.tsx
'use client';
import { signOut } from 'next-auth/react';

export default function DashboardPage() {
  return (
    <div>
      <h2>대시보드</h2>
      <button onClick={() => signOut()}>로그아웃</button>
    </div>
  );
}

---

✅ 4. 세션 확인 및 리디렉션

'use client';
import { useSession } from 'next-auth/react';
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

export default function Dashboard() {
  const { data: session, status } = useSession();
  const router = useRouter();

  useEffect(() => {
    if (status === 'unauthenticated') {
      router.push('/login');
    }
  }, [status]);

  if (status === 'loading') return <p>로딩 중...</p>;

  return <div>환영합니다, {session?.user?.name}님!</div>;
}

---

✅ 5. 라우트 보호 미들웨어 설정

// middleware.ts
import { NextRequest, NextResponse } from 'next/server';

export function middleware(req: NextRequest) {
  const token = req.cookies.get('next-auth.session-token');
  const isProtected = req.nextUrl.pathname.startsWith('/dashboard');

  if (isProtected && !token) {
    return NextResponse.redirect(new URL('/login', req.url));
  }

  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*'],
};

인증된 사용자만 특정 경로 접근 가능하게 만듭니다.

---

✅ 6. 기타 인증 솔루션 대안

솔루션 특징

Auth0	OAuth, MFA, 규정 준수
Clerk	UI/세션 통합 제공
Supabase	Firebase 대체, 내장 인증
Firebase	Google 생태계 통합

---

🔗 참고 문자열 (URL)

https://nextjs.org/docs/app/guides/authentication

---

 

Next.js, App Router, 인증 구현, NextAuth, 로그인, OAuth, 세션 관리, 미들웨어 보호, 클라이언트 인증, 보안 전략, SEO 최적화 10개