Session State Patterns

Signed In Badge

A signed-in status badge shows the pinned user Mina Patel and states that no authentication check runs.

Program

Session indicators should make the current account state visible without hiding whether the state is live or static.

signed_in_status_badge.html
Visuals: captured from real browser rendering
<section class="session-card" data-session-state="signed-in">
  <h2>Account status</h2>
  <p class="badge" role="status">Signed in as <strong>Mina Patel</strong></p>
  <p class="note">No authentication check, cookies, storage, or network runs in this lesson.</p>
</section>
<style>
  .session-card { display: grid; gap: 10px; max-width: 30rem; border: 1px solid #0f766e; padding: 12px; }
  .badge { display: inline-block; margin: 0; padding: 6px 10px; background: #ecfdf5; border: 1px solid #0f766e; }
  .note { margin: 0; color: #475569; }
</style>

  1. Pin the signed-in state.

    The card starts from a deterministic signed-in state.
    The card starts from a deterministic signed-in state.

  2. Name the account status card.

    The heading tells people the card is about account state.
    The heading tells people the card is about account state.

  3. Make the badge status text.

    The badge is marked as status text.
    The badge is marked as status text.

  4. Show the pinned user name.

    The visible status names the pinned user.
    The visible status names the pinned user.

  5. State what does not run.

    The note says no auth check, cookies, storage, or network runs.
    The note says no auth check, cookies, storage, or network runs.

  6. Check the signed-in badge.

    The badge, user name, and no-auth note make the static session state clear.
    The badge, user name, and no-auth note make the static session state clear.
signed-in state A visible state tells people whether they are signed in.
pinned user The user name is fixed lesson data.
no auth check The lesson should not imply a real authentication check ran.