SvelteKit + Lucia: 이메일 및 비밀번호 인증

최근에 SvelteKit용 인증 라이브러리인 Lucia을 출시했습니다. 인증 프로세스의 대부분을 처리하고 SvelteKit 프로젝트에 대한 인증을 더 쉽게 구현할 수 있습니다. 다른 라이브러리와 달리 기본 인증 라이브러리가 아니며 시작하는 데 약간의 시간이 더 필요하지만 기본 사항을 알고 나면 완전히 사용자 지정할 수 있습니다. 단순히 토큰을 생성하는 것이 아니라 새로 고침 토큰과 함께 수명이 짧은 액세스 토큰을 사용하고 자동으로 새로 고침하며 교체 새로 고침 토큰을 구현하고 새로 고침 토큰 도난을 감지합니다.

이 가이드는 최소한 로그인 부분에서 이메일 및 비밀번호 인증을 구현하는 방법을 다룹니다. the documentation 에서 더 잘 설명된 일부 부분에 대해 얼버무리겠습니다.

설정

기본 설정에 대해 설명합니다here.

데이터 베이스

데이터베이스별 설명은 adapters을 참조하십시오. 값이 고유한 email(text/varchar)라는 새 열을 추가합니다.

프런트엔드

JSON 본문을 사용하여 가입 또는 로그인 끝점에 POST 요청을 보냅니다.

const signup = async () => {
    await fetch("/api/signup", {
        method: "POST",
        body: JSON.stringify({
            email,
            password,
        }),
    });
};

가입하기

routes/api/signup.ts를 만들고 POST 요청을 수락합니다. 본문 데이터에서 이메일과 비밀번호를 가져옵니다.

import type { RequestHandler } from "@sveltejs/kit";
import { auth } from "$lib/lucia";

export const POST: RequestHandler = async ({ request }) => {
    const { email, password } = await request.json();
    if (!email || !password) {
        return {
            status: 400,
        };
    }
};

새 사용자 만들기

createUser의 인증 ID와 email의 식별자를 사용하여 email 을 사용하여 새 사용자를 만듭니다. 인증 ID는 사용된 인증 방법(Github OAuth의 경우 "github")을 나타내고 식별자는 해당 방법 내의 사용자(GitHub의 경우 사용자 이름 또는 이메일)를 나타냅니다. 사용자를 식별하는 데 사용되며 사용자 데이터를 저장하지 않습니다(사용자의 이메일을 저장해야 하는 경우 db에 이메일 열을 생성).
인증 ID 및 식별자에 대한 설명은 overview 페이지를 참조하십시오.

암호 옵션을 사용하여 사용자의 암호를 저장하고 user_data를 사용하여 사용자의 이메일을 저장합니다. 쿠키(새로 고침, 액세스 및 지문 토큰)를 설정하고 응답에서 사용자를 리디렉션합니다. AUTH_DUPLICATE_IDENTIFER_TOKEN 오류는 사용자가 동일한 인증 ID 및 식별자(이 경우 이메일)를 사용하여 새 계정을 만들려고 할 때 발생합니다.

try {
    const createUser = await auth.createUser("email", email, {
        password,
        user_data: {
            email,
        },
    });
    return {
        status: 302,
        headers: {
            "set-cookie": createUser.cookies,
            location: "/",
        },
    };
} catch (e) {
    const error = e as Error;
    if (
        error.message === "AUTH_DUPLICATE_IDENTIFER_TOKEN" ||
        error.message === "AUTH_DUPLICATE_USER_DATA"
    ) {
        return {
            status: 400,
            body: JSON.stringify({
                error: "Email already in use.",
            }),
        };
    }
    return {
        status: 500,
        body: JSON.stringify({
            error: "Unknown error.",
        }),
    };
}

로그인

routes/api/login.ts를 만들고 POST 요청을 수락합니다. 본문에서 사용자의 이메일과 비밀번호를 가져옵니다.

import type { RequestHandler } from "@sveltejs/kit";
import { auth } from "$lib/lucia";

export const POST: RequestHandler = async ({ request }) => {
    const form = await request.formData();
    const email = form.get("email")?.toString();
    const password = form.get("password")?.toString();
    if (!email || !password) {
        return {
            status: 400,
        };
    }
};

사용자 인증

authenticateUser 을 사용하여 사용자를 인증합니다. 이 경우 세 번째 매개변수에 비밀번호가 필요합니다. 인증 ID는 사용자를 생성할 때 사용한 것과 동일해야 합니다. 이메일이 잘못되었거나 비밀번호가 잘못되었는지 사용자에게 알리지 않는 것이 중요합니다.

try {
    const authenticateUser = await auth.authenticateUser(
        "email",
        email,
        password
    );
    return {
        status: 302,
        headers: {
            "set-cookie": createUser.cookies,
            location: "/",
        },
    };
} catch (e) {
    const error = e as Error;
    if (
        error.message === "AUTH_INVALID_IDENTIFIER_TOKEN" ||
        error.message === "AUTH_INVALID_PASSWORD"
    ) {
        return {
            status: 400,
            body: JSON.stringify({
                error: "Incorrect email or password.",
            }),
        };
    }
    // database connection error
    return {
        status: 500,
        body: JSON.stringify({
            error: "Unknown error.",
        }),
    };
}

그게 다야. Lucia 및 인증의 다른 부분(예: 토큰 새로 고침 및 보호 경로)은 getting started 에 설명되어 있습니다.