How to correctly set response for actions

[KarChung-Konstant]

I have a form on /login/+page.svelte. And then I have the below on /login/+page.server.js:

const tryLogin = await fetch('http://api.example.test/api/auth/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            email: email,
            password: password,
        }),
    }),
    response = await tryLogin.json();

if (tryLogin.ok) {
    return {
        status: 200,
        body: {
            success: true,
            data: response.data,
        },
    };
} else {
    return {
        status: 401,
        body: {
            success: false,
            error: response.errors,
        },
    };
}

But why on the front-end, when I log the result by:

const request = await fetch('/login', {
        method: 'POST',
        body: formData,
    }),
    response = await request.json();

console.log(response);

The result looks so weird like this:

Object { type: "success", status: 200, data: '[{"status":1,"body":2},401,{"success":3,"error":4},false,{"status":5,"title":6,"detail":7},"401","Unauthenticated","The user is not authenticated."]' }

What I expect is as simple as the same structure and format in the +page.server.js

[brunnerh]

The data is serialized using devalue, which is a more powerful serializer than the built-in one.

Form actions are meant to be used with forms, which will work even if JS fails to load. They can be progressively enhanced so no additional page reload is required if JS loaded. The enhance action can also be used to attach additional logic to the form submission. I would recommend using this.

If you need to use the action directly regardless, SvelteKit provides a function you can use to deserialize the data.

import { deserialize } from '$app/forms';

const result: ActionResult = deserialize(await response.text());