"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface SocialProvider {
  id: string;
  label: string;
  onClick?: () => void;
  icon: React.ReactNode;
}

export interface LoginFormProps
  extends React.FormHTMLAttributes<HTMLFormElement> {
  title?: string;
  subtitle?: string;
  emailLabel?: string;
  passwordLabel?: string;
  rememberLabel?: string;
  forgotPasswordLabel?: string;
  forgotPasswordHref?: string;
  submitLabel?: string;
  showSocialLogins?: boolean;
  socialProviders?: SocialProvider[];
}

const defaultSocialProviders: SocialProvider[] = [
  {
    id: "google",
    label: "Continue with Google",
    icon: (
      <svg
        className="h-4 w-4"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth={1.8}
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden="true"
      >
        <path d="M12 5a7 7 0 1 0 6.6 9.2H12" />
        <path d="M12 12h7" />
      </svg>
    ),
  },
  {
    id: "github",
    label: "Continue with GitHub",
    icon: (
      <svg
        className="h-4 w-4"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth={1.6}
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden="true"
      >
        <path d="M12 2c-5.5 0-10 4.4-10 9.9 0 4.4 2.9 8.1 6.8 9.4.5.1.7-.2.7-.5v-2c-2.8.6-3.4-1.2-3.4-1.2-.5-1.2-1.1-1.6-1.1-1.6-.9-.6.1-.6.1-.6 1 .1 1.6 1.1 1.6 1.1.9 1.6 2.4 1.1 3 .8.1-.7.4-1.1.7-1.4-2.2-.2-4.5-1.1-4.5-4.9 0-1.1.4-2 1.1-2.7-.1-.3-.5-1.3.1-2.7 0 0 .9-.3 2.8 1a9.7 9.7 0 0 1 5.1 0c1.9-1.3 2.8-1 2.8-1 .6 1.4.2 2.4.1 2.7.7.7 1.1 1.6 1.1 2.7 0 3.9-2.3 4.7-4.6 4.9.4.3.7.9.7 1.8v2.7c0 .3.2.6.7.5a9.9 9.9 0 0 0 6.8-9.4C22 6.4 17.5 2 12 2z" />
      </svg>
    ),
  },
  {
    id: "apple",
    label: "Continue with Apple",
    icon: (
      <svg
        className="h-4 w-4"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth={1.6}
        strokeLinecap="round"
        strokeLinejoin="round"
        aria-hidden="true"
      >
        <path d="M16.7 12.7c0-2 1.6-3 1.7-3.1-1-.1-2.2-.7-2.8-1.5-.8-.9-1.6-1-2.2-1-1.2 0-2.2.6-2.8.6-.7 0-1.4-.6-2.4-.6-1.2 0-2.4.7-3 1.7-1.3 1.9-.3 4.9.9 6.5.6.8 1.3 1.7 2.2 1.6.9 0 1.2-.5 2.2-.5 1 0 1.3.5 2.2.5.9 0 1.5-.8 2.1-1.6.7-.9 1-1.8 1-1.9-.1 0-2.1-.8-2.1-3.2z" />
        <path d="M14.9 4.4c.5-.6.9-1.5.8-2.4-.8 0-1.8.6-2.3 1.2-.5.6-.9 1.5-.8 2.4.8 0 1.8-.5 2.3-1.2z" />
      </svg>
    ),
  },
];

export const LoginForm = React.forwardRef<HTMLFormElement, LoginFormProps>(
  (
    {
      className,
      title = "Welcome back",
      subtitle = "Sign in to continue",
      emailLabel = "Email address",
      passwordLabel = "Password",
      rememberLabel = "Remember me",
      forgotPasswordLabel = "Forgot password?",
      forgotPasswordHref = "#",
      submitLabel = "Sign in",
      showSocialLogins = true,
      socialProviders,
      ...props
    },
    ref
  ) => {
    const providers = socialProviders ?? defaultSocialProviders;

    return (
      <form
        ref={ref}
        className={cn(
          "w-full max-w-md space-y-6 rounded-2xl border border-border bg-card p-6 text-foreground",
          className
        )}
        {...props}
      >
        <div className="space-y-2">
          <h2 className="text-xl font-semibold text-foreground">{title}</h2>
          {subtitle ? (
            <p className="text-sm text-muted-foreground">{subtitle}</p>
          ) : null}
        </div>

        <div className="space-y-4">
          <label className="flex flex-col gap-2 text-sm font-medium text-foreground">
            <span>{emailLabel}</span>
            <input
              type="email"
              name="email"
              autoComplete="email"
              required
              placeholder="you@example.com"
              className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-border"
            />
          </label>

          <label className="flex flex-col gap-2 text-sm font-medium text-foreground">
            <span>{passwordLabel}</span>
            <input
              type="password"
              name="password"
              autoComplete="current-password"
              required
              placeholder="Enter your password"
              className="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:border-border"
            />
          </label>
        </div>

        <div className="flex items-center justify-between gap-4 text-sm">
          <label className="flex items-center gap-2 text-muted-foreground">
            <input
              type="checkbox"
              name="remember"
              className="h-4 w-4 rounded border border-border bg-background text-foreground focus-visible:outline-none focus-visible:border-border"
            />
            <span className="text-foreground">{rememberLabel}</span>
          </label>
          <a
            href={forgotPasswordHref}
            className="text-primary hover:underline"
          >
            {forgotPasswordLabel}
          </a>
        </div>

        <button
          type="submit"
          className="w-full rounded-lg border border-border bg-muted px-4 py-2 text-sm font-semibold text-foreground transition hover:bg-card focus-visible:outline-none focus-visible:border-border"
        >
          {submitLabel}
        </button>

        {showSocialLogins ? (
          <div className="space-y-3">
            <div className="flex items-center gap-3 text-xs text-muted-foreground">
              <span className="flex-1 border-t border-border" />
              <span>Or continue with</span>
              <span className="flex-1 border-t border-border" />
            </div>
            <div className="grid gap-2">
              {providers.map((provider) => (
                <button
                  key={provider.id}
                  type="button"
                  onClick={provider.onClick}
                  className="flex w-full items-center justify-center gap-2 rounded-lg border border-border bg-background px-4 py-2 text-sm font-medium text-foreground transition hover:bg-muted focus-visible:outline-none focus-visible:border-border"
                >
                  <span className="h-4 w-4">{provider.icon}</span>
                  <span>{provider.label}</span>
                </button>
              ))}
            </div>
          </div>
        ) : null}
      </form>
    );
  }
);

LoginForm.displayName = "LoginForm";
Login Form

Welcome back

Dependencies

Files

Installation
