Page templates

Authentication pages

Allow users to create an account or sign in.

It can be difficult or confusing for users to create accounts or sign in to a website. The best way to help is to provide context about why they’re creating an account and to remove unnecessary distractions from the page.

You should use a shared service or the authentication page templates to create a more consistent experience across sites and services.

Government websites requiring account creation can use login.gov, a FedRAMP-authorized, single sign-on shared service. Login.gov is simple, secure, and follows our sign-in guidance. Users can also sign in to any government website that uses login.gov with the same username and password.

If you’re unable to use a shared service like login.gov, use our authentication page templates:

Create account

Explain the benefits of setting up an account

Site users will be more likely to create an account if it’s easy and they understand the benefits. Keep the account creation process simple with a single “create account” button and limited distractions (like other calls-to-action). Succinctly outline the benefits of setting up an account, emphasizing what they can do and how it can help them.

<a class="usa-skipnav" href="#main-content">Skip to main content</a>
  






<section class="usa-banner" aria-label="Official government website">
  <div class="usa-accordion">
    <header class="usa-banner__header">
      <div class="usa-banner__inner">
        <div class="grid-col-auto">
          <img class="usa-banner__header-flag" src="/assets/img/us_flag_small.png" alt="U.S. flag">
        </div>
        <div class="grid-col-fill tablet:grid-col-auto">
          <p class="usa-banner__header-text">An official website of the United States government</p>
          <p class="usa-banner__header-action" aria-hidden="true">Here’s how you know</p>
        </div>
        <button class="usa-accordion__button usa-banner__button"
          aria-expanded="false" aria-controls="gov-banner">
          <span class="usa-banner__button-text">Here’s how you know</span>
        </button>
      </div>
    </header>
    <div class="usa-banner__content usa-accordion__content" id="gov-banner">
      <div class="grid-row grid-gap-lg">
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-dot-gov.svg" role="img" alt="" aria-hidden="true">
          <div class="usa-media-block__body">
            <p>
              <strong>
                Official websites use .gov
</strong>
              <br/>
              A <strong>.gov</strong> website belongs to an official government organization in the United States.

            </p>
          </div>
        </div>
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-https.svg" role="img" alt="" aria-hidden="true">
          <div class="usa-media-block__body">
            <p>
              <strong>
                Secure .gov websites use HTTPS
</strong>
              <br/>
              A <strong>lock</strong> (
<span class="icon-lock"><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-title banner-lock-description" focusable="false"><title id="banner-lock-title">Lock</title><desc id="banner-lock-description">A locked padlock</desc><path fill="#000000" fill-rule="evenodd" d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"/></svg></span>
) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


  

<header class="usa-header usa-header--extended"><div class="usa-navbar">
  <div class="usa-logo" id="extended-logo">
    <em class="usa-logo__text"><a href="/" title="Home" aria-label="Home">Project title</a></em>
  </div>
  </div>
</header>

  

<main id="main-content">
  <div class="bg-base-lightest">
    <section class="grid-container usa-section">
      <div class="grid-row margin-x-neg-205 flex-justify-center">
        <div class="grid-col-12 mobile-lg:grid-col-10 tablet:grid-col-8 desktop:grid-col-6 padding-x-205 margin-bottom-4">
          <h1 class="desktop:display-none font-sans-lg margin-bottom-4 tablet:margin-top-neg-3">A tagline that explains the benefit of creating an account.</h1>
          <div class="bg-white padding-y-3 padding-x-5 border border-base-lighter">
            <h1 class="margin-bottom-0">Create account</h1>
            <form class="usa-form">
              <fieldset class="usa-fieldset">
                <legend class="usa-legend margin-top-1">Get started with an account.</legend>
                <p>
                  <abbr title="required" class="usa-hint usa-hint--required">*</abbr> indicates a required field.
                </p>
                <label class="usa-label" for="email">Email address <abbr title="required" class="usa-label--required">*</abbr></label>
                <input class="usa-input" id="email" name="email" type="email" autocapitalize="off" autocorrect="off" required>


                <label class="usa-label" for="password-create-account">Create password <abbr title="required" class="usa-label--required">*</abbr></label>
                <input class="usa-input" id="password-create-account" name="password" type="password" required>

                <p class="usa-form__note">
                  <a title="Show password" href="javascript:void(0);"
                    class="usa-show-password"
                    aria-controls="password-create-account password-create-account-confirm">Show password</a>
                </p>

                <label class="usa-label" for="password-create-account-confirm">Re-type password <abbr title="required" class="usa-label--required">*</abbr></label>
                <input class="usa-input" id="password-create-account-confirm" name="password-confirm" type="password" required>


                <div class="usa-checkbox margin-y-3">
                  <input class="usa-checkbox__input" id="terms-and-conditions" type="checkbox" name="terms-and-conditions" value="terms" required>
                  <label class="usa-checkbox__label" for="terms-and-conditions">I agree to the <a href="javascript:void()">terms and conditions</a>. <abbr title="required" class="usa-label--required">*</abbr></label>
                </div>

                <input class="usa-button" type="submit" value="Create account">
              </fieldset>
            </form>
          </div>
          <p class="text-center desktop:text-left">Already have an account? <a class="usa-link" href="javascript:void(0);">Sign in</a>.</p>

        </div>
        <div class="grid-col-12 mobile-lg:grid-col-10 tablet:grid-col-8 desktop:grid-col-6 padding-x-205">
            <div class="border-top border-base-lighter padding-top-4 desktop:border-0 desktop:padding-top-0">
            
