LIVE PREVIEWBUY FOR $5

Auth UI Equipment is a superbly crafted, dark-themed authentication UI template constructed fully with pure HTML, CSS, and vanilla JavaScript — no frameworks, no construct instruments, no dependencies. Simply open in a browser and it really works.
Whether or not you’re constructing a SaaS product, internet app, or shopper undertaking, Auth UI Equipment offers you a production-ready set of authentication screens that look beautiful and are simple to combine with any backend. 

What's Included — 7 Pages

Login Web page — Electronic mail/password sign up with Keep in mind Me, Forgot Password hyperlink, Google & GitHub social auth buttons, and toast notifications.
Register Web page — Full registration kind with first/final identify, e-mail, real-time password power meter, affirm password, and phrases settlement.
Forgot Password Web page — Electronic mail submission with animated success state and 60-second resend cooldown timer.
OTP Verification Web page — 6-digit OTP enter with 5-minute countdown timer, auto-advance between fields, clipboard paste help, and auto-submit on completion.
Reset Password Web page — New password kind with dwell requirement guidelines (uppercase, lowercase, quantity/image, 8+ chars), password match indicator, and step progress indicator.
Dashboard Web page — Auth metrics dashboard with stat playing cards, bar chart, donut chart (auth strategies), and up to date login exercise desk with system icons and standing badges.
Documentation Web page — Full integration information with code examples, customization reference, and backend hookup directions.

Design Highlights

Darkish Glassmorphism — Frosted glass playing cards with backdrop blur, layered transparency, and comfortable inside highlights
Animated Background — Drifting CSS grid + 3 floating shade orbs that create depth with out heavy belongings
Micro-interactions — Button shimmer on hover, staggered entrance animations, shake on error, scale-in on success
Step Progress Indicator — Visible 3-step movement on the reset password web page (Confirm → Reset → Executed)
Animated OTP Timer — Countdown ring with shade change at 60 seconds (warning) and 0 seconds (expired) 

Safety Options

Content material Safety Coverage (CSP) headers on each web page — blocks XSS, injection assaults
X-Body-Choices: DENY — prevents clickjacking assaults
X-Content material-Sort-Choices: nosniff — prevents MIME sniffing
No inline occasion handlers — all occasions through addEventListener solely
Person knowledge through textContent — by no means innerHTML, eliminating XSS threat
Enter size limits — e-mail (254 chars), password (128 chars), identify (50 chars)
Strict enter validation — e-mail regex, identify character whitelist, password power enforcement
No localStorage for delicate knowledge — tokens dealt with safely

Responsive & Accessible

Cell-first CSS — works from 320px to giant 4K shows
Semantic HTML — correct <label>, aria-label, aria-live, aria-pressed on all interactive components
Keyboard accessible — Enter to submit, Arrow keys for OTP navigation
Display reader pleasant — toast notifications use aria-live=”well mannered”

Technical Specs

Zero dependencies — no jQuery, no React, no npm, no construct step
Pure HTML + CSS + Vanilla JS — works on any internet hosting: Netlify, Vercel, GitHub Pages, cPanel, Apache, Nginx
Single shared CSS file — all design tokens (colours, fonts, spacing) in a single place through CSS customized properties
Simple to rebrand — change model identify and colours in underneath 2 minutes
Each web page has a clearly marked handler perform prepared to switch along with your API name:
// Instance: Join Login to your API
fetch(’/api/auth/login’, {
technique: ‘POST’,
headers: { ‘Content material-Sort’: ‘utility/json’ },
physique: JSON.stringify({ e-mail, password })
})
.then(res => res.json())
.then(knowledge => {
if (knowledge.token) window.location.href = ‘dashboard.html’;
}); 

Simple Backend Integration

Simple Customization
Change model colours in 30 seconds by enhancing CSS variables in shared.css:
:root {
—accent: #00d4ff; /* Your major model shade /
—accent2: #7b5ea7; / Secondary gradient shade /
—success: #00e5a0; / Success / inexperienced /
—hazard: #ff4d6d; / Error / crimson */
}
Chrome 90+ · Firefox 88+ · Safari 14+ · Edge 90+
index.html → Login Web page
register.html → Register Web page
forgot-password.html → Forgot Password Web page
verify-otp.html → OTP Verification Web page
reset-password.html → Reset Password Web page
dashboard.html → Dashboard Preview
documentation.html → Full Documentation
shared.css → All Shared Kinds
README.md → Fast Begin Information 

Information Included


Source