Installation
Usage
"use client"
import { SignIn } from "@/components/sign-in"
export default function Page() {
return (
<SignIn
onPasswordSignIn={async (email, password) => {
const res = await fetch("/api/sign-in", { method: "POST", body: JSON.stringify({ email, password }) })
if (!res.ok) return "Email or password is incorrect."
}}
/>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| onPasswordSignIn | (email, password) => Promise<void | string> | — | Return or throw a message to show it. |
| onSendCode / onVerifyCode | (email[, code]) => Promise<void | string> | — | One-time-code flow. |
| methods | ("password" | "code")[] | both | Ways to sign in. With one, the switch between them is hidden; the first is shown first. |
| providers | { id; label; href?; onClick? }[] | Google, GitHub | Social buttons (google, github, apple). With href it's a link to your OAuth start URL; with onClick, a button. |
| productName | string | "Uxelith" | Shown in the heading. |
| forgotPasswordHref / signUpHref | string | "#" | Links. |
| headingLevel | 1 | 2 | 1 | 1 when this is the page's top section; 2 when it sits under another title. |
Accessibility
- A real <form>: Enter submits, browsers offer saved passwords and one-time codes.
- Field errors are tied to their fields; form errors are alerts.
- Moving to the code step puts focus in the code field; buttons say what they are waiting for.
Changelog
- v1.0.1Latest
Fix: with a single way to sign in, the subtitle no longer says "Choose how to continue".