Skip to main content

Authentication Pages

Authentication page templates provide consistent, accessible experiences for user sign in, account creation, password reset, and multi-factor authentication in government services.


Overview

Authentication pages are critical touchpoints in any government service that requires user accounts. These templates ensure users can securely access services while meeting federal accessibility and security requirements. The templates use USWDS form components to create familiar, trustworthy experiences that work across all devices and assistive technologies.


Sign In Page

The sign in page template provides a simple, focused interface for returning users to access their accounts with email/username and password fields.

Component Preview

Sign in

Forgot password?

Don't have an account? Create account


Component Code

<div class="grid-row grid-gap">
  <div class="grid-col-12 tablet:grid-col-6">
    <h2>Sign in</h2>
    <form class="usa-form">
      <label class="usa-label" for="sign-in-email">Email address</label>
      <input class="usa-input" id="sign-in-email" name="email" type="email" autocomplete="email" required>

      <label class="usa-label" for="sign-in-password">Password</label>
      <input class="usa-input" id="sign-in-password" name="password" type="password" autocomplete="current-password" required>

      <p class="margin-top-2">
        <a href="#">Forgot password?</a>
      </p>

      <button type="submit" class="usa-button">Sign in</button>
    </form>
    <p class="margin-top-4 padding-top-2 border-top-1px border-base-lighter">
      Don't have an account? <a href="#">Create account</a>
    </p>
  </div>
</div>

Create Account Page

The create account page template provides a registration form with required fields for new users to establish their accounts.

Component Preview

Create account

Must be at least 12 characters with uppercase, lowercase, number, and special character.

Already have an account? Sign in


Component Code

<div class="grid-row grid-gap">
  <div class="grid-col-12 tablet:grid-col-6">
    <h2>Create account</h2>
    <form class="usa-form">
      <label class="usa-label" for="create-email">Email address</label>
      <input class="usa-input" id="create-email" name="email" type="email" autocomplete="email" required>

      <label class="usa-label" for="create-password">Create password</label>
      <span class="usa-hint">Must be at least 12 characters with uppercase, lowercase, number, and special character.</span>
      <input class="usa-input" id="create-password" name="password" type="password" autocomplete="new-password" required>

      <label class="usa-label" for="confirm-password">Confirm password</label>
      <input class="usa-input" id="confirm-password" name="confirm-password" type="password" autocomplete="new-password" required>

      <div class="usa-checkbox margin-top-3">
        <input class="usa-checkbox__input" id="terms" type="checkbox" name="terms" required>
        <label class="usa-checkbox__label" for="terms">I agree to the <a href="#">terms of service</a> and <a href="#">privacy policy</a></label>
      </div>

      <button type="submit" class="usa-button margin-top-3">Create account</button>
    </form>
    <p class="margin-top-4 padding-top-2 border-top-1px border-base-lighter">
      Already have an account? <a href="#">Sign in</a>
    </p>
  </div>
</div>

Forgot Password Page

The forgot password page template provides a simple form for users to request a password reset link via email.

Component Preview

Reset your password

Enter your email address and we'll send you a link to reset your password.

Back to sign in


Component Code

<div class="grid-row grid-gap">
  <div class="grid-col-12 tablet:grid-col-6">
    <h2>Reset your password</h2>
    <p>Enter your email address and we'll send you a link to reset your password.</p>
    <form class="usa-form">
      <label class="usa-label" for="reset-email">Email address</label>
      <input class="usa-input" id="reset-email" name="email" type="email" autocomplete="email" required>

      <button type="submit" class="usa-button margin-top-3">Send reset link</button>
    </form>
    <p class="margin-top-4">
      <a href="#">Back to sign in</a>
    </p>
  </div>
</div>

Multi-factor Authentication Page

The multi-factor authentication page template provides a code entry interface for two-factor authentication (2FA) verification.

Component Preview

Enter your security code

We sent a 6-digit code to your email address. Enter it below to continue.

Enter the 6-digit code

Didn't receive a code? Resend code

Try a different method


Component Code

<div class="grid-row grid-gap">
  <div class="grid-col-12 tablet:grid-col-6">
    <h2>Enter your security code</h2>
    <p>We sent a 6-digit code to your email address. Enter it below to continue.</p>
    <form class="usa-form">
      <label class="usa-label" for="mfa-code">Security code</label>
      <span class="usa-hint">Enter the 6-digit code</span>
      <input class="usa-input usa-input--medium" id="mfa-code" name="code" type="text" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code" required>

      <button type="submit" class="usa-button margin-top-3">Verify</button>
    </form>
    <p class="margin-top-4">
      Didn't receive a code? <a href="#">Resend code</a>
    </p>
    <p class="margin-top-2">
      <a href="#">Try a different method</a>
    </p>
  </div>
</div>


Guidance

When to use authentication page templates

Use these templates for any government service that requires user accounts to access personalized information or complete transactions.
Use when users need to save progress on forms or applications and return later to complete them.
Use when users need to access sensitive personal information such as tax records, benefits status, or health information.

Best practices

Provide clear error messages.
When validation fails, display specific, actionable error messages that tell users exactly what went wrong and how to fix it.
Show password requirements upfront.
Display password requirements before users attempt to create a password, not just after they fail validation.
Consider offering a "remember me" option.
For non-sensitive applications, allow users to stay signed in on trusted devices to reduce friction.
Provide password visibility toggle.
Allow users to show/hide their password to reduce errors, especially on mobile devices.
Use appropriate autocomplete attributes.
Include autocomplete attributes on form fields to enable password managers and improve the user experience.

Security considerations

Always use HTTPS.
All authentication pages must be served over HTTPS to protect credentials in transit.
Implement rate limiting.
Protect against brute force attacks by limiting the number of failed sign in attempts per account and per IP address.
Consider CAPTCHA for sensitive actions.
Use CAPTCHA or similar challenges for account creation and password reset to prevent automated attacks.
Implement secure password policies.
Follow NIST guidelines for password requirements: minimum 12 characters, no arbitrary complexity rules, and check against known compromised passwords.
Use secure session management.
Regenerate session tokens after authentication and implement appropriate session timeouts for sensitive applications.

Accessibility considerations

Use proper form labels.
Every form input must have a visible <label> element associated with it using the for attribute.
Associate error messages with inputs.
Use aria-describedby to associate error messages with their corresponding form fields so screen readers announce them.
Ensure keyboard navigation works.
Users must be able to complete the entire authentication flow using only a keyboard, with a logical tab order.
Provide sufficient color contrast.
Ensure all text, including form labels, hints, and error messages, meets WCAG 2.1 AA contrast requirements.
Don't rely on color alone for errors.
Use icons, text, and other visual cues in addition to color to indicate error states.

USWDS Documentation

For more guidance, view the USWDS Authentication Pages Template Documentation.

Looking for U.S. government information and services?
Visit USA.gov