使用Lucia Auth开发SvelteKit注册页时出现500内部错误

问题概述 #

在SvelteKit中使用Lucia Auth构建注册页面时，添加以下load函数后触发500内部错误：

export const load: PageServerLoad = async ({ locals }) => {
    const session = await locals.validate()
    if (session) {
        throw redirect(302, "/")
    }
}

错误提示：TypeError: locals.validate is not a function

问题原因 #

Lucia Auth不会自动将validate、setSession等方法注入到SvelteKit的locals对象中，必须通过服务器hooks配置中间件完成方法注入，你的代码缺少了这一关键配置步骤。

解决方案 #

1. 创建并配置hooks.server.ts #

在src目录下创建hooks.server.ts文件，添加以下代码：

import { auth } from "$lib/server/lucia";
import type { Handle } from "@sveltejs/kit";
import { redirect } from "@sveltejs/kit";

export const handle: Handle = async ({ event, resolve }) => {
    // 注入validate方法
    event.locals.validate = async () => {
        const sessionId = event.cookies.get(auth.sessionCookieName);
        if (!sessionId) return null;
        const { session, user } = await auth.validateSession(sessionId);
        // 刷新过期会话的cookie
        if (session && session.fresh) {
            const sessionCookie = auth.createSessionCookie(session.id);
            event.cookies.set(sessionCookie.name, sessionCookie.value, {
                path: ".",
                ...sessionCookie.attributes
            });
        }
        // 清除无效会话的cookie
        if (!session) {
            const sessionCookie = auth.createBlankSessionCookie();
            event.cookies.set(sessionCookie.name, sessionCookie.value, {
                path: ".",
                ...sessionCookie.attributes
            });
        }
        return { session, user };
    };

    // 注入validateUser方法
    event.locals.validateUser = async () => {
        const { session, user } = await event.locals.validate();
        if (!user) throw redirect(302, "/login");
        return { session, user };
    };

    // 注入setSession方法
    event.locals.setSession = async (session) => {
        if (session) {
            const sessionCookie = auth.createSessionCookie(session.id);
            event.cookies.set(sessionCookie.name, sessionCookie.value, {
                path: ".",
                ...sessionCookie.attributes
            });
        } else {
            const sessionCookie = auth.createBlankSessionCookie();
            event.cookies.set(sessionCookie.name, sessionCookie.value, {
                path: ".",
                ...sessionCookie.attributes
            });
        }
    };

    return resolve(event);
};

2. 修正注册逻辑中的会话设置 #

在+page.server.ts的actions中，取消注释locals.setSession(session)并补充必要参数，确保注册成功后创建会话：

export const actions: Actions = {
    default: async ({ request, locals }) => { // 新增locals参数
        const { name, username, password } = Object.fromEntries(
            await request.formData(),
        ) as Record<string, string>

        if (typeof username !== "string" || typeof password !== "string") {
            return fail(400);
        }

        try {
            const user = await auth.createUser({
                primaryKey: {
                    providerId: "username",
                    providerUserId: username,
                    password
                },
                attributes: {
                    name, username
                }
            });
            const session = await auth.createSession(user.userId);
            locals.setSession(session); // 取消注释该行
            throw redirect(302, "/"); // 注册成功后跳转至首页
        } catch {
            return fail(400, { error: "用户名已被使用" });
        }
    }
}

3. 重启开发服务器 #

配置完成后重启SvelteKit开发服务器，确保hooks配置生效。

验证 #

再次访问注册页面，locals.validate方法将正常执行，已登录用户会被自动重定向到首页。

内容的提问来源于stack exchange，提问作者Karan