Authentication UI Pack

Ten accessible authentication UI components for sign-in, recovery, verification and account states.

10 distinct patterns6 frontend formats0 runtime dependencies

Free for personal and commercial projects. No attribution required.

Browse patterns View components

Pack options

Choose one portable format

The selected format applies to code panels and downloads.

Format

Sign In

A labelled sign-in presentation with correct autocomplete values and a recovery route.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sign In</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form class="dy-auth"><h2>Sign in</h2><p>Frontend presentation only. Connect this form to your authentication service.</p><label for="auth-email">Email address</label><input id="auth-email" type="email" autocomplete="email" required><label for="auth-password">Password</label><input id="auth-password" type="password" autocomplete="current-password" required><a href="#forgot">Forgot password?</a><button type="button">Sign in</button></form>
</body>
</html>

Sign Up

A clear account-creation UI with name, email and new-password autocomplete semantics.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sign Up</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form class="dy-auth"><h2>Create account</h2><p>Frontend presentation only. Add trusted server validation and account provisioning.</p><label for="signup-name">Name</label><input id="signup-name" autocomplete="name"><label for="signup-email">Email address</label><input id="signup-email" type="email" autocomplete="email" required><label for="signup-password">Password</label><input id="signup-password" type="password" autocomplete="new-password" aria-describedby="signup-hint" required><p id="signup-hint" class="dy-auth__hint">Use at least 12 characters.</p><button type="button">Create account</button></form>
</body>
</html>

Forgot Password

A privacy-conscious recovery form whose visible message need not reveal account existence.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Forgot Password</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form class="dy-auth"><h2>Forgot your password?</h2><p>Enter your email. Your backend should show the same response whether or not an account exists.</p><label for="recovery-email">Email address</label><input id="recovery-email" type="email" autocomplete="email" required><button type="button">Send reset link</button><a href="#signin">Return to sign in</a></form>
</body>
</html>

Reset Password

A new-password presentation with matching autocomplete values and described requirements.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Reset Password</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form class="dy-auth"><h2>Set a new password</h2><p>Validate the recovery session on your trusted backend before accepting this form.</p><label for="reset-password">New password</label><input id="reset-password" type="password" autocomplete="new-password" aria-describedby="reset-hint" required><p id="reset-hint" class="dy-auth__hint">Use at least 12 characters and avoid reused passwords.</p><label for="reset-confirm">Confirm new password</label><input id="reset-confirm" type="password" autocomplete="new-password" required><button type="button">Update password</button></form>
</body>
</html>

Verification Code

A six-character verification-code UI with a grouped label and one-time-code autocomplete.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Verification Code</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form class="dy-auth"><h2>Enter verification code</h2><p id="code-hint">Enter the six-character code sent by your authentication service.</p><label for="verification-code">Verification code</label><input id="verification-code" inputmode="numeric" autocomplete="one-time-code" maxlength="6" aria-describedby="code-hint" required><button type="button">Verify code</button></form>
</body>
</html>

Magic Link Message

A status screen explaining the next step without pretending an email was actually delivered.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Magic Link Message</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <section class="dy-auth"><h2>Check your email</h2><p class="dy-auth__success" role="status">Your application can show this state after its authentication service accepts a magic-link request.</p><p>Use the secure link from your provider to continue. Delivery and expiry behaviour belong to your backend.</p><a href="#signin">Return to sign in</a></section>
</body>
</html>

Social Login Layout

A provider-button layout with explicit labels and no fake OAuth implementation.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Social Login Layout</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <section class="dy-auth"><h2>Continue to your account</h2><p>These buttons are presentation only. Configure OAuth and callback security with your provider.</p><div class="dy-auth__social"><button class="dy-auth__secondary" type="button">Continue with Google</button><button class="dy-auth__secondary" type="button">Continue with GitHub</button></div><p>or use your email address</p><a class="dy-auth__button" href="#email">Continue with email</a></section>
</body>
</html>

Account Created State

A confirmation state with visible status semantics and a clear onward action.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Account Created State</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <section class="dy-auth"><h2>Account created</h2><p class="dy-auth__success" role="status">The example account setup is complete.</p><p>In a real application, show this only after trusted server confirmation.</p><a class="dy-auth__button" href="#continue">Continue</a></section>
</body>
</html>

Password Requirements

A password field connected to readable requirements without claiming client checks provide security.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Password Requirements</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form class="dy-auth"><h2>Choose a password</h2><label for="requirements-password">Password</label><input id="requirements-password" type="password" autocomplete="new-password" aria-describedby="requirements-list" required><div id="requirements-list"><p>Password requirements</p><ul><li>At least 12 characters</li><li>Not used on another service</li><li>Checked again by your trusted backend</li></ul></div><button type="button">Continue</button></form>
</body>
</html>

Authentication Error State

A concise authentication error that avoids exposing raw provider or server details.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Authentication Error State</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <section class="dy-auth"><h2>We could not sign you in</h2><p class="dy-auth__error" role="alert">Check your details and try again. If the problem continues, request a new recovery link.</p><div><a class="dy-auth__button" href="#retry">Try again</a></div><a href="#forgot">Forgot password?</a></section>
</body>
</html>

Implementation

Portable UI, with clear boundaries.

These are frontend presentation patterns only. They do not implement authentication, sessions, OAuth, password storage, rate limiting or recovery-token validation. Connect them to a trusted backend and provider.

How to use

Choose the format used by your project.
Preview and copy one pattern, or download a focused ZIP.
Replace the example content and connect controls to real application behaviour.
Test keyboard access, contrast, validation and responsive behaviour in your final context.

FAQ

Authentication UI Pack questions

What formats does the Authentication UI Pack include?

The pack provides 6 focused frontend formats. Choose one format before copying or downloading so the archive stays small.

Do these patterns require third-party packages?

No runtime package is required. Tailwind-labelled downloads expect Tailwind CSS to already be configured in the receiving project.

Can I download one pattern?

Yes. Each pattern has its own ZIP, and the page also creates a complete pack ZIP for the selected format.