linkder/apps/web/src/app/sign-in/sign-in-form.tsx

'use client';

import { useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import { Loader2 } from 'lucide-react';
import { authClient } from '@/lib/auth-client';

type Step = 'phone' | 'code';

export function SignInForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const next = searchParams.get('next') ?? '/jobs';

  const [step, setStep] = useState<Step>('phone');
  const [phone, setPhone] = useState('');
  const [code, setCode] = useState('');
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  async function sendCode(event: React.FormEvent) {
    event.preventDefault();
    setError(null);
    setBusy(true);
    const { error: sendError } = await authClient.phoneNumber.sendOtp({ phoneNumber: phone });
    setBusy(false);

    if (sendError) {
      setError(sendError.message ?? 'We could not send that code. Check the number and try again.');
      return;
    }
    setStep('code');
  }

  async function verifyCode(event: React.FormEvent) {
    event.preventDefault();
    setError(null);
    setBusy(true);
    const { error: verifyError } = await authClient.phoneNumber.verify({
      phoneNumber: phone,
      code,
    });
    setBusy(false);

    if (verifyError) {
      // better-auth returns TOO_MANY_ATTEMPTS after 3 wrong codes; say so plainly
      // rather than letting someone keep guessing at a dead code.
      setError(
        verifyError.status === 403
          ? 'Too many incorrect attempts. Request a new code.'
          : (verifyError.message ?? 'That code is not right.'),
      );
      return;
    }

    router.push(next);
    router.refresh();
  }

  return (
    <div className="mt-8 flex flex-col gap-6">
      {step === 'phone' ? (
        <form onSubmit={sendCode} className="flex flex-col gap-3">
          <label htmlFor="phone" className="text-sm font-medium">
            Mobile number
          </label>
          <input
            id="phone"
            name="phone"
            type="tel"
            autoComplete="tel"
            inputMode="tel"
            required
            placeholder="+34 600 123 456"
            value={phone}
            onChange={(e) => setPhone(e.target.value.replace(/\s/g, ''))}
            className="rounded-xl border border-[var(--border)] bg-[var(--card)] px-4 py-3 text-base outline-none focus:border-[var(--color-brand-500)]"
          />
          <SubmitButton busy={busy}>Send code</SubmitButton>
        </form>
      ) : (
        <form onSubmit={verifyCode} className="flex flex-col gap-3">
          <label htmlFor="code" className="text-sm font-medium">
            Enter the code we sent to {phone}
          </label>
          <input
            id="code"
            name="code"
            type="text"
            autoComplete="one-time-code"
            inputMode="numeric"
            pattern="[0-9]{6}"
            maxLength={6}
            required
            autoFocus
            placeholder="123456"
            value={code}
            onChange={(e) => setCode(e.target.value.replace(/\D/g, ''))}
            className="rounded-xl border border-[var(--border)] bg-[var(--card)] px-4 py-3 text-center text-2xl tracking-[0.4em] outline-none focus:border-[var(--color-brand-500)]"
          />
          <SubmitButton busy={busy}>Sign in</SubmitButton>
          <button
            type="button"
            onClick={() => {
              setStep('phone');
              setCode('');
              setError(null);
            }}
            className="text-sm text-[var(--muted)] underline underline-offset-4"
          >
            Use a different number
          </button>
        </form>
      )}

      {error && (
        <p role="alert" className="text-sm text-[var(--color-stop-500)]">
          {error}
        </p>
      )}

      <div className="flex items-center gap-3 text-xs text-[var(--muted)]">
        <span className="h-px flex-1 bg-[var(--border)]" />
        or
        <span className="h-px flex-1 bg-[var(--border)]" />
      </div>

      <button
        type="button"
        onClick={() => authClient.signIn.social({ provider: 'google', callbackURL: next })}
        className="rounded-xl border border-[var(--border)] bg-[var(--card)] px-4 py-3 text-sm font-medium transition hover:border-[var(--color-brand-500)]"
      >
        Continue with Google
      </button>

      <p className="text-xs text-[var(--muted)]">
        Signing in with Google creates a separate account from a phone sign-in. If you have used both,
        contact us and we will link them.
      </p>
    </div>
  );
}

function SubmitButton({ busy, children }: { busy: boolean; children: React.ReactNode }) {
  return (
    <button
      type="submit"
      disabled={busy}
      className="flex items-center justify-center gap-2 rounded-xl bg-[var(--color-brand-500)] px-4 py-3 font-medium text-white transition hover:bg-[var(--color-brand-600)] disabled:opacity-60"
    >
      {busy && <Loader2 className="h-4 w-4 animate-spin" aria-hidden />}
      {children}
    </button>
  );
}