{
success: false,
msg: "your error"
}

Response {
  [Symbol(realm)]: null,
  [Symbol(state)]: {
    aborted: false,
    rangeRequested: false,
    timingAllowPassed: true,
    requestIncludesCredentials: true,
    type: 'default',
    status: 404,
    timingInfo: {
      startTime: 930979.1861000061,
      redirectStartTime: 0,
      redirectEndTime: 0,
      postRedirectStartTime: 930979.1861000061,
      finalServiceWorkerStartTime: 0,
      finalNetworkResponseStartTime: 0,
      finalNetworkRequestStartTime: 0,
      endTime: 0,
      encodedBodySize: 0,
      decodedBodySize: 0,
      finalConnectionTimingInfo: null
    },
    cacheState: '',
    statusText: 'Not Found',
    headersList: HeadersList {
      cookies: null,
      [Symbol(headers map)]: [Map],
      [Symbol(headers map sorted)]: null
    },
    urlList: [ [URL] ],
    body: { stream: undefined }
  },
  [Symbol(headers)]: HeadersList {
    cookies: null,
    [Symbol(headers map)]: Map(9) {
      'vary' => [Object],
      'cache-control' => [Object],
      'x-powered-by' => [Object],
      'content-type' => [Object],
      'content-encoding' => [Object],
      'date' => [Object],
      'connection' => [Object],
      'keep-alive' => [Object],
      'transfer-encoding' => [Object]
    },
    [Symbol(headers map sorted)]: null
  }
}

/**
 * Signs in the user with the provided credentials.
 * Sets the JWT cookie and redirects to the dashboard on success.
 * @param _prevState - Previous state, unused.
 * @param formData - Form data containing 'identifier' and 'password'.
 * @returns A message indicating the failure of the operation, or redirects to the dashboard on success.
 */
export async function sign_in(
  _prevState: unknown,
  formData: FormData
): Promise<FormMessage> {
  try {
    const identifier = formData.get("identifier") as string;
    const password = formData.get("password") as string;
    const response = await fetch(AUTH_URL, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ identifier, password }),
    });
    const { jwt, error } = await response.json();
    await new Promise((resolve) => setTimeout(resolve, 1500));

    if (error) {
      if (error.status === 400) {
        return { message: "Invalid username or password" };
      }
      return { message: error.message || "Server Error", type: "error" };
    }

    if (jwt) {
      setJwtCookie(jwt);
    }
  } catch (error) {
    return { message: "Server Error" };
  }
  redirect("/dashboard");
}

"use client";

import styles from "../form.module.css";
import Link from "next/link";
import { useFormState } from "react-dom";
import { sign_in } from "@/utils/authActions";
import { Input, Submit, Message } from "@/components/form-inputs";

/**
 * SignInForm Component
 *
 * This component renders a sign-in form with fields for username/email and password.
 * It uses the `useFormState` hook to manage form state and handle submission actions.
 * The form includes links for password recovery and account sign-up.
 *
 * @returns {JSX.Element} The rendered sign-in form component.
 */
const SignInForm: React.FC<FormProps> = () => {
  const [state, action] = useFormState(sign_in, {
    message: null,
  });

  return (
    <form action={action} className={styles.form} aria-labelledby="legend">
      <fieldset>
        <legend id="legend" className="srOnly">
          Sign In Form
        </legend>
        <div className={styles.field}>
          <Input
            id="identifier"
            label="Username / Email"
            required
            aria-required="true"
            aria-label="Username or Email"
          />
        </div>
        <div className={styles.field}>
          <Input
            type="password"
            id="password"
            label="Password"
            required
            aria-required="true"
            aria-label="Password"
          />
          <Link href="/forgot-password">{`Forget your password?`}</Link>
        </div>
        <div className={styles.actions}>
          <Submit title="Submit" />
          <Link href="/sign-up">{`Don't have an account? Sign up!`}</Link>
        </div>
        <Message state={state} />
      </fieldset>
    </form>
  );
};

export default SignInForm;

  
  const [state, action] = useFormState(sign_in, {
    message: null,
  });

