solid-login
v0.0.4
Published
Drop-in Solid login widget for browsers
Maintainers
melvincarvalhoReadme
solid-login
Drop-in Solid login widget for browsers. One script tag gives you a login button (bottom-right corner) with a modal dialog for choosing a Solid identity provider.
Uses solid-oidc under the hood for full Solid-OIDC authentication (PKCE + DPoP).
Quick Start
CDN (recommended)
Add a single script tag to any HTML page:
<script src="https://unpkg.com/solid-login"></script>That's it. A purple Login button appears at the bottom-right of your page.
CDN with default provider
Pre-select an identity provider so users can log in faster:
<script src="https://unpkg.com/solid-login" data-idp="https://solidcommunity.net"></script>npm
npm install solid-loginThen include it in your HTML:
<script src="node_modules/solid-login/solid-login.js"></script>How It Works
- User clicks the Login button
- A modal appears with quick-select providers (solidcommunity.net, solidweb.me, solidweb.org, solid.social) or a custom IDP input
- User is redirected to their Solid identity provider for authentication
- After login, the button shows their WebID and
window.solid.sessionis available for authenticated requests - Click the button again to logout
API
After login, the following globals are available:
// The user's WebID
window.solid.webId
// → "https://alice.solidcommunity.net/profile/card#me"
// The active session (solid-oidc Session instance)
window.solid.session
// Make authenticated requests to Solid pods
const response = await window.solid.session.authFetch('https://alice.solidcommunity.net/private/data.ttl')
// Programmatic login
window.solid.login('https://solidcommunity.net')
// Programmatic logout
window.solid.logout()Events
The widget dispatches CustomEvents on document:
// Fired after successful login
document.addEventListener('solid-login', (e) => {
console.log('Logged in as:', e.detail.webId)
})
// Fired after logout
document.addEventListener('solid-logout', (e) => {
console.log('Logged out')
})Full Example
<!DOCTYPE html>
<html>
<head>
<title>My Solid App</title>
</head>
<body>
<h1>My Solid App</h1>
<button id="fetch-btn">Fetch Profile</button>
<pre id="output"></pre>
<script>
document.addEventListener('solid-login', async (e) => {
document.getElementById('output').textContent = 'Logged in as: ' + e.detail.webId
})
document.getElementById('fetch-btn').onclick = async () => {
if (!window.solid?.session?.isActive) {
alert('Please log in first')
return
}
const res = await window.solid.session.authFetch(window.solid.webId)
document.getElementById('output').textContent = await res.text()
}
</script>
<script src="https://unpkg.com/solid-login"></script>
</body>
</html>Configuration
| Attribute | Description | Example |
| ------------ | ---------------------------------- | ------------------------------------ |
| data-idp | Default identity provider URL | data-idp="https://solidcommunity.net" |
Built-in Providers
The modal includes quick-select buttons for:
Users can also enter any custom Solid identity provider URL.
Features
- Zero build — single script, no bundler required
- Zero dependencies — solid-oidc is loaded dynamically from CDN
- Shadow DOM — styles are fully encapsulated, won't conflict with your app
- Session persistence — sessions survive page reloads via IndexedDB
- Auto redirect handling — automatically completes the OIDC flow on callback
- DPoP bound tokens — secure proof-of-possession authentication
- PKCE — protection against authorization code interception
License
AGPL-3.0-or-later — Copyright (C) 2024-2026 Melvin Carvalho