How to Reflect Form Submission Results in Svelte After Login Attempt to display error message?

I based on this documentation to create my custom Login page.

I am creating a login page using Svelte with Superforms, and I am trying to handle the response from the server after the form submission. Specifically, I want to display an error message when login was not successful.

Here’s my current setup:

Svelte Component

<script lang="ts">    import * as Form from "$lib/components/ui/form";    import { Input } from "$lib/components/ui/input";    import { loginSchema, type LoginSchema } from "./schema";    import {        type SuperValidated,        type Infer,        superForm,    } from "sveltekit-superforms";    import { zodClient } from "sveltekit-superforms/adapters";    export let data: SuperValidated<Infer<LoginSchema>>;    const form = superForm(data, {        validators: zodClient(loginSchema),    });    const { form: formData, enhance } = form;</script><form method="POST" use:enhance><Form.Field {form} name="usernameOremail"><Form.Control let:attrs><Form.Label>Username OR Email</Form.Label><Input {...attrs} bind:value={$formData.usernameOremail} /></Form.Control><Form.Description>Username or Email</Form.Description><Form.FieldErrors /></Form.Field><Form.Field {form} name="password"><Form.Control let:attrs><Form.Label>Password</Form.Label><Input                type="password"                {...attrs}                bind:value={$formData.password}            /></Form.Control><Form.Description>Password</Form.Description><Form.FieldErrors /></Form.Field>    {#if form?.success === false}<p>Username or password is incorrect.</p>    {/if}<Form.Button>Submit</Form.Button></form>

Server-Side Action in +page.server.ts

import type { PageServerLoad, Actions } from "./$types.js";import { fail, redirect } from "@sveltejs/kit"; // Import redirectimport { superValidate } from "sveltekit-superforms";import { zod } from "sveltekit-superforms/adapters";import { loginSchema } from "./schema";import { gql, request } from 'graphql-request';import { PUBLIC_BACKEND_API } from "$env/static/public";// Define the GraphQL endpointconst endpoint = PUBLIC_BACKEND_API;// Define the query using the gql tag from graphql-requestconst LoginUser = gql`query LoginUser($usernameOremail: String!, $password: String!) {  loginUser(input: {usernameOremail: $usernameOremail, password: $password}) {    token    expiresAt  }}`;interface LoginResponse {    loginUser?: {        token: string;        expiresAt: string;    };}export const load: PageServerLoad = async () => {    return {        form: await superValidate(zod(loginSchema)),    };};export const actions: Actions = {    default: async (event) => {        const form = await superValidate(event, zod(loginSchema));        const { usernameOremail, password } = form.data;        // Perform login request        try {            const data: LoginResponse = await request(endpoint, LoginUser, { usernameOremail, password });            if (!data.loginUser) {                return fail(400, { success: false });            }            return { success: true };        } catch (err) {            console.error(err);            return { success: false };        }    },};

Problem

I want to reflect the form submission result on the Svelte component page after the submission. Specifically, if the login is unsuccessful, I want to display the message <p>Username or password is incorrect.</p>.

1. How can I ensure that the form submission result is properly reflected in my Svelte component?
2. Is my approach to returning { success: boolean } from the action function appropriate for this scenario?
3. What are the best practices for handling form submission results in Svelte with Superforms?
4. I tried redirect on +page.server.ts, but it does not work. so I want to konw if there is a way to return resposne to use the result to whether rtredirect with goto("/").

Any guidance or suggestions would be greatly appreciated!