Skip to main content

​
useSignUp

The useSignUp hook provides methods for user registration with support for email verification, phone verification, and profile completion.

​
Return Value

​
loading
boolean
Whether a sign-up operation is in progress
​
signUp
object
Object containing all sign-up methods
​
signupAttempt
SignupAttempt | null
The current state of the sign-up flow
​
discardSignupAttempt

​
Examples

import { useSignUp } from "@wacht/react-router";

function EmailPasswordForm() {
  const { signUp, loading } = useSignUp();

  const handleSubmit = async (data: SignUpParams) => {
    await signUp.create(data);
  };

  return <form onSubmit={handleSubmit}>
    {/* Form fields */}
  </form>;
}

import { useSignUp } from "@wacht/react-router";

function EmailOtpFlow() {
  const { signUp, loading, signupAttempt } = useSignUp();

  const handleSubmit = async (email: string, password: string) => {
    await signUp.create({ email, password });
  };

  const sendOtp = async () => {
    await signUp.prepareVerification({ strategy: "email_otp" });
  };

  const verifyOtp = async (verificationCode: string) => {
    await signUp.completeVerification(verificationCode);
  };

  return (
    <>
      {!signupAttempt && (
        <form onSubmit={() => handleSubmit(email, password)}>
          {/* Initial form */}
        </form>
      )}
      {signupAttempt && (
        <form onSubmit={() => verifyOtp(code)}>
          {/* OTP verification */}
          <button type="button" onClick={sendOtp}>Resend Code</button>
        </form>
      )}
    </>
  );
}

import { useSignUp } from "@wacht/react-router";

function InviteFlow() {
  const { signUp } = useSignUp();
  const [inviteToken] = useState("token_from_url");

  useEffect(() => {
    signUp.validateDeploymentInvitation(inviteToken).then((result) => {
      if (result.valid) {
        // Pre-fill form
        setFormData({
          email: result.email,
          first_name: result.first_name,
          last_name: result.last_name,
        });
      }
    });
  }, []);

  const handleSignUp = async (data: SignUpParams) => {
    await signUp.create({
      ...data,
      invite_token: inviteToken,
    });
  };

  return <form onSubmit={handleSignUp}>{/* Form */}</form>;
}