Skip to main content

​
useSignIn

The useSignIn hook provides methods for authenticating users with various strategies including email/password, OTP, magic links, passkeys, and OAuth.

​
Return Value

​
loading
boolean
Whether a sign-in operation is in progress
​
signIn
object
Object containing all sign-in methods
​
signinAttempt
SigninAttempt | null
The current state of the sign-in flow
​
discardSignInAttempt
​
setSignInAttempt

​
Strategies

StrategyDescription
emailEmail with password
usernameUsername with password
email_otpEmail OTP
phonePhone OTP
magic_linkMagic link sent to email
oauthOAuth provider sign-in
passkeyPasskey/WebAuthn sign-in
genericGeneric with any parameters

​
Examples

import { useSignIn } from "@wacht/tanstack-router";

function EmailPasswordForm() {
  const { signIn, loading } = useSignIn();

  const handleSubmit = async (email: string, password: string) => {
    const emailSignIn = signIn.createStrategy("email");
    await emailSignIn({ email, password });
  };

  return <form onSubmit={(e) => {
    e.preventDefault();
    handleSubmit(email, password);
  }}>
    {/* Form fields */}
  </form>;
}

import { useSignIn } from "@wacht/tanstack-router";

function EmailOtpForm() {
  const { signIn, loading, signinAttempt } = useSignIn();

  const startSignIn = async (email: string) => {
    await signIn.identify(email);
    await signIn.prepareVerification({ strategy: "email_otp" });
  };

  const verifyCode = async (code: string) => {
    await signIn.completeVerification(code);
  };

  return (
    <>
      {!signinAttempt && (
        <form onSubmit={(e) => {
          e.preventDefault();
          startSignIn(email);
        }}>
          {/* Email input */}
        </form>
      )}
      {signinAttempt && (
        <form onSubmit={(e) => {
          e.preventDefault();
          verifyCode(code);
        }}>
          {/* OTP input */}
        </form>
      )}
    </>
  );
}

import { useSignIn } from "@wacht/tanstack-router";

function SsoButton() {
  const { signIn } = useSignIn();

  const handleSso = async () => {
    const result = await signIn.initEnterpriseSso("conn_123");
    window.location.href = result.sso_url;
  };

  return <button onClick={handleSso}>Sign in with SSO</button>;
}