feat(shadcn): WIP Phone auth form

Author: Ehesp

packages/shadcn/src/registry/country-selector.tsx

@@ -11,6 +11,8 @@ import {
 
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 
+export type { CountrySelectorRef };
+
 export const CountrySelector = forwardRef<CountrySelectorRef, CountrySelectorProps>((props, ref) => {
   const countries = useCountries();
   const defaultCountry = useDefaultCountry();
@@ -35,7 +37,7 @@ export const CountrySelector = forwardRef<CountrySelectorRef, CountrySelectorPro
 
   return (
     <Select value={selected.code} onValueChange={setCountry}>
-      <SelectTrigger>
+      <SelectTrigger className="w-[120px]">
         <SelectValue>
           {selected.emoji} {selected.dialCode}
         </SelectValue>

packages/shadcn/src/registry/phone-auth-form.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import {
+  CountrySelector,
+  PhoneAuthFormProps,
+  usePhoneAuthNumberFormSchema,
+  usePhoneAuthVerifyFormSchema,
+  usePhoneNumberFormAction,
+  useRecaptchaVerifier,
+  useUI,
+  useVerifyPhoneNumberFormAction,
+} from "@firebase-ui/react";
+import { useState } from "react";
+import type { UserCredential } from "firebase/auth";
+import { useRef } from "react";
+import { useForm } from "react-hook-form";
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import {
+  FirebaseUIError,
+  formatPhoneNumber,
+  getTranslation,
+  PhoneAuthNumberFormSchema,
+  PhoneAuthVerifyFormSchema,
+} from "@firebase-ui/core";
+
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Policies } from "@/registry/policies";
+import { CountrySelectorRef } from "@/registry/country-selector";
+
+type VerifyPhoneNumberFormProps = {
+  verificationId: string;
+  onSuccess: (credential: UserCredential) => void;
+};
+
+function VerifyPhoneNumberForm(props: VerifyPhoneNumberFormProps) {
+  const ui = useUI();
+  const schema = usePhoneAuthVerifyFormSchema();
+  const action = useVerifyPhoneNumberFormAction();
+
+  const form = useForm<PhoneAuthVerifyFormSchema>({
+    resolver: standardSchemaResolver(schema),
+    defaultValues: {
+      verificationId: props.verificationId,
+      verificationCode: "",
+    },
+  });
+
+  async function onSubmit(values: PhoneAuthVerifyFormSchema) {
+    try {
+      const credential = await action(values);
+      props.onSuccess(credential);
+    } catch (error) {
+      const message = error instanceof FirebaseUIError ? error.message : String(error);
+      form.setError("root", { message });
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
+        <FormField
+          control={form.control}
+          name="verificationCode"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{getTranslation(ui, "labels", "verificationCode")}</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit" disabled={ui.state !== "idle"}>
+          {getTranslation(ui, "labels", "verifyCode")}
+        </Button>
+        {form.formState.errors.root && <FormMessage>{form.formState.errors.root.message}</FormMessage>}
+      </form>
+    </Form>
+  );
+}
+
+type PhoneNumberFormProps = {
+  onSubmit: (verificationId: string) => void;
+};
+
+function PhoneNumberForm(props: PhoneNumberFormProps) {
+  const ui = useUI();
+  const recaptchaContainerRef = useRef<HTMLDivElement>(null);
+  const recaptchaVerifier = useRecaptchaVerifier(recaptchaContainerRef);
+  const countrySelector = useRef<CountrySelectorRef>(null);
+  const action = usePhoneNumberFormAction();
+  const schema = usePhoneAuthNumberFormSchema();
+
+  const form = useForm<PhoneAuthNumberFormSchema>({
+    resolver: standardSchemaResolver(schema),
+    defaultValues: {
+      phoneNumber: "",
+    },
+  });
+
+  async function onSubmit(values: PhoneAuthNumberFormSchema) {
+    try {
+      const formatted = formatPhoneNumber(values.phoneNumber, countrySelector.current!.getCountry());
+      const verificationId = await action({ phoneNumber: formatted, recaptchaVerifier: recaptchaVerifier! });
+      props.onSubmit(verificationId);
+    } catch (error) {
+      const message = error instanceof FirebaseUIError ? error.message : String(error);
+      form.setError("root", { message });
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-2">
+        <FormField
+          control={form.control}
+          name="phoneNumber"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>{getTranslation(ui, "labels", "phoneNumber")}</FormLabel>
+              <FormControl>
+                <div className="flex items-center gap-2">
+                  <CountrySelector ref={countrySelector} />
+                  <Input {...field} type="tel" />
+                </div>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <div ref={recaptchaContainerRef} />
+        <Policies />
+        <Button type="submit" disabled={ui.state !== "idle"}>
+          {getTranslation(ui, "labels", "sendCode")}
+        </Button>
+        {form.formState.errors.root && <FormMessage>{form.formState.errors.root.message}</FormMessage>}
+      </form>
+    </Form>
+  );
+}
+
+export type { PhoneAuthFormProps };
+
+export function PhoneAuthForm(props: PhoneAuthFormProps) {
+  const [verificationId, setVerificationId] = useState<string | null>(null);
+
+  if (!verificationId) {
+    return <PhoneNumberForm onSubmit={setVerificationId} />;
+  }
+
+  return (
+    <VerifyPhoneNumberForm
+      verificationId={verificationId}
+      onSuccess={(credential) => {
+        props.onSignIn?.(credential);
+      }}
+    />
+  );
+}