<h2 class="display-none desktop:display-block">A tagline that explains the benefit of creating an account.</h2>
<div class="usa-prose">
<p>Here’s space for a longer description to introduce 3-5 easily scannable bullet points. Note that on mobile, this text block will bump below the Create Account form.</p>
  <section class="usa-graphic-list">
      <div class="usa-graphic-list__row">
        <div class="usa-media-block margin-y-2">
          <img class="usa-media-block__img height-7 width-7"  src="/assets/img/circle-gray-20.svg" alt="Alt text">
          <div class="usa-media-block__body">
            <p><strong>Value proposition 1:</strong> Vivamus nec velit sed leo scelerisque laoreet vestibulum.</p>
          </div>
        </div>
        <div class="usa-media-block margin-y-2">
          <img class="usa-media-block__img height-7 width-7"  src="/assets/img/circle-gray-20.svg" alt="Alt text">
          <div class="usa-media-block__body">
            <p><strong>Value proposition 2:</strong> Ut ac dictum elit. Vivamus nec velit sed leo laoreet vestibulum.</p>
          </div>
        </div>
        <div class="usa-media-block margin-y-2">
          <img class="usa-media-block__img height-7 width-7"  src="/assets/img/circle-gray-20.svg" alt="Alt text">
          <div class="usa-media-block__body">
            <p><strong>Value proposition 3:</strong> Vivamus nec velit sed leo scelerisque laoreet vestibulum.</p>
          </div>
        </div>
      </div>
  </section>
</div>


            <div class="border-top border-base-lighter margin-top-3 padding-top-1">
  <h2>Are you a federal employee?</h2>
  <div class="usa-prose">
    <p>If you are a federal employee or [other secondary user], please use [secondary Single Sign On (SSO)].</p>
    <p><a class="usa-button usa-button--outline" href="javascript:void()">Launch secondary SSO</a></p>
  </div>
</div>
            </div>
        </div>
    </section>
  </div>
</main>

When to use the create account template

  • Users can create an account directly on your website. This template is intended for agencies who have a self-hosted authentication system and need a design that’s simple, usable, and mobile-friendly.

When to consider something else

  • Your agency uses a third-party authentication system. If you’re leveraging a shared service, follow the user experience guidelines from that service. For example, login.gov recommends placing a “sign in” link in the header of your website that takes users through the entire “sign in” or “create an account” experience on the login.gov site.

Usability guidance

  • Help users focus on the task. Remove extraneous content. A “create account” page works best when it’s simple, focused, and to-the-point.
  • Use specific field labels. If you’re asking for a username, say username. If it’s an email, say email address. Don’t make the user guess which one you mean.
  • Keep the form short. Only ask for what’s necessary to create an account. Eliminate optional fields whenever possible, and keep the information pertinent to the account creation process (like username, email, password, and security questions). If you need to ask for something outside this common account creation information, explain why it’s needed.
  • Convey clear password requirements. Clearly indicate any password requirements. If possible, validate these requirements as users type, and use a password meter to show password strength.
  • Allow users to toggle password visibility. This helps ensure users are entering passwords correctly while maintaining privacy when needed.
  • Enable copy and paste. Many users rely on password generators because they provide secure passwords and phrases they don’t have to memorize. Forcing manual entry is a barrier to usability and can cause mistakes.
  • Use consistent, accurate language. Use the phrase “create account” instead of “sign up,” which can be more easily confused with “sign in.” It’s also more accurate, since users aren’t necessarily “signing up” for anything when accessing a government site or service.
  • Allow users to switch between creating an account and signing in. Users should be able to easily find where to sign in from the create account page, and vice versa. This also applies to the global header of the site, where users should have direct access to either the sign-in or create an account page.
  • Include required legal agreements. Work with your agency’s information security officer and general counsel to determine how to handle legal copy placement regarding terms and conditions. Use a checkbox to affirm that your users accept terms and conditions. Make the terms and conditions easy to find without distracting from the primary purpose of creating an account.

