What autocomplete attributes do these set?

`username`/`email` on the identifier, `current-password` on login and `new-password` on signup, and `one-time-code` on OTP fields. Password managers and iOS autofill key off exactly those values.

Should the error say which field was wrong?

For validation, yes — per field. For the credentials themselves, no: "email or password is incorrect" keeps you from confirming which accounts exist, which is an enumeration vector.

Are these login and signup forms free to use?

All 15 are free to copy and use in your own projects, including commercial ones. A Pro licence exists for redistribution — shipping them inside a product other people buy — and the full terms are on the licence page.

How do I add one to my project?

Install it with the CLI: `npx hoverlab add auth-login-card` writes the component and its dependencies into your project. Every artifact here also has a copy button for the raw source, and an "Open in sandbox" link if you would rather try it first.

Why does this page mix components and whole pages?

Because the phrase does. The same search covers 9 section blocks and 6 composed pages — one of them is the right size for what you are building, and which one depends on how much of the screen you still have to write.

Email, OAuth, magic link, OTP and two-factor screens.

Auth is the screen with the highest abandonment and the least room for cleverness. What matters is boring: the password field has a reveal toggle, the email field has `autocomplete="email"` so the browser fills it, errors say which field failed, and the OAuth buttons are above the form rather than below it. All of that is wired here.

15 matching9 blocks6 pagesFree to copy

Blocks9

Browse the category →

Email & Social Login Card

Centred sign-in card with social providers, a password reveal toggle and the autoComplete values password managers actually need.

Authentication185 lines1 dep11 Sept

Create your account

Free to start. No card required.

Already have an account? Sign in

We shipped our marketing site in four days instead of three weeks. Same team, same headcount.

Dana WhitfieldHead of Design, Globex

Set up in under two minutes — nothing to configure.

Split Signup With Proof

Registration form beside a testimonial panel, with live password rules and a proof column that drops rather than stacks on mobile.

Authentication205 lines1 dep2 Sept

One-Time Code Input

Six-box OTP entry that handles paste, backspace, arrow keys and iOS SMS autofill — the parts hand-rolled versions always miss.

Authentication184 lines1 dep

Password Reset Request

Reset-link request with a sent state worded to avoid leaking whether an account exists.

Authentication133 lines1 dep10 Sept

New Password With Strength Meter

Set-a-new-password form with a four-step strength meter, confirm matching and errors announced rather than only coloured.

Authentication179 lines1 dep11 Sept

Two-Factor Challenge

Authenticator-code prompt with a backup-code escape hatch and an opt-in trusted-device checkbox that is off by default.

Authentication148 lines1 dep25 Aug

Email-First SSO Sign-In

Email first, then whatever that domain uses. The password field is absent rather than disabled when SSO is enforced, the button names the company it redirects to, and a personal address is a normal answer instead of an error.

Authentication257 lines1 dep10 Sept

Magic Link Sign In

Passwordless sign-in that says what will land in the inbox and how long it lasts, before the address is typed.

Authentication176 linesNo deps

Single sign-on

Your directory, your rules

SSO on a pricing page is one word. To the person configuring it, it is four separate features that vendors bundle inconsistently — so this names them.

SAML 2.0 and OIDCBoth, against any provider. Okta, Entra and Google are documented step by step.
SCIM provisioningUsers appear and disappear with your directory. Deprovisioning is the half that matters.
Enforced, not optionalPassword login can be switched off per domain, so a bypass is not one setting away.
Included, not an upsellOn every paid plan. Charging for the control that makes offboarding safe is a security tax.

Enterprise SSO Split

What SSO actually covers, written for the person who has to configure it rather than the person who asked for it.

Authentication155 linesNo deps

Pages6

See all →

Sign-In Screen

A full auth page that deliberately contains almost nothing but the form — no nav, no marketing, nothing competing with the one job.

Auth Screens1 blocks63 lines

Create your account

Free to start. No card required.

Already have an account? Sign in

We shipped our marketing site in four days instead of three weeks. Same team, same headcount.

Dana WhitfieldHead of Design, Globex

Set up in under two minutes — nothing to configure.

