SvelteKit + PocketBase Returns `:-1}]` Error

[aarvin roshin]

I'm making a PocketBase + SvelteKit app, and followed the SSR instructions. Here's what my code looks like:

hooks.server.ts

import type { Handle } from "@sveltejs/kit";
import PocketBase from "pocketbase";

export const handle: Handle = async ({ event, resolve }) => {
    event.locals.pb = new PocketBase(import.meta.env.VITE_PB_URL);

    event.locals.pb.authStore.loadFromCookie(
        event.request.headers.get("cookie") || ""
    );

    try {
        event.locals.pb.authStore.isValid &&
            (await event.locals.pb.collection("users").authRefresh());
    } catch (_) {
        event.locals.pb.authStore.clear();
    }

    const response = await resolve(event);

    response.headers.append(
        "set-cookie",
        event.locals.pb.authStore.exportToCookie()
    );

    return response;
};

signup/+page.svelte

<script lang="ts">
    import type { ActionData } from "./$types";
    import { enhance } from "$app/forms";
    import { page } from "$app/stores";

    export let form: ActionData;

    import { pageTitle } from "$lib/globals";
    pageTitle.set("Create an Account");
</script>

<main>
    <form method="POST" use:enhance>
        {#if $page.status == 400 || $page.status == 500}
            <p id="error">
                An error occurred: {form?.msg ?? "Unknown error."}
            </p>
        {/if}

        <h2>Create an Account</h2>

        <div>
            <label for="username">Your username:</label>
            <input
                type="text"
                name="username"
                placeholder="blazinglantern43"
                required
            />
        </div>

        <div>
            <label for="email">Your email:</label>
            <input
                type="email"
                name="email"
                placeholder="[e-mail]"
                required
            />
        </div>

        <div>
            <label for="password">Your password:</label>
            <input
                type="password"
                name="password"
                placeholder="••••••••••"
                required
            />
        </div>

        <div>
            <label for="confirm">Confirm password:</label>
            <input
                type="password"
                name="confirm"
                placeholder="•••••••••••"
                required
            />
        </div>

        <button type="submit">Let's Go</button>
    </form>
</main>

signup/+page.server.ts

import { fail, redirect } from "@sveltejs/kit";
import type { Actions } from "./$types";
import { getTokenPayload, type ClientResponseError } from "pocketbase";

export const actions = {
    default: async ({ request, locals, cookies }) => {
        const data = await request.formData();

        const username = data.get("username") as string;
        const email = data.get("email") as string;
        const password = data.get("password") as string;
        const confirm = data.get("confirm") as string;

        if (!username) return fail(400, { msg: "Username is required." });
        if (!email) return fail(400, { msg: "Email is required." });
        if (!password) return fail(400, { msg: "Password is required." });
        if (!confirm) return fail(400, { msg: "Confirm is required." });

        if (password !== confirm)
            return fail(400, { msg: "Passwords do not match." });

        try {
            await locals.pb.collection("users").create({
                username,
                email,
                password,
                confirmPassword: confirm,
            });
        } catch (err) {
            const { data } = err as ClientResponseError;
            console.error(data);
            return fail(500, { msg: data });
        }

        try {
            await locals.pb
                .collection("users")
                .authWithPassword(email, password);
        } catch (err) {
            const { data } = err as ClientResponseError;
            console.error(data);
            return fail(500, { msg: data });
        }

        cookies.set("pb_auth", locals.pb.authStore.token, {
            secure: true,
            httpOnly: true,
            sameSite: "strict",
            path: "/",
            expires: new Date(
                getTokenPayload(locals.pb.authStore.token).exp * 1000
            ),
        });

        redirect(303, "/app");
    },
} satisfies Actions;

When I run this code and attempt to create an account, I get back this cryptic error:

{"type":"failure","status":500,"data":"[{\"msg\":-1}]"}

What am I doing wrong? Thanks in advance.

[Gani Georgiev]

I have no idea what is the cause of the issue but I don't think it is PocketBase or SDK related.

For the available ClientResponseError fields please refer to Error handling.

[Gani Georgiev]

On second read the confirmPassword prop should be passwordConfirm.

In any case, please explore the linked error handling fields for more details on the returned error and/or check the failed request log in the Admin UI > Logs.