useRegister

Usage

Use the useRegister hook to register a user. This will attach the user to the current selection.

"use client";

import { useRegister } from "@frend-digital/centra/client";

const RegisterForm = () => {
  const register = useRegister();

  const action = (formData: FormData) => {
    const email = formData.get("email").toString();
    const password = formData.get("password").toString();
    const firstName = formData.get("firstName").toString();
    const lastName = formData.get("lastName").toString();

    if (!email || !password || !firstName || !lastName) return; // Show a warning to the user here somehow

    register.mutate({ email, password, firstName, lastName });
  };

  return (
    <form action={action}>
      <h2>Register</h2>
      <input name="email" type="email" required />
      <input name="password" type="password" required />
      <input name="firstName" type="text" required />
      <input name="lastName" type="text" required />
      <button type="submit">
        {register.isPending ? "Registering..." : "Register"}
      </button>
    </form>
  );
};

Full example

"use client";

import { useLoggedIn, useRegister } from "@frend-digital/centra/client";
import { redirect } from "next/navigation";

export const RegisterForm = () => {
  const { data: isLoggedIn } = useLoggedIn();
  const register = useRegister({
    onSuccess: () => {
      // Handle success
    },
    onError: error => {
      // Handle error
    },
  });

  if (isLoggedIn) return redirect("/account");

  const action = (formData: FormData) => {
    const email = formData.get("email")?.toString();
    const password = formData.get("password")?.toString();
    const firstName = formData.get("firstName")?.toString();
    const lastName = formData.get("lastName")?.toString();

    if (!email || !password || !firstName || !lastName) return; // Show a warning to the user here somehow

    register.mutate({ email, password, firstName, lastName });
  };

  return (
    <form action={action}>
      <h2>Register</h2>
      <input name="email" type="email" placeholder="Email" required />
      <input name="password" type="password" placeholder="Password" required />
      <input name="firstName" type="text" placeholder="First name" required />
      <input name="lastName" type="text" placeholder="Last name" required />
      <button type="submit">
        {register.isPending ? "Registering..." : "Register"}
      </button>
    </form>
  );
};

Anatomy

The internal workings of this hook.

declare function useRegister({
  onSuccess,
  onError,
  onMutate,
  onSettled,
}: {
  onSuccess?: () => void;
  onError?: (error: unknown) => void;
  onMutate?: (variables: {email: string, password: string, firstName: string, lastName: string}) => void;
  onSettled?: () => void;
}): {
  mutate: (variables: {email: string, password: string, firstName: string, lastName: string}) => Promise<void>;
  ...UseMutationResult
};