Trusted by teams shipping every day

NorthwindContosoInitechUmbrellaGlobexSoylentHooliVandelay

Rated by the people paying for it

4.8out of 5

from 2,298 verified reviews

5 stars: 1,783
4 stars: 402
3 stars: 71
2 stars: 24
1 star: 18

4.8on G2
4.7on Capterra
4.9on Product Hunt

Signup Page

The signup form with the proof under it rather than above it — the person who arrived here has already decided, and scrolling past testimonials is friction applied to the wrong reader.

Auth Screens3 blocks34 lines

Reset your password

Enter your email and we will send you a link to set a new one.

Back to sign in

Or skip the password

Sign in without a password

One address, one link, no password to forget or reuse. The link works once and expires in fifteen minutes, which is stated here rather than discovered when it fails.

Forgot Password

Password reset, plus the magic link beside it — the moment after a password has failed is when somebody is most willing to stop using one.

Auth Screens2 blocks46 lines

Two-Factor Challenge

The second factor with its fallback on the same screen, because a 2FA prompt with no recovery route is a lockout screen wearing a security screen.

Auth Screens2 blocks40 lines

Sign in

Start with your work email — how you sign in depends on what your company has set up.

Single sign-on

Your directory, your rules

SSO on a pricing page is one word. To the person configuring it, it is four separate features that vendors bundle inconsistently — so this names them.

SAML 2.0 and OIDCBoth, against any provider. Okta, Entra and Google are documented step by step.
SCIM provisioningUsers appear and disappear with your directory. Deprovisioning is the half that matters.
Enforced, not optionalPassword login can be switched off per domain, so a bypass is not one setting away.
Included, not an upsellOn every paid plan. Charging for the control that makes offboarding safe is a security tax.

SSO Sign In

A domain field for the employee who signs in daily, and the capability detail below the fold for the IT reviewer who reads it once.

Auth Screens2 blocks31 lines

Choose a new password

It needs at least 8 characters. Longer beats complicated.

Reset Password

The end of the forgot-password flow, shipped with the state it reaches more than any other screen: a focused error summary linking to each field, beside a strength meter that is a real <meter>.

Auth Screens2 blocks36 lines

Questions about login and signup forms

What autocomplete attributes do these set?: `username`/`email` on the identifier, `current-password` on login and `new-password` on signup, and `one-time-code` on OTP fields. Password managers and iOS autofill key off exactly those values.
Should the error say which field was wrong?: For validation, yes — per field. For the credentials themselves, no: "email or password is incorrect" keeps you from confirming which accounts exist, which is an enumeration vector.
Are these login and signup forms free to use?: All 15 are free to copy and use in your own projects, including commercial ones. A Pro licence exists for redistribution — shipping them inside a product other people buy — and the full terms are on the licence page.
How do I add one to my project?: Install it with the CLI: `npx hoverlab add auth-login-card` writes the component and its dependencies into your project. Every artifact here also has a copy button for the raw source, and an "Open in sandbox" link if you would rather try it first.
Why does this page mix components and whole pages?: Because the phrase does. The same search covers 9 section blocks and 6 composed pages — one of them is the right size for what you are building, and which one depends on how much of the screen you still have to write.

Login and signup forms

Blocks9

Welcome back

Email & Social Login Card

Create your account

Split Signup With Proof

Check your email

One-Time Code Input

Reset your password

Password Reset Request

Choose a new password

New Password With Strength Meter

Two-factor authentication

Two-Factor Challenge

Sign in

Email-First SSO Sign-In

Sign in without a password

Magic Link Sign In

Your directory, your rules

Enterprise SSO Split

Pages6

Welcome back

Sign-In Screen

Create your account

Rated by the people paying for it

Signup Page

Reset your password

Sign in without a password

Forgot Password

Two-factor authentication

Check your email

Two-Factor Challenge

Sign in

Your directory, your rules

SSO Sign In

Choose a new password

Create a team account

There are 4 problems with this form

Reset Password

Questions about login and signup forms

Login and signup forms

Blocks9

Pages6

Questions about login and signup forms

Related collections