useSignIn
The useSignIn hook provides methods for authenticating users with various strategies including email/password, OTP, magic links, passkeys, and OAuth.
Return Value
Whether a sign-in operation is in progress
Object containing all sign-in methods
The current state of the sign-in flow
Show Discards the current sign-in attempt
Show Sets the current sign-in attempt
The sign-in attempt to set
Strategies
| Strategy | Description |
|---|
email | Email with password |
username | Username with password |
email_otp | Email OTP |
phone | Phone OTP |
magic_link | Magic link sent to email |
oauth | OAuth provider sign-in |
passkey | Passkey/WebAuthn sign-in |
generic | Generic with any parameters |
Examples
import { useSignIn } from "@wacht/react-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/react-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/react-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>;
}
