Skip to main content

​
Overview

The <SignInForm /> component provides a complete, ready-to-use sign-in interface that supports multiple authentication strategies including email/username/phone with password, one-time passwords (OTP), magic links, and social authentication providers.

​
Basic Usage

import { SignInForm } from '@snipextt/wacht'

function LoginPage() {
  return (
    <div className="auth-container">
      <h1>Welcome Back</h1>
      <SignInForm />
    </div>
  )
}

​
Props

The <SignInForm /> component takes no props. It’s a self-contained component that automatically configures itself based on your deployment settings.

​
What it includes

The component automatically renders appropriate authentication methods based on your deployment configuration:

​
Email/Username/Phone Authentication

  • Email, username, or phone number input field
  • Password input with show/hide toggle
  • “Forgot password?” link for password reset
  • “Remember me” option for persistent sessions

​
One-Time Password (OTP)

  • Phone number input for SMS verification
  • Email input for email-based OTP
  • OTP code input field
  • Resend code functionality
  • Email input field
  • “Send magic link” button
  • Check email instructions

​
Social Sign-On

  • Buttons for configured OAuth providers
  • Supported providers: Google, GitHub, Microsoft, Facebook, Discord, LinkedIn, Twitter, Slack