Auth Card | Zyeon UI

Preview in your theme

Sign-in with two social providers. The stub accepts exactly [email protected] / correct-horse-battery after ~900ms. Anything else comes back as a typed invalid-credentials: a form-level role="alert" that never says which half was wrong, the email you typed stays in the field, and the caret lands in the password box with the value selected. Three failures in a row flip the stub to rate-limitedwith a retry window. Press Enter in either field to submit, then hammer the submit button while it says "Signing in…" — the counter below moves once per submit, however many presses land. The GitHub button returns a promise, so it spins for 1.2s; the Google button is synchronous and just logs.

Sign in

Welcome back. Use your email and password to continue.

or continue with email

Demo credentials are printed above the card on purpose — no real session is created.

New here?

Demo backend · onSubmit calls: 0

Nothing sent yet. Submitting a blank or malformed address never reaches onSubmit.

Social clicks

None yet. Both buttons call a real handler passed through providers[].onClick.

Sign-up. The strength meter is length-first — no "must contain a symbol" rule: short is rejected under 8 characters, aaaaaaaaaaaaaaaais long but capped at "Fair" because it only uses one distinct character, and tin-otter-glassreads "Strong". The password field is autocomplete="new-password" here so managers offer to generate one. Two server rejections are wired: use [email protected] for email-taken (lands under the email field, which keeps its value) and password123 for weak-password(lands under the password field) — the breach check is the server's job, which is why it is a failure code and not a client rule.

Create your account

One account for every workspace you're invited to.

By creating an account you agree to the terms — replace this line with real links.

Already have an account?

Demo backend · onSubmit calls: 0

Nothing sent yet. Invalid input never reaches onSubmit.

Reset mode: no password field, no social row (a magic link is about an address, not an identity provider), and the confirmation is deliberately hedged — "if that address has an account" — so the card never becomes an account-existence oracle. Every address resolves the same way after ~700ms. "Back to sign in" returns to the form with the address still filled in.

Reset your password

We'll email you a link that signs you in and lets you pick a new password.

Remembered it?

Demo backend · onSubmit calls: 0

Nothing sent yet. Invalid input never reaches onSubmit.

Controlled mode(the buttons below drive it, and the card's own footer link reports back through onModeChange), fully re-skinned copy, no social row, a 12-character minimum, and no "remember me". The first attempt throws instead of returning a failure — the card maps that to networkand prints the Error's own message verbatim. Nothing auto-dismisses it: press submit again with the same address and the second attempt goes through. Switching modes clears the password (a value autofilled as current-password must not be submitted as a new one) but keeps the email.

next attempt: throws

Join

Twelve characters minimum. Length is the only rule that matters.

Already have an account?

Demo backend · onSubmit calls: 0

Nothing sent yet. Invalid input never reaches onSubmit.

Loading preview…

This component is part of Pro

The install command, prompt and concept map are included with a Pro license — one purchase unlocks every Pro component, forever.

Unlock with Pro