Components used in this template

Additional Information

NIST Special Publication 800-63-3, Digital Identity Guidelines, provides technical requirements for federal agencies implementing digital identity services. The guidelines cover identity proofing and authentication of users (such as employees, contractors, or private individuals) interacting with government IT systems over open networks.

Sign-in

Provide users with a clear and uncluttered sign-in experience.

<a class="usa-skipnav" href="#main-content">Skip to main content</a>
  






<section class="usa-banner" aria-label="Official government website">
  <div class="usa-accordion">
    <header class="usa-banner__header">
      <div class="usa-banner__inner">
        <div class="grid-col-auto">
          <img class="usa-banner__header-flag" src="/assets/img/us_flag_small.png" alt="U.S. flag">
        </div>
        <div class="grid-col-fill tablet:grid-col-auto">
          <p class="usa-banner__header-text">An official website of the United States government</p>
          <p class="usa-banner__header-action" aria-hidden="true">Here’s how you know</p>
        </div>
        <button class="usa-accordion__button usa-banner__button"
          aria-expanded="false" aria-controls="gov-banner">
          <span class="usa-banner__button-text">Here’s how you know</span>
        </button>
      </div>
    </header>
    <div class="usa-banner__content usa-accordion__content" id="gov-banner">
      <div class="grid-row grid-gap-lg">
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-dot-gov.svg" role="img" alt="" aria-hidden="true">
          <div class="usa-media-block__body">
            <p>
              <strong>
                Official websites use .gov
</strong>
              <br/>
              A <strong>.gov</strong> website belongs to an official government organization in the United States.

            </p>
          </div>
        </div>
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-https.svg" role="img" alt="" aria-hidden="true">
          <div class="usa-media-block__body">
            <p>
              <strong>
                Secure .gov websites use HTTPS
</strong>
              <br/>
              A <strong>lock</strong> (
<span class="icon-lock"><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-title banner-lock-description" focusable="false"><title id="banner-lock-title">Lock</title><desc id="banner-lock-description">A locked padlock</desc><path fill="#000000" fill-rule="evenodd" d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"/></svg></span>
) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


  

<header class="usa-header usa-header--extended"><div class="usa-navbar">
  <div class="usa-logo" id="extended-logo">
    <em class="usa-logo__text"><a href="/" title="Home" aria-label="Home">Project title</a></em>
  </div>
  </div>
</header>

  

<main id="main-content">
  <div class="bg-base-lightest">
    <section class="grid-container usa-section">
      <div class="grid-row flex-justify-center">
        <div class="grid-col-12 tablet:grid-col-8 desktop:grid-col-6">
          <div class="bg-white padding-y-3 padding-x-5 border border-base-lighter">
            <h1 class="margin-bottom-0">Sign in</h1>
            <form class="usa-form">
  <fieldset class="usa-fieldset">
    <legend class="usa-legend margin-top-1">Access your account.</legend>
    <label class="usa-label" for="email">Email address</label>
    <input class="usa-input" id="email" name="email" type="email" autocapitalize="off" autocorrect="off" required>
    <label class="usa-label" for="password-sign-in">Password</label>
    <input class="usa-input" id="password-sign-in" name="password" type="password" required>
    <p class="usa-form__note">
      <a title="Show password" href="javascript:void(0);"
        class="usa-show-password"
        aria-controls="password-sign-in">Show password</a>
    </p>
    <input class="usa-button" type="submit" value="Sign in">
    <p><a href="javascript:void(0);" title="Forgot password">
      Forgot password?</a></p>
  </fieldset>
