Function JoinPage

apps/host-selfhost/web/routes/public/join.$code.tsx:20–154

()

// the new user into the org as a member. The root renders this outside the
// auth gate (an un-redeemed visitor has no session yet).
function JoinPage() {
  const { code } = Route.useParams();
  const [inviteState, setInviteState] = useState<"checking" | "valid" | "invalid">("checking");
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    let alive = true;
    setInviteState("checking");
    void fetch(`/api/invite-status/${encodeURIComponent(code)}`, {
      credentials: "same-origin",
    }).then(
      async (response) => {
        const body = response.ok
          ? ((await response.json().then(
              (value) => value,
              () => ({}),
            )) as { valid?: boolean })
          : {};
        if (alive) setInviteState(body.valid === true ? "valid" : "invalid");
      },
      () => {
        if (alive) setInviteState("invalid");
      },
    );
    return () => {
      alive = false;
    };
  }, [code]);

  const submit = async (event: FormEvent) => {
    event.preventDefault();
    setBusy(true);
    setError(null);
    // The Better Auth client forwards `inviteCode` (a non-schema field) onto the
    // signup body the create gate reads; same-origin, so the session cookie
    // sticks. Returns `{ error }` rather than throwing — no manual fetch.
    const result = await authClient.signUp.email({ name, email, password, inviteCode: code });
    if (result.error) {
      setBusy(false);
      setError(
        result.error.message ??
          "Could not create your account. Check your invite link and try again.",
      );
      return;
    }
    window.location.href = "/";
  };

  if (inviteState === "checking") {
    return (
      <div className="flex min-h-screen items-center justify-center text-sm text-muted-foreground">
        Loading…
      </div>
    );