Sign in

Pro

Sign in without a password: your company's SSO, or a one-time code sent to your email. The code screen says where the code went and lets you go back. Errors come from the caller and are shown where they apply. Joining an account happens here too: a pending invite is accepted by signing in with the email it was sent to.

Markdown

Preview

Install

With the Candor CLI

First time? Get started sets up the registry and theme. Or with shadcn directly: npx shadcn@latest add @candor/sign-in

Brings in: button, input, locale, utils · npm: lucide-react@^1.67.0

Usage

TSX · The example above

"use client"

import * as React from "react"
import { SignIn } from "@/components/sign-in"

export default function Example() {
  const [busy, setBusy] = React.useState(false)
  const [error, setError] = React.useState<string>()
  const wait = () => new Promise((r) => setTimeout(r, 600))
  return (
    <SignIn
      brand={<span className="text-sm font-semibold tracking-tight">Keel</span>}
      onSso={() => {}}
      busy={busy}
      error={error}
      onSendCode={async () => {
        setError(undefined)
        setBusy(true)
        await wait()
        setBusy(false)
      }}
      onVerifyCode={async (_email, code) => {
        setBusy(true)
        await wait()
        setBusy(false)
        setError(code === "123456" ? undefined : "That code doesn’t match. Codes work once, for 10 minutes.")
      }}
    />
  )
}

Prop	Type	Default	Description
brand	`React.ReactNode \| undefined`	—	Your logo or name, shown above the form.
onSso	`(() => void) \| undefined`	—	Shows the SSO button; called when it's clicked.
onSendCoderequired	`(email: string) => void \| Promise<void>`	—	Called with the email when a code is asked for; the code screen shows next.
onVerifyCoderequired	`(email: string, code: string) => void \| Promise<void>`	—	Called with the email and the six-digit code typed.
busy	`boolean \| undefined`	false	Disables the buttons and shows a spinner while a request is in flight.
error	`string \| undefined`	—	Shown under the field it concerns.
className	`string \| undefined`	—	Extra classes for the outer element.

Strings

The fixed words, in English by default. Change any of them under signIn in <LocaleProvider strings={{ … }}>; the table is exported as signInStrings.

Key	English
signIn	Sign in
invitedHint	If you were invited, use the email the invite went to.
sso	Continue with company SSO
or	or
workEmail	Work email
emailPlaceholder	you@company.com
emailMeACode	Email me a code
differentEmail	Use a different email
checkEmail	Check your email
codeSent	We sent a 6-digit code to {email}. It works for 10 minutes.
code	Code
newCode	Send a new code

Preview

Install

Usage

<SignIn>

Strings