<form action={action}></form>

const db = connectToDatabase();

interface UserRow extends RowDataPacket {
    id: string;
    username: string;
    email?: string;
}

export async function login(username: string, password: string) {
    try {
        const [rows] = await db.execute<UserRow[]>(
            `SELECT id, username, email 
             FROM user 
             WHERE (username = ? OR email = SHA2(?, 256)) 
             AND password = SHA2(?, 256)`,
            [username, username, password]
        );

        if (!rows.length) throw "Username/Email and Password combination does not match an existing user";

        const user = { id: rows[0].id, username: rows[0].username, email: rows[0].email };
        const expires = new Date(Date.now() + 30 * 60 * 1000);
        const session = await encrypt({ user, expires });

        cookies().set("session", session, {
            expires: expires,
            httpOnly: true,
            secure: true
        });
    } catch (err) {
        console.error("Error executing queries:", err);
    }
}

"use server";

async function sign_in(
  _prevState: unknown,
  formData: FormData
): Promise<any> {
  try {
    const username = formData.get("username") as string;
    const password = formData.get("password") as string;

    const [rows] = await db.execute<UserRow[]>(
      `SELECT id, username, email 
       FROM user 
       WHERE (username = ? OR email = SHA2(?, 256)) 
       AND password = SHA2(?, 256)`,
      [username, username, password]
  );

  if (!rows.length) {
    return { message: "Invalid username or password" };
  }

  const user = { id: rows[0].id, username: rows[0].username, email: rows[0].email };
  const expires = new Date(Date.now() + 30 * 60 * 1000);
  const session = await encrypt({ user, expires });

  cookies().set("session", session, {
      expires: expires,
      httpOnly: true,
      secure: true
  });

  } catch (error) {
    return { message: "Server Error" };
  }
  redirect("/dashboard");
}

  const [state, action] = useFormState(sign_in, {
    message: null,
  });

  const [state, action] = useFormState(sign_in, {
    success: false,
    status: 401,
    message: 'Not Authorized',
    sandwich: "bologna"
  });

import "@/app/globals.css";
import { login } from "@/utils/userController";
import NotificationModal from '@/app/components/notificationModal';
import { useFormState } from "react-dom";

export default async function LoginPage() {
    const [state, action] = useFormState(login, {
        message: null
    });

    return (
        <div>
            <div id="divLogin" className="row justify-content-md">
                <h1>Login</h1>
                <form action={action}>
                    <div id="loginUser" className="col-12">
                        <label htmlFor="inputUsername">Username / Email</label>
                        <input id="inputUsername" name="username" type="text" placeholder="Username / Email" autoComplete="on" required />
                        <span id="spanErrorUsername" className="spanError"></span>
                    </div>
                    <div id="loginPass" className="col-12">
                        <label htmlFor="inputPassword">Password</label>
                        <input id="inputPassword" name="password" type="password" placeholder="Password" autoComplete="on" required />
                        <span id="spanErrorPassword" className="spanError"></span>
                    </div>
                    <div id="loginButton" className="col-12">
                        <input className="btn btn-primary" type="submit" value="Login" />
                    </div>
                </form>
                <div className="col-12">
                    <a href="/recover">Forgot password?</a>
                    <br />
                    <a href="/register">I want to register</a>
                </div>
            </div>
            {state && <NotificationModal state={state} />}
        </div>
    );
}

Error:
  × You're importing a component that needs useFormState. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
  │ Learn more: https://nextjs.org/docs/getting-started/react-essentials        
  │
  │
   ╭─[C:\Users\D34dlyK1ss\Documents\Code\who-is-it\app\login\page.tsx:1:1]      
 1 │ import "@/app/globals.css";
 2 │ import { login } from "@/utils/userController";
 3 │ import NotificationModal from '@/app/components/notificationModal';
 4 │ import { useFormState } from "react-dom";
   ·          ────────────
 5 │
 6 │ export default async function LoginPage() {
 6 │    const [state, action] = useFormState(login, {