Sign in

Google and GitHub, or email and password with Forgot password, remember me, loading and a wrong-password error.

$ pnpm dlx shadcn@latest add @dashral/sign-in

When to use

Sign in with a provider or email and password, with forgot password, loading and errors.
Any app's login page.

When not to use

Making an account: Sign up, split.
Apps that only sign in through a company's single sign-on: one button says it; the email form would mislead.

Usage

example.tsx

1import { SignIn } from "@/components/dashral/blocks/sign-in"
2
3<SignIn
4  providers={providers}
5  onProvider={(provider) => signIn(provider)}
6  onSubmit={async ({ email, password }) => {
7    await signIn("credentials", { email, password })
8  }}
9  forgotHref="/forgot-password"
10  signUpHref="/register"
11/>

API reference

SignIn

A sign-in card: providers such as Google and GitHub, or email and password with "Forgot password?" by the label, a remember-me box and a loading state. An error shows above the form. Every part comes from props; wire onSubmit to your auth (without it, try any email with the password "password").

Prop	Type	Default
`title`	`React.ReactNode`	`"Welcome back"`
`description`	`React.ReactNode`	`sample`
`providers`	`{ id: string; label: string; icon?: React.ReactNode }[]` The buttons above the form; none hides them and the "or" under them.	`sample`
`onProvider`	`(id: string) => void` Called with a provider's id when its button is pressed, e.g. to start its sign-in.	—
`onSubmit`	`(values: SignInValues) => Promise<void> \| void` Your sign-in. Resolve to sign in (the card says so); throw an Error to show its message above the form. Without it, the card plays a sample: any email with the password "password".	—
`forgotHref`	`string` Where "Forgot password?" and "Create an account" go; none hides them.	`"#"`
`signUpHref`	`string`	`"#"`
`signUpPrompt`	`string` The words before "Create an account".	`"New to Acme?"`
`done`	`{ title: string; description?: string }` What the card says once signed in.	`sample`

type SignInValues

Prop	Type	Default
`email`	`string`	—
`password`	`string`	—
`remember`	`boolean`	—