Auth widget

Drop-in sign-in / profile UI. A logged-out visitor sees a "Sign in" button that runs them through Cobuntu's login flow and back. A logged-in visitor sees their name + avatar; click opens a profile drawer with their orders / library / settings.

Install

<script src="/widgets/v1/auth.js" async></script>
<div data-cobuntu-auth></div>

The script reads the cobuntu_auth cookie (the same one Cobuntu's own pages use), decodes the JWT locally, and picks the right state to render. Initial paint takes under 10ms — no network call needed.

Three levels of customization

Level 1 — CSS variables

<div data-cobuntu-auth
     style="--cobuntu-bg: #000;
            --cobuntu-color: #fff;
            --cobuntu-border: 1px solid #fff;
            --cobuntu-radius: 0;
            --cobuntu-font: 'Poppins', sans-serif;
            --cobuntu-font-size: 12px;
            --cobuntu-font-weight: 500;
            --cobuntu-letter-spacing: 0.08em;
            --cobuntu-text-transform: uppercase;
            --cobuntu-padding: 14px 32px;
            --cobuntu-hover-bg: #fff;
            --cobuntu-hover-color: #000;">
</div>

Level 2 — data-* config

<div data-cobuntu-auth
     data-variant="outlined"
     data-size="lg"
     data-label-logged-out="YOUR ACCOUNT"
     data-label-logged-in="Hi, {name}"
     data-show-icon="false"
     data-show-avatar="true">
</div>

Level 3 — render-yourself slot (pixel-perfect escape hatch)

Write your own HTML; the widget binds state + behavior via data-cobuntu-* attributes:

<div data-cobuntu-auth>
  <!-- shown when logged out -->
  <a data-cobuntu-show="logged-out"
     data-cobuntu-action="sign-in"
     class="my-brand-button">
    SIGN IN
  </a>
 
  <!-- shown when logged in -->
  <button data-cobuntu-show="logged-in"
          data-cobuntu-action="open-profile"
          class="my-brand-avatar-pill">
    <img data-cobuntu-bind="user-avatar" data-cobuntu-needs-avatar alt="">
    <span data-cobuntu-bind="user-name"></span>
  </button>
</div>

The widget owns state and behavior; you own every pixel of visual. The avatar <img> initially has no src — the widget fills it from /api/users/me once the user is authenticated (or hides it if the user has no avatar set).

State detection

The widget reads the cobuntu_auth cookie (host-scoped, set on your apex by Cobuntu's login flow). It decodes the JWT locally (display-only, no verification) to extract userId, name, email, exp. When the profile drawer opens, the widget lazy-fetches /api/users/me to get the profile image + accurate name. Cached in sessionStorage for 5 minutes.

If the JWT's exp is in the past (with a 30-second grace for clock skew), the widget treats the user as logged out and the next API call clears the stale cookie via Cobuntu's handleStaleAuthOnClient flow.

Public JS API

window.CobuntuAuth = {
  isAuthenticated(): boolean,
  openProfile(): void,    // opens the drawer (no-op if logged out)
  closeProfile(): void,
  signOut(): void,        // clears cookies + reload
  refresh(): void,        // re-render all mounted nodes
};

Useful for landing-page scripts that need to coordinate with the widget — e.g. a custom "Members only" CTA that calls window.CobuntuAuth.openProfile() if authenticated, falls back to a sign-in modal otherwise.

Versioning

v1 is frozen. Breaking changes (renaming a data attribute, dropping a CSS variable, changing drawer behavior) ship as v2. Both versions coexist under /widgets/v1/auth.js and /widgets/v2/auth.js; existing customer landings keep working without intervention.