📲 Phone Login

The PhoneLogin component enables users to log in via phone number and receive an OTP for authentication.

It uses:

📦 ZezoOttPhoneLogin from @zezosoft/zezo-ott-react-ui-kit
🔄 useMutation from @tanstack/react-query
🔁 Redirects user to /verify-otp with phone and hash

✅ Features

🌐 Country code + phone input
📤 Sends OTP via zezoClient().auth.sendOTP()
🚀 Redirects to /verify-otp?phone=...&hash=... on success
🔙 Includes “Go Back” functionality

✅ Example Usage


"use client";
 
import { useRouter } from "next/navigation";
import { useMutation } from "@tanstack/react-query";
import { PhoneLogin as ZezoOttPhoneLogin } from "@zezosoft/zezo-ott-react-ui-kit";
import { zezoClient } from "@/lib/zezoClient";
 
export default function PhoneLogin() {
  const router = useRouter();
 
  const sendOtp = useMutation({
    mutationKey: ["sendOtp"],
    mutationFn: (payload: { phone: string; countryCode: string }) =>
      zezoClient().auth.sendOTP(payload),
    onSuccess: ({ data }) => {
      if (data?.phone && data?.hash) {
        router.push(`/verify-otp?phone=${data.phone}&hash=${data.hash}`);
      }
    },
  });
 
  const handleSubmit = ({
    countryCode,
    phoneNumber,
  }: {
    countryCode: string;
    phoneNumber: string;
  }) => {
    const phone = `${countryCode}${phoneNumber}`.replace(/\s+/g, "");
    const isValid = /^\+\d{6,15}$/.test(phone);
 
    if (!isValid) return;
 
    sendOtp.mutate({
      phone: phoneNumber.trim(),
      countryCode: countryCode.trim(),
    });
  };
 
  return (
    <ZezoOttPhoneLogin
      goBack={() => router.back()}
      onSubmit={handleSubmit}
      isLoading={sendOtp.isPending}
    />
  );
}

Props

Prop	Type	Required	Description
`goBack`	`() => void`	❌ No	Optional callback for navigating back (e.g., `router.back()`)
`onSubmit`	`(e: { countryCode: string; phoneNumber: string }) => void`	✅ Yes	Function triggered on form submission
`isLoading`	`boolean`	❌ No	If `true`, shows a loading indicator on the submit button
`error`	`string`	❌ No	Optional error message to display below the form
`showConsent`	`boolean`	❌ No	If `true`, shows a checkbox for terms/privacy agreement
`logoUrl`	`string`	❌ No	Optional URL for a logo to be displayed above the form
`title`	`string`	❌ No	Optional title text shown above the phone input
`subtitle`	`string`	❌ No	Optional subtitle or helper text shown below the title

🖼️ UI Preview

Here’s how the PhoneLogin component looks in action:

Search UI