Skip to content

README.md

Latest commit

 

History

History
104 lines (71 loc) · 3.8 KB

README.md

File metadata and controls

104 lines (71 loc) · 3.8 KB

solid-ui-login-button component

A Lit-based custom element that encapsulates the full Solid OIDC login flow. It renders a styled button that opens an identity provider (IDP) selection popup, handles the OIDC redirect, and emits a login-success event when the user is authenticated.

Used automatically by <solid-ui-header> when auth-state="logged-out" — see the Header README.

Installation

npm install solid-ui

Usage in a bundled project (webpack, Vite, Rollup, etc.)

import { LoginButton } from 'solid-ui/components/login-button'
<solid-ui-login-button label="Log in" issuer-url="https://solidcommunity.net"></solid-ui-login-button>

<script type="module">
  document.querySelector('solid-ui-login-button').addEventListener('login-success', ({ detail }) => {
    console.log('Logged in as', detail.webId)
  })
</script>

Usage in a plain HTML page (CDN / script tag)

<script src="node_modules/solid-ui/dist/components/loginButton/index.js"></script>

<solid-ui-login-button></solid-ui-login-button>

TypeScript

import { LoginButton } from 'solid-ui/components/login-button'

const btn = document.querySelector('solid-ui-login-button') as LoginButton
btn.label = 'Sign in to Solid'
btn.addEventListener('login-success', (e: CustomEvent) => {
  const { webId } = e.detail
})

API

Properties / attributes

Property Attribute Type Default Description
label label string Log in Button text. Overridable via the default slot.
issuerUrl issuer-url string '' Pre-fills the IDP URL input in the popup. If localStorage.loginIssuer is set it takes precedence.
theme theme 'light' | 'dark' 'light' Sets the colour theme. Use 'dark' when placing the button on a dark background.

Events

Event Detail Description
login-success { webId: string } Fired after a successful OIDC login. webId is the authenticated user's WebID URI.

Slots

Slot Description
(default) Replaces the button label text.

CSS custom properties

The component inherits Header CSS variables automatically when used inside <solid-ui-header>. When used standalone, these can be set on a parent or on :root:

Variable Fallback Description
--primary-royal-lavender #7C4DFF Button background colour
--login-button-text --header-button-text / #0f172a Button text colour (light theme)

Theming

Set theme="dark" for dark backgrounds. The button background (--primary-royal-lavender) stays the same; the text colour switches to white.

<solid-ui-login-button theme="dark"></solid-ui-login-button>

When used inside <solid-ui-header>, the theme attribute is forwarded automatically.

Popup behaviour

  • Opens an IDP URL text input pre-filled from localStorage.loginIssuer or the issuer-url attribute.
  • Lists suggested identity providers from solid-logic's getSuggestedIssuers().
  • Closes on Escape, clicking the ✕ button, or clicking the backdrop.
  • Saves the chosen issuer to localStorage.loginIssuer for future visits.
  • Uses offlineTestID() from solid-logic for offline test environments — the popup is bypassed and login-success fires immediately.

Build

npm run build

Webpack emits bundles to dist/components/loginButton/index.*.