Signin Form

A signin form component with username/password fields, social authentication, and navigation links.

A complete signin form component for user authentication. Includes username and password inputs with password visibility toggle, social login options (Google and X), and links for password recovery and account creation.

Acme

Or continue with

Installation

npx shadcn@latest add @grenish/signin-form

This requires the @grenish registry in your components.json. See the installation guide for setup.

Manual Dependencies

If you prefer manual installation, add the base components:

npx shadcn@latest add button field input-group

Usage

import SigninForm from "@/components/tools/blocks/signin-form"

export default function SigninPage() {
  return <SigninForm />
}

Features

Authentication Fields: Username and password inputs with required validation
Password Visibility: Toggle for password field visibility
Social Login: Integrated Google and X (Twitter) authentication buttons
Navigation Links: Links to signup page and password reset
Responsive Layout: Centered design that works on all devices
Accessible: Proper labeling, descriptions, and semantic HTML
Icon Support: User and password icons for input clarity
Form Structure: Organized with field groups and separators

Component Code

import { Button } from "@/components/ui/button";
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldSeparator,
  FieldSet,
} from "@/components/ui/field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import {
  PasswordIcon,
  SignInIcon,
  UserIcon,
} from "@phosphor-icons/react/dist/ssr";
import Link from "next/link";
import ViewPasswordButton from "../view-password";
import { GoogleButton } from "../google-button";
import XButton from "../x-button";

export default function Signin() {
  return (
    <div className="w-full min-h-dvh flex items-center justify-center">
      <FieldSet className="max-w-sm w-full">
        <h2 className="text-xl font-bold">Acme</h2>
        <FieldGroup>
          <Field>
            <FieldLabel>Username</FieldLabel>
            <InputGroup>
              <InputGroupAddon>
                <UserIcon />
              </InputGroupAddon>
              <InputGroupInput placeholder="johndoe" required />
            </InputGroup>
          </Field>
          <Field>
            <FieldLabel>Password</FieldLabel>
            <InputGroup>
              <InputGroupAddon>
                <PasswordIcon />
              </InputGroupAddon>
              <InputGroupInput
                type="password"
                placeholder="password"
                id="password"
                required
              />
              <ViewPasswordButton inputId="password" />
            </InputGroup>
            <FieldDescription>
              <Link href={"/forget-password"}>Forget Password?</Link>
            </FieldDescription>
          </Field>
        </FieldGroup>
        <FieldSet>
          <Field orientation={"horizontal"}>
            <Button>
              <SignInIcon /> Signin
            </Button>
            <Link href={"/signup"}>
              <Button variant={"outline"}>Create an account?</Button>
            </Link>
          </Field>
        </FieldSet>
        <FieldSeparator />
        <FieldSet>
          <FieldGroup>
            <Field orientation={"horizontal"}>
              <FieldLabel>Or continue with</FieldLabel>
              <GoogleButton />
              <XButton />
            </Field>
          </FieldGroup>
        </FieldSet>
      </FieldSet>
    </div>
  );
}

Notes

Form submission logic must be implemented in the parent component or via form handlers
Social authentication buttons require separate OAuth setup for Google and X
Password reset link points to "/forget-password" - adjust routing as needed
Signup link navigates to "/signup" using Next.js Link
Add client-side validation for username/password before submission