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

• buttonText - Text to display on the login button
• loading - Boolean to show loading state
• loggedIn - Boolean indicating if user is logged in
• userAvatar - URL to the user's avatar image
• lang - Language setting for the component
• variant - Appearance variant ('text', 'picture', or 'link')
• class - CSS classes to apply to the component

Events

• login - Dispatched when login action is triggered

Basic Usage

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

<!-- Customized login button -->
<sesamy-login button-text="Sign In Now"></sesamy-login>

Slots

The sesamy-login component provides several slots for customizing its appearance and behavior:

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>

TIP

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

Design Tokens

<sesamy-login
  style="
    --sesamy-font-family: Georgia; /* Sets font family, default Helvetica */
    --sesamy-login-button-background-color: blue; /* Sets background color of the login button, default transparent */
    --sesamy-login-button-text-color: green; /* Sets text color of the login button, default black */
    --sesamy-login-button-border-color: pink; /* Sets border color of the login button, default black */
    --sesamy-login-button-border-width: 5px; /* Sets border width of the login button, default 1px */
    --sesamy-login-button-border-radius: 20px; /* Sets border radius of the login button, default */
    --sesamy-login-button-font-weight: 100; /* Sets font weight of the login button, default 700 */
    --sesamy-login-popup-width: 400px; /* Sets width of the login popup, default 18rem */
    --sesamy-login-popup-bgcolor: green; /* Sets background color of the login popup, default white */
    --sesamy-login-popup-textcolor: pink; /* Sets text color of the login popup, default black */
    --sesamy-login-popup-border-color: red; /* Sets border color of the login popup, default #e5e7eb */
    --sesamy-login-popup-border-width: 5px; /* Sets border width of the login popup, default 1px */
    --sesamy-login-popup-border-radius: 20px; /* Sets border radius of the login popup, default 0.125rem */
    --sesamy-login-popup-zindex: 100; /* Sets z-index of the login popup, default 10 */
  "
></sesamy-login>