</form>
          </div>
          <p class="text-center">Don’t have an account? <a class="usa-link" href="javascript:void(0);">Create your account now</a>.</p>
          <div class="border-top border-base-lighter margin-top-3 padding-top-1">
  <h2>Are you a federal employee?</h2>
  <div class="usa-prose">
    <p>If you are a federal employee or [other secondary user], please use [secondary Single Sign On (SSO)].</p>
    <p><a class="usa-button usa-button--outline" href="javascript:void()">Launch secondary SSO</a></p>
  </div>
</div>
        </div>
      </div>
    </section>
  </div>
</main>

When to use the sign-in template

  • Users have accounts directly on your website. This template is intended for agencies who have a self-hosted authentication system and need a design that’s simple, usable, and mobile-friendly.

When to consider something else

  • Your agency uses a third-party authentication system. If you’re leveraging a shared service, follow the sign-in guidelines from that service. For example, login.gov recommends placing a “sign-in” link in the header of your website that takes users through the entire “sign in” or “create an account” experience on the login.gov site.

Usability guidance

  • Clearly provide a way to reset passwords or recover usernames. Provide a clearly marked link for users to reset a password or recover a forgotten username.
  • Provide secure error feedback. If a sign-in attempt fails, let users know there was an error, but don’t indicate which field was invalid, for example “Incorrect password” or “Username not found.” This helps maintain stronger protection against hackers and unauthorized users.
  • Help users focus on the task. Remove extraneous content to minimize distractions.
  • Use specific field labels. If you’re asking for a username, say username. If it’s an email, say email address. Don’t make the user guess which one you mean.
  • Allow users to toggle password visibility. This helps ensure users are entering passwords correctly while maintaining privacy when needed.
  • Enable copy/paste. Many users rely on password generators because they provide secure passwords and phrases they don’t have to memorize. Forcing manual entry is a barrier to usability and can cause mistakes.
  • Use consistent, accurate language. Use “sign in” if it’s a verb (like a link in a call-to-action or button) or “sign-in” if it’s a noun or adjective (like “sign-in page”). Don’t use “login” or “log in.”
  • Allow users to switch between creating an account and signing in. Users should be able to easily find where to sign in from the create account page, and vice versa. This also applies to the global header of the site, where users should have “one-click” access to either the sign-in or create an account page.

Components used in this template

Multiple sign-in options

Use one landing page for all sign-in options.

If you have multiple sign-in options, use this template to guide users to access their account through a prioritized option.

<a class="usa-skipnav" href="#main-content">Skip to main content</a>
  






<section class="usa-banner" aria-label="Official government website">
  <div class="usa-accordion">
    <header class="usa-banner__header">
      <div class="usa-banner__inner">
        <div class="grid-col-auto">
          <img class="usa-banner__header-flag" src="/assets/img/us_flag_small.png" alt="U.S. flag">
        </div>
        <div class="grid-col-fill tablet:grid-col-auto">
          <p class="usa-banner__header-text">An official website of the United States government</p>
          <p class="usa-banner__header-action" aria-hidden="true">Here’s how you know</p>
        </div>
        <button class="usa-accordion__button usa-banner__button"
          aria-expanded="false" aria-controls="gov-banner">
          <span class="usa-banner__button-text">Here’s how you know</span>
        </button>
      </div>
    </header>
    <div class="usa-banner__content usa-accordion__content" id="gov-banner">
      <div class="grid-row grid-gap-lg">
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-dot-gov.svg" role="img" alt="" aria-hidden="true">
          <div class="usa-media-block__body">
            <p>
              <strong>
                Official websites use .gov
</strong>
              <br/>
              A <strong>.gov</strong> website belongs to an official government organization in the United States.

            </p>
          </div>
        </div>
        <div class="usa-banner__guidance tablet:grid-col-6">
          <img class="usa-banner__icon usa-media-block__img" src="/assets/img/icon-https.svg" role="img" alt="" aria-hidden="true">
          <div class="usa-media-block__body">
            <p>
              <strong>
                Secure .gov websites use HTTPS
</strong>
              <br/>
              A <strong>lock</strong> (
<span class="icon-lock"><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-title banner-lock-description" focusable="false"><title id="banner-lock-title">Lock</title><desc id="banner-lock-description">A locked padlock</desc><path fill="#000000" fill-rule="evenodd" d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z"/></svg></span>
) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


  

<header class="usa-header usa-header--extended"><div class="usa-navbar">
  <div class="usa-logo" id="extended-logo">
    <em class="usa-logo__text"><a href="/" title="Home" aria-label="Home">Project title</a></em>
  </div>
  </div>
