SvelteKit 유저 로그인 구현

로

SvelteKit에서 유저 로그인을 구현하는 방법을 설명하겠습니다. 일반적인 로그인 방식에는 다음과 같은 방법이 있습니다.

  1. JWT 기반 로그인 (JSON Web Token)
  2. Session 기반 로그인 (쿠키 사용)
  3. OAuth 로그인 (Google, Kakao, Github 등)

여기서는 **Session 기반 로그인 (쿠키 사용)**을 예제로 설명하겠습니다.

1. 프로젝트 설정

먼저 SvelteKit 프로젝트를 생성합니다.

npm create svelte@latest my-app
cd my-app
npm install
npm install @auth/sveltekit bcryptjs

@auth/sveltekit은 인증을 쉽게 구현할 수 있는 라이브러리이며, bcryptjs는 비밀번호 해싱에 사용됩니다.

2. /src/routes/+layout.server.ts (Session Store 설정)

세션을 사용하려면 hooks.server.ts에서 handle을 설정해야 합니다.

// src/hooks.server.ts
import { handleSession } from '@auth/sveltekit';

export const handle = handleSession({
  secret: 'your-secret-key', // 환경 변수에서 관리하는 것이 좋음
});

3. /src/routes/auth/login/+server.ts (로그인 API)

유저가 로그인하면 비밀번호를 확인하고 세션을 설정합니다.

import { json } from '@sveltejs/kit';
import bcrypt from 'bcryptjs';

const users = [
  { id: 1, username: 'testuser', password: bcrypt.hashSync('password123', 10) }
];

export async function POST({ request, locals }) {
  const { username, password } = await request.json();
  const user = users.find(u => u.username === username);

  if (!user || !bcrypt.compareSync(password, user.password)) {
    return json({ error: 'Invalid credentials' }, { status: 401 });
  }

  locals.session.set({ user: { id: user.id, username: user.username } });

  return json({ message: 'Login successful' });
}

4. /src/routes/auth/logout/+server.ts (로그아웃 API)

유저의 세션을 제거합니다.

import { json } from '@sveltejs/kit';

export async function POST({ locals }) {
  locals.session.destroy();
  return json({ message: 'Logout successful' });
}

5. 로그인 UI 구현 (/src/routes/login/+page.svelte)

<script>
  import { onMount } from 'svelte';
  import { page } from '$app/stores';

  let username = '';
  let password = '';
  let errorMessage = '';

  async function login() {
    const res = await fetch('/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password })
    });

    if (res.ok) {
      window.location.href = '/';
    } else {
      const data = await res.json();
      errorMessage = data.error;
    }
  }
</script>

<form on:submit|preventDefault={login}>
  <input type="text" bind:value={username} placeholder="Username" required />
  <input type="password" bind:value={password} placeholder="Password" required />
  {#if errorMessage}
    <p style="color: red;">{errorMessage}</p>
  {/if}
  <button type="submit">Login</button>
</form>

6. 로그아웃 버튼 (/src/routes/+layout.svelte)

<script>
  async function logout() {
    await fetch('/auth/logout', { method: 'POST' });
    window.location.reload();
  }
</script>

<button on:click={logout}>Logout</button>

7. 로그인 유지 (/src/routes/+layout.server.ts)

export async function load({ locals }) {
  return {
    user: locals.session.data?.user || null
  };
}

이렇게 하면 user 정보가 SvelteKit의 load 함수에서 제공됩니다.

✅ 최종 정리

  1. 유저 로그인 요청 시 비밀번호 검증 후 세션을 저장합니다.
  2. 로그아웃 하면 세션을 제거합니다.
  3. 로그인 유지를 위해 session을 활용하여 user 데이터를 가져옵니다.

이제 SvelteKit에서 간단한 로그인 시스템을 완성했습니다! 🚀


댓글 남기기