Authentication
Authentication screens: sign in, sign up, password recovery, magic link, two-factor, device authorization and the whole flow, in a card or split shell.
Installation & usage
npx @youj/cli add auth-loginAlso installs auth-shell.
The CLI copies the block to blocks/auth/login.tsx with every component it uses, so it’s yours to edit.
Every prop is optional and falls back to the demo, so it renders as you see it until you pass your own. Give it your data, rewrite or translate its strings through copy, and connect its actions:
'use client'
import Link from 'next/link'
import { Login, type LoginProps } from '@/blocks/auth/login'
export function LoginView({ providers, brand }: Pick<LoginProps, 'providers' | 'brand'>) {
return (
<Login
providers={providers}
brand={brand}
copy={{ legalBefore: 'By continuing you agree to our' }}
linkComponent={Link}
onSignIn={async (values) => {
// await your API here; the block shows progress until it settles
}}
onProvider={(provider) => {
// your code
}}
/>
)
}Description
Welcome returning users with a sign-in page offering social login or email and password.
Give new users a sign-up page with social login or a name, email and password form.
Help users get back into their account with a form for requesting a password reset link.
Help users choose a new password, with clear rules, a strength indicator and confirmation.
Show users where to look next after they request a passwordless sign-in link.
Guide users through a verification code, with clear feedback when it succeeds or needs another try.
Let someone approve a command-line tool from the browser: who is asking, what it can do, the account it would use, the code as tiles to compare with the terminal and a plain safety note, then Authorize or Deny. Without a code it asks for the one the terminal shows.
The whole way in as one flow: sign in or create an account, reset a forgotten password, confirm a second step or send a sign-in link, with each step sliding in as the card resizes.
The frame for your own sign-in screens: a centered card, or a split page with room for artwork.
Code
Login, the Login story: the files youj add writes.
blocks/auth
Reference
Props12 props, 2 types
Props
| Prop | Type | |
|---|---|---|
onSignIn | (values: LoginValues) => Promise<unknown>Resolve to sign in; reject with an Error whose message says why not. default a short demo wait | a short demo wait |
onProvider | (provider: string) => unknownStarts a provider's redirect with its | – |
providers | AuthProvider[]The "Continue with…" buttons, in order; | – |
defaultValues | Partial<LoginValues>The fields' starting values ( | – |
error | ReactNodeA server error to show above the form (from a failed redirect, say) until the next attempt. | – |
layout | AuthShellVariant'card''split'
default 'card' | 'card' |
illustration | IllustrationSlotThe split layout's art: a scene from the illustrations by id, your own node, or default 'deploy' | 'deploy' |
copy | Partial<AuthCopy>Any of the strings (headings, labels, errors, the quote, the legal line), to rewrite or translate. Default: the Northwind demo's. | – |
brand | AuthBrandThe product above the form: | – |
links | Partial<AuthLinks>Where the links go: | – |
linkComponent | ElementTypeRenders every internal link, e.g. Next.js default `'a'` | `'a'` |
headingLevel | 1 | 2 | 3The step heading's level. default 1 | 1 |
AuthBrand
| Prop | Type | |
|---|---|---|
nameRequired | string | – |
logo | ReactNodeYour mark before the name. Default: none (the demo brand has its own). | – |
href | stringWhere the brand links. default '/' | '/' |
AuthProvider
| Prop | Type | |
|---|---|---|
idRequired | stringWhat | – |
labelRequired | stringThe button's label, e.g. "Continue with Google". | – |
icon | ReactNodeThe provider's mark before the label. | – |
variant | 'outline' | 'secondary'default `secondary` | `secondary` |
className | string | – |
Strings132 keys for copy
Strings
copy takes any of these keys; the rest keep their defaults. A key whose text holds a value (a count, a name) takes a function.
legalBeforelegalTermslegalAndlegalPrivacylegalAfterquotequoteNamequoteRoleproviderPendingproviderSuccessoremailemailPlaceholderemailRequiredemailInvalidgenericErrorsignInTitlesignInDescriptionsignInFormLabelsignInFailedpasswordpasswordRequiredforgotPasswordremembersignInsigningInsignedInsignInErrornewHerecreateAccountLinkmagicLinkmagicLinkSendingmagicLinkSentmagicLinkErrorsignUpTitlesignUpDescriptionsignUpFormLabelsignUpFailednamenamePlaceholdernameRequiredworkEmailpasswordRulestermstermsRequiredcreateAccountcreatingAccountaccountCreatedcreateErrorhaveAccountforgotTitleforgotDescriptionforgotEmailHintsendResetLinksendingsentsendErrorrememberedbackToSignIncheckEmailTitlecheckEmailBeforecheckEmailAfterresendLinkdifferentEmailresetTitleresetDescriptionresetFailednewPasswordconfirmPasswordconfirmRequiredmismatchupdatePasswordsavingsavedsaveErrorresetDoneTitleresetDoneDescriptioncontinueToSignIntwoFactorTitletwoFactorDescriptionrecoveryDescriptionverificationCoderecoveryCodecodeCheckingcodeVerifiedcodeFailedcodeFailedHintcodeVerifiedHintuseRecoveryuseAppsomeoneElsenoTextinboxTitleinboxBeforeinboxAfteropenGmailopenOutlooknothingYetsendAnotherdeviceTitledeviceDescriptiondeviceAppdeviceAccessdeviceAccountdeviceNotYoudeviceCodedeviceCodeMatchdeviceSafetydeviceAuthorizedeviceAuthorizingdeviceAuthorizeddeviceAuthorizeErrordeviceDenydeviceDenyingdeviceDenieddeviceDenyErrordeviceEnterInsteaddeviceEnterTitledeviceEnterDescriptiondeviceEnterLabeldeviceCheckingdeviceCodeFounddeviceCodeUnknowndeviceCodeUnknownHintdeviceApprovedTitledeviceApprovedDescriptiondeviceDeniedTitledeviceDeniedDescriptiondeviceExpiredTitledeviceExpiredDescriptiondeviceTryAnotherdeviceStartOverBuilt from0 components, 1 blocks
Built from
Built on
Accessibilitylandmarks, forms, errors, focus
Accessibility
Every screen sits in a main; in the split layout the artwork is a separate aside, hidden below the lg breakpoint. Two-factor uses the kit’s one-time-code input and offers a resend. Device authorization shows its code as one image named letter by letter, or takes it in the same one-time-code input; Authorize and Deny are real buttons that report their progress, and the step you arrive on is announced. In the full flow the leaving step is inert and a status region announces the step you arrive on. Links and buttons are real a and button elements with the kit’s focus ring.
The Google logo is a trademark of Google, shown for illustration only.