useLogin

Usage

Use the useLogin hook to login a user. This will attach the user to the current selection. …

Basic Usage

"use client";

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

const LoginForm = () => {
  const login = useLogin();

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

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

    login.mutate({ email, password });
  };

  return (
    <form action={action}>
      <h2>Login</h2>
      <input name="email" type="email" required />
      <input name="password" type="password" required />
      <button type="submit">
        {login.isPending ? "Logging in..." : "Login"}
      </button>
    </form>
  );
};

Full example

"use client";

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

const LoginForm = () => {
  const { data: isLoggedIn } = useLoggedIn();
  const login = useLogin({
    onSuccess: () => {
      // Do something here like sending loggedIn event to GTM analytics
    },
  });

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

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

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

    login.mutate({ email, password });
  };

  return (
    <form action={action}>
      <h2>Login</h2>
      <input name="email" type="email" required />
      <input name="password" type="password" required />
      <button type="submit">
        {login.isPending ? "Logging in..." : "Login"}
      </button>
    </form>
  );
};

…

Anatomy

The internal workings of this hook.

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