Skip to content

Home

Jump to bottom
Christoph Braun edited this page Oct 29, 2025 · 5 revisions

Welcome to @uvdsl/solid-oidc-client-browser

A library for implementing Solid OpenID Connect (Solid-OIDC) authentication in browser applications. This library handles the complete authentication lifecycle with automatic token refresh, DPoP-bound tokens, and support for both Single-Page Applications (SPAs) and Multi-Page Applications (MPAs).

What is this library?

@uvdsl/solid-oidc-client-browser provides a simple yet powerful Session class that manages:

  • ✅ User authentication via Solid Identity Providers
  • ✅ Automatic token refresh using Web Workers (even in inactive tabs!)
  • ✅ DPoP-bound access tokens for enhanced security
  • ✅ Session restoration across page reloads
  • ✅ Authenticated HTTP requests with authFetch

Quick Start

npm install @uvdsl/solid-oidc-client-browser
import { Session } from '@uvdsl/solid-oidc-client-browser';

// Create a session
const session = new Session({
  client_id: 'https://app.example/profile#app'
});

// Try to restore a previous session
// either by handling redirect after login
await session.handleRedirectFromLogin();
// or by trying to restore the session
await session.restore();

if (session.isActive) {
  console.log(`Welcome back, ${session.webId}!`);
} else {
  // Redirect to login
  await session.login('https://solidcommunity.net/', window.location.href);
}

// Make authenticated requests
const response = await session.authFetch('https://pod.example/private-resource');

Documentation

📚 API Reference

Complete documentation of the Session class, including all methods, properties, and interfaces. Learn about:

  • Constructor options and client details
  • Authentication methods (login, logout, restore)
  • Making authenticated requests with authFetch
  • Token refresh and session management
  • Advanced usage patterns

💡 Usage Examples

Examples showing how to integrate the library in different scenarios:

  • Simple HTML pages with vanilla JavaScript
  • Multi-Page Applications (MPAs)
  • Single-Page Applications (SPAs) with frameworks like Vue

🛠️ Development Hints

Common setup issues and their solutions, including:

  • Web Worker URL Not Found: How to configure your build tool (Vite, Webpack, Stencil) to properly load the refresh worker during development

Key Features

Two Library Versions

  • web (default): Full-featured version with automatic token refresh via Web Worker. Perfect for SPAs and MPAs.
  • core: Lightweight version without automatic refresh. Ideal for browser extensions and custom implementations.

Framework Support

Works seamlessly with all major frameworks:

  • React, Vue, Svelte, Angular
  • Vanilla JavaScript
  • Any modern build tool (Vite, Webpack, Rollup, Parcel)

Security

  • Implements DPoP (Demonstrating Proof-of-Possession) for token binding
  • Secure token storage
  • Automatic token refresh
  • PKCE flow for public clients

Getting Help

  • Issues: Found a bug or have a feature request? Open an issue
  • Discussions: Questions or want to share how you're using the library? Start a discussion
  • API Docs: Detailed API documentation is available in the API Reference

Project Links

Related Libraries

  • @uvdsl/solid-requests: Higher-level utilities for working with Solid resources (GET, POST, PUT, DELETE with proper LDP headers)

Ready to get started? Check out the Usage Examples to see the library in action, or dive into the API Reference for complete documentation.

Clone this wiki locally