React & Next.js

Next.js 로그인 인증 시스템 구현 가이드

0

Next.js는 서버사이드 렌더링을 지원하는 React 기반의 프레임워크로, 웹 애플리케이션에서 효과적으로 사용자 인증을 관리하는 방법을 제공합니다. 본 가이드에서는 Next.js를 사용하여 로그인 인증 시스템을 구축하는 방법을 단계별로 설명하며, `next-auth` 라이브러리를 활용한 실제 예시를 통해 이해를 돕습니다.

1. 필수 라이브러리 설치

먼저, Next.js 프로젝트에 필요한 라이브러리를 설치합니다. `axios`는 서버와의 HTTP 통신을 관리하며, `next-auth`는 간편하게 인증 시스템을 통합할 수 있는 라이브러리입니다.

npm install next-auth axios

2. Next-Auth 설정

`next-auth`는 인증 프로세스를 간소화하며 다양한 인증 제공자와의 연동을 지원합니다. `/pages/api/auth/[…nextauth].js` 파일을 설정하여 로그인 메커니즘을 구현합니다. 여기서는 자격증명을 이용한 로컬 로그인 방식을 예로 들었습니다.

import NextAuth from "next-auth"
import Providers from "next-auth/providers"

export default NextAuth({
  providers: [
    Providers.Credentials({
      authorize: async (credentials) => {
        const user = { id: 1, name: "J Smith", email: "jsmith@example.com" }
        if (credentials.username === "jsmith" && credentials.password === "password") {
          return Promise.resolve(user)
        } else {
          return Promise.resolve(null)
        }
      }
    })
  ],
  session: {
    jwt: true,
  },
  jwt: {
    secret: "secret",
  },
  pages: {
    signIn: '/auth/signin',
  }
})

3. 로그인 페이지 구현

로그인 페이지는 사용자 인터페이스를 제공하며, 사용자가 입력한 정보를 서버로 전송합니다. 이 페이지는 `/pages/auth/signin.js`에 구현되며, `signIn` 함수를 사용하여 로그인 요청을 처리합니다.

import { signIn } from 'next-auth/client';

const SignIn = () => {
  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      signIn('credentials', { username: 'jsmith', password: 'password' });
    }}>
      <input name="username" type="text" required />
      <input name="password" type="password" required />
      <button type="submit">로그인</button>
    </form>
  );
};

export default SignIn;

4. 보호된 페이지 접근 제어

`getServerSideProps` 함수를 사용하여 서버 사이드에서 사용자의 로그인 상태를 확인하고, 인증되지 않은 사용자를 로그인 페이지로 리다이렉트 시킵니다. 이는 서버에서 직접 처리되어 보안을 강화합니다.

import { getSession } from 'next-auth/client';

export const getServerSideProps = async (context) => {
  const session = await getSession({ req: context.req });
  if (!session) {
    return {
      redirect: {
        destination: '/auth/signin',
        permanent: false,
      },
    };
  }
  return {
    props: { session },
  };
};

function ProtectedPage({ session }) {
  return <div>Welcome {session.user.name}!</div>;
}

export default ProtectedPage;

5. 로그아웃 기능 구현

로그인이 중요한 만큼, 로그아웃 처리도 안전하게 구현해야 합니다. `next-auth`는 로그아웃 기능을 간단하게 구현할 수 있도록 지원합니다. 사용자가 로그아웃할 때 안전하게 세션을 종료하고, 관련 쿠키를 정리할 수 있습니다.

import { signOut } from 'next-auth/client';

const LogoutButton = () => {
  return (
    <button onClick={() => signOut()}>
      로그아웃
    </button>
  );
};

export default LogoutButton;

6. 클라이언트 측 상태 관리

Next.js 애플리케이션에서 사용자의 로그인 상태를 클라이언트 측에서 관리하기 위해서는 `useSession` 훅을 활용할 수 있습니다. 이 훅을 사용하면 컴포넌트 내에서 현재 로그인한 사용자의 세션 정보를 쉽게 조회하고 사용할 수 있습니다.

import { useSession } from 'next-auth/client';

function UserProfile() {
  const [session, loading] = useSession();

  if (loading) {
    return <p>Loading...</p>;
  }

  return session ? <p>Welcome, {session.user.name}!</p> : <p>You are not logged in.</p>;
}

7. 성능 최적화와 보안

Next.js에서 제공하는 기본 보안 기능 외에도, 개발자는 HTTPS를 사용하여 데이터 전송 중인 정보를 암호화하고, 적절한 CORS 정책을 설정하여 애플리케이션의 보안을 강화할 수 있습니다. 또한, 서버 사이드 렌더링과 정적 생성을 통해 페이지 로딩 시간을 단축하고, SEO 성능을 향상시킬 수 있습니다.

결론

Next.js를 사용한 로그인 인증 시스템 구현은 개발자에게 유연성을 제공하며, `next-auth`와 같은 라이브러리를 활용하면 다양한 인증 방식을 손쉽게 통합할 수 있습니다. 이러한 기능들은 모두 사용자의 편의성을 높이고, 애플리케이션의 보안을 강화하는 데 기여합니다. 따라서 안전하고 효율적인 웹 애플리케이션을 구축하려는 개발자들에게 Next.js는 매우 적합한 선택이 될 것입니다.

Leave a Reply