Phone Number Sign In

Auth15: Phone Number Sign In

Full-height phone-based sign-in screen: a country-code select paired to a phone number input, a send-code button, optional helper text, and an email fallback link. Built for SMS one-time-code flows rather than password auth.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/auth15?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/auth15?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/auth15.tsx and the button, input, field, and select shadcn/ui primitives it's built on.

Quick start

The installed file exports auth15Demo alongside the block: the exact props behind the preview above. Spread it to get a working phone sign-in screen in one line.

import { Auth15, auth15Demo } from "@/components/beste/block/auth15";

export default function PhoneSignInPage() {
  return <Auth15 {...auth15Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Smartphone } from "lucide-react";
import { Auth15 } from "@/components/beste/block/auth15";

export default function PhoneSignInPage() {
  return (
    <Auth15
      icon={<Smartphone className="size-6" />}
      heading="Sign in with your phone"
      description="We'll text you a one-time code to verify your number."
      countryCodes={[
        { value: "+1", label: "🇺🇸 +1" },
        { value: "+44", label: "🇬🇧 +44" },
      ]}
      defaultCountryCode="+1"
      labels={{ phone: "Phone number", phonePlaceholder: "(555) 000-0000", submit: "Send code" }}
      alternativePrompt={{ text: "Prefer email?", linkLabel: "Sign in with email", href: "/sign-in" }}
    />
  );
}

Props

type CountryCode = { value: string; label: string };

type Auth15Labels = {
  phone?: string;
  phonePlaceholder?: string;
  submit?: string;
  helper?: string;
};

Behavior notes

• The country-code Select is a controlled component seeded once from defaultCountryCode via useState; if that value doesn't match any countryCodes[].value, the trigger renders with no visible selection.
• The demo's country labels embed flag emoji directly in the label string (e.g. "🇺🇸 +1") rather than exposing a separate flag/icon field.
• The phone Input uses type="tel" and inputMode="tel" for a numeric keyboard on mobile, but there is no client-side format or length validation on the number itself.
• labels.helper renders as a FieldDescription under the phone field only when set; the <form> only calls e.preventDefault() on submit, so no code is actually sent.