Authentication
Complete sign-in, sign-up, recovery, one-time-code and passkey flows, composed entirely from Barua primitives on the glass auth card. Every demo ships real autocomplete attributes so password managers, iCloud Keychain and SMS autofill just work.
Sign In
The flagship flow. .b-auth-card is a glass panel that
stacks a gradient __logo, __title and
__subtitle, a .b-btn--provider social
button, a .b-divider--label, standard
.b-field rows and a block primary action. The card is
shown alone here — in an app, place it inside the
.b-auth page wrapper, which centers it over a
full-height, aurora-tinted background. Wrap the controls in a real
<form> so Enter submits.
autocomplete="email" on email fields,
current-password here, new-password on
sign-up and reset, and one-time-code on the first OTP
box. These attributes are what let password managers save, generate
and fill credentials — treat them as required, and always pair each
input with a visible <label for>.Sign Up
Same card, different fields. Keep it to the essentials — name, email,
password, terms via .b-checkbox — and defer everything
else to onboarding.
Create your account
Start your 14-day Neurotech trial.
Forgot Password
One field, one action, one way back. Confirm the send generically (“If an account exists for that address…”) so the flow never leaks which emails are registered.
Reset your password
We’ll email you a secure reset link.
Reset Password
Two password fields plus a .b-help hint about strength.
Both inputs use autocomplete="new-password", which is
the cue for password managers to offer a generated password.
Choose a new password
for amina@neurotech.africa
At least 8 characters with a number and a symbol — a long passphrase is even stronger.
OTP Input
.b-otp is a row of six single-character boxes. Add
data-b-otp and barua.js wires the behavior:
every box gets inputmode="numeric" and
maxlength="1", typing a digit auto-advances to the next
box (toggling .is-filled), Backspace on an empty box
steps back, and pasting a copied code distributes the digits across
the whole group.
Invalid state
Add .is-invalid to the group when verification fails —
every box gets a danger border and the row shakes once.
role="group" with an aria-label, and every
box has its own label (“Digit 1”…“Digit
6”). Ship inputmode="numeric" and
maxlength="1" in the markup — barua.js
applies them as a fallback, but mobile keyboards should show the
digit pad from the very first paint.Verification
The screen after sign-up, built from the result states in
Feedback: .b-result--confirm
with a tinted resend action and an escape hatch to correct the
address.
Check your inbox
We sent a verification link to amina@neurotech.africa. It expires in 24 hours.
Passkey Prompt
.b-passkey is a focused prompt for WebAuthn sign-in:
a soft accent __icon, a one-line pitch, a primary
action and a ghost fallback to other methods.
Sign in with a passkey
Use Face ID, Touch ID or your device PIN. Nothing to remember, nothing to phish.
Two-Factor Authentication
Composed, not invented: a .b-auth-card carrying an OTP
group, a remember-device .b-switch and a block verify
action.
Two-factor code
Enter the 6-digit code from your authenticator app.
.b-error inside an element with
role="alert" — so screen readers announce it
immediately; the .is-invalid shake is decorative and
silent on its own. Keep focus in the offending field and never clear
what the user typed.Account Switcher
.b-account-switcher stacks .b-account rows
— initials .b-avatar, __name and
__email — inside a .b-menu-shaped glass
surface. Mark the signed-in account with .is-active and
a __check.