sesamy-login

A web component that provides authentication functionality, displaying a login button for unauthenticated users and an avatar with a dropdown menu for authenticated users.

Props/Attributes

• loading - Boolean that shows a loading state
• loggedIn - Boolean that forces the logged-in rendering
• class - Extra CSS classes merged onto the button

Button text and the avatar are customised through slots, not attributes. The component's language comes from your vendor client configuration, not from an attribute.

Events

The component dispatches bubbling, composed CustomEvents, so you can listen on the element itself or on any ancestor:

• sesamy:login-success - Dispatched after a successful login, with detail.userinfo (always includes sub)
• sesamy:login-error - Dispatched when login fails, with detail.error ({ code, message, cause })
• sesamy:logout - Dispatched when the user logs out

document.querySelector('sesamy-login').addEventListener('sesamy:login-success', (event) => {
  console.log('Logged in as', event.detail.userinfo.sub);
});

Basic Usage

<!-- Simple login button -->
<sesamy-login></sesamy-login>

<!-- Customised button text, via the button-text slot -->
<sesamy-login>
  <span slot="button-text">Sign In Now</span>
</sesamy-login>

Slots

The sesamy-login component provides several slots for customising its appearance and behaviour:

button-text

• Purpose: Replaces the default login button text
• Behavior: Content in this slot will be rendered as the main text of the login button, replacing the default (localized) "login" text

<sesamy-login>
  <span slot="button-text">Sign in with Email</span>
</sesamy-login>

button-text-prefix

• Purpose: Inserts content before the login button text
• Behavior: Content in this slot will appear before the main button text, useful for adding icons or labels

<sesamy-login>
  <span slot="button-text-prefix">🔒</span>
</sesamy-login>

button-text-suffix

• Purpose: Inserts content after the login button text
• Behavior: Content in this slot will appear after the main button text, useful for adding icons or additional info

<sesamy-login>
  <span slot="button-text-suffix">→</span>
</sesamy-login>

avatar

• Purpose: Replaces the default avatar shown when logged in
• Behavior: Content in this slot will be rendered instead of the default avatar image/button when the user is authenticated

<sesamy-login>
  <img
    slot="avatar"
    src="/my-avatar.png"
    alt="User avatar"
    style="width:32px;height:32px;border-radius:50%"
  />
</sesamy-login>

popup-menu

• Purpose: Replaces the default popup menu shown when clicking the avatar
• Behavior: Content in this slot will be rendered instead of the default menu (email/account/logout) when the user is authenticated and opens the menu

<sesamy-login>
  <div slot="popup-menu">
    <a href="/profile">Profile</a>
    <a href="/logout">Logout</a>
  </div>
</sesamy-login>

Slots are optional

All slots are optional. If not provided, the component will render its default content for each area.

Design Tokens

See Styling Components for the styling model and the global tokens (--sesamy-primary-color, --sesamy-font-family, --sesamy-base-font-size).

Button and avatar

Token	Styles	Default
--sesamy-login-button-color	Umbrella token: text colour, border colour, and avatar background at once	#000000
--sesamy-login-button-text-color	Button text colour (ignored if the umbrella token is set)	#000000
--sesamy-login-button-text-size	Button text size	14px
--sesamy-login-button-background-color	Button background	transparent
--sesamy-login-button-border-color	Button border colour (ignored if the umbrella token is set)	#000000
--sesamy-login-button-border-width	Button border width	1px
--sesamy-login-button-border-radius	Button border radius	6px
--sesamy-login-button-font-weight	Button font weight	700
--sesamy-login-avatar-bgcolor	Avatar background (logged in)	button colour
--sesamy-login-avatar-textcolor	Avatar initials colour	#ffffff

Umbrella token precedence

When --sesamy-login-button-color is set, it takes precedence over --sesamy-login-button-text-color and --sesamy-login-button-border-color. If you set the specific tokens and see no effect, remove the umbrella token.

Popup menu

Token	Styles	Default
--sesamy-login-popup-width	Popup menu width	288px
--sesamy-login-popup-bgcolor	Popup background	#ffffff
--sesamy-login-popup-textcolor	Popup text colour	#000000
--sesamy-login-popup-border-color	Popup border colour	#e5e7eb
--sesamy-login-popup-border-width	Popup border width	1px
--sesamy-login-popup-border-radius	Popup border radius	2px
--sesamy-login-popup-zindex	Popup z-index	10

Example

<sesamy-login
  style="
    --sesamy-font-family: Georgia;
    --sesamy-login-button-background-color: #0e62a8;
    --sesamy-login-button-text-color: #ffffff;
    --sesamy-login-button-border-radius: 20px;
    --sesamy-login-popup-width: 400px;
  "
></sesamy-login>