A simpel React form with server component (RSC) and Action State

action.ts

'use server'

export async function signUpAction() {
  const { data, error } = await authClient.signUp.email({
    email: "[email protected]",
    password: "password",
    name: "John Doe",
  });

  return { data, error };
}

page.tsx

"use client";

import { startTransition, useActionState } from "react";
import { signUpAction } from "@/app/(auth)/sign-up/_lib/action";

const initialState = {
  success: false,
  message: "",
  data: null,
  error: null,
};

export default function SignInPage() {
  const [state, action, isPending] = useActionState(signUpAction, initialState);

  return (
    <form
      action={async (formData: FormData) => {
        startTransition(() => {
          action();
        });
      }}
    >
      <input type="email" name="email" placeholder="Email" />
      <input type="password" name="password" placeholder="Password" />
      <button type="submit" disabled={isPending}>
        {isPending ? "Signing in..." : "Sign In"}
      </button>

      {state.error && <div className="text-red-500">{state.error.message}</div>}
    </form>
  );
}