</header>

  

<main id="main-content">
  <div class="bg-base-lightest">
    <section class="grid-container usa-section">
      <div class="grid-row margin-x-neg-205 margin-bottom-7  flex-justify-center">
        <div class="grid-col-12 mobile-lg:grid-col-10 tablet:grid-col-8 desktop:grid-col-6 padding-x-205 margin-bottom-7">
          <h1 class="desktop:display-none font-sans-lg margin-bottom-4 tablet:margin-top-neg-3">A tagline that explains the benefit of creating an account.</h1>
          <div class="bg-white padding-y-3 padding-x-5 border border-base-lighter">
            <h1 class="margin-bottom-1">Sign in to your account</h1>
            <div class="usa-prose">
              <p class="margin-top-1">You can access your account by signing in with one of the options below.</p>
            </div>
            <p><a href="javascript:void()" class="usa-button usa-button--outline width-full">Sign in with Login.gov</a></p>
            <p><a href="javascript:void()" class="usa-button usa-button--outline width-full">Sign in with Legacy system 1</a></p>
            <p><a href="javascript:void()" class="usa-button usa-button--outline width-full">Sign in with Legacy system 2</a></p>
            <div class="border-top border-base-lighter margin-top-6 padding-top-1">
              <p><strong>Don’t have an account?</strong></p>
              <p>If you don’t have an account already, sign up here:</p>
              <p><a href="javascript:void()" class="usa-button width-full">Create Login.gov account</a></p>
            </div>
          </div>
        </div>
        <div class="grid-col-12 mobile-lg:grid-col-10 tablet:grid-col-8 desktop:grid-col-6 padding-x-205">
          
<h2 class="display-none desktop:display-block">A tagline that explains the benefit of creating an account.</h2>
<div class="usa-prose">
<p>Here’s space for a longer description to introduce 3-5 easily scannable bullet points. Note that on mobile, this text block will bump below the Create Account form.</p>
  <section class="usa-graphic-list">
      <div class="usa-graphic-list__row">
        <div class="usa-media-block margin-y-2">
          <img class="usa-media-block__img height-7 width-7"  src="/assets/img/circle-gray-20.svg" alt="Alt text">
          <div class="usa-media-block__body">
            <p><strong>Value proposition 1:</strong> Vivamus nec velit sed leo scelerisque laoreet vestibulum.</p>
          </div>
        </div>
        <div class="usa-media-block margin-y-2">
          <img class="usa-media-block__img height-7 width-7"  src="/assets/img/circle-gray-20.svg" alt="Alt text">
          <div class="usa-media-block__body">
            <p><strong>Value proposition 2:</strong> Ut ac dictum elit. Vivamus nec velit sed leo laoreet vestibulum.</p>
          </div>
        </div>
        <div class="usa-media-block margin-y-2">
          <img class="usa-media-block__img height-7 width-7"  src="/assets/img/circle-gray-20.svg" alt="Alt text">
          <div class="usa-media-block__body">
            <p><strong>Value proposition 3:</strong> Vivamus nec velit sed leo scelerisque laoreet vestibulum.</p>
          </div>
        </div>
      </div>
  </section>
</div>


          <div class="border-top border-base-lighter margin-top-3 padding-top-1">
  <h2>Are you a federal employee?</h2>
  <div class="usa-prose">
    <p>If you are a federal employee or [other secondary user], please use [secondary Single Sign On (SSO)].</p>
    <p><a class="usa-button usa-button--outline" href="javascript:void()">Launch secondary SSO</a></p>
  </div>
</div>
      </div>
    </section>
  </div>
</main>

When to use the multiple sign-in options template

  • Multiple, legacy authentication systems. If you have more than one authentication system in place and no current ability to consolidate, this template allows you to prioritize one system for account creation while providing multiple options for signing in.

When to consider something else

  • Just one sign-in option. If you can reduce your sign-in options to one authentication system, we recommend avoiding this pattern.

Usability guidance

  • Emphasize one method over others. Indicate a preferred method by giving it more prominence in your design.
  • Focus on the task. Remove extraneous content to minimize distractions.
  • Use consistent, accurate language. Use “sign in” if it’s a verb (like link in a call-to-action or button) or “sign-in” if it’s a noun or adjective form (like “sign-in page”). Don’t use “login” or “log in.”
  • Explain why and how. Let users know the value of accessing their account and explain the purpose of any additional sign-in options.

Components used in this template