sol-login component

Create a dynamic login/logout button that calls `@inrupt/solid-client-authn-browser` to login and provie authenticated fetch. Once logged in, the authenticated fetch is automatically available to all sol-* components. Events provide hooks for other components and scripts to manually manage login/logout.

Prerequisites

To use Solid login and authenticated fetch, apps must import the Inrupt authentication library. The simplest setup is to import the prebuilt UMD for the Inrupt library that ships in dist/vendor/:

<script src="../dist/vendor/@inrupt-solid-client-authn-browser.umd.js"></script>

Usage

Basic Usage

When presented with no attributes, the tag prompts the user for an issuer, then logs in.

<sol-login></sol-login>

Pre-configured Issuers

The issuers attribute provides quick-select buttons in the login dropdown.

<sol-login issuers="https://solidcommunity.net, https://login.inrupt.com"></sol-login>

Event Handling

Listen for sol-login/sol-logout events to trigger app-specific actions.

<sol-login id="auth"></sol-login>
<script>
  document.getElementById('auth').addEventListener('sol-login', (e) => {
    console.log('Logged in as', e.detail.webId);
    console.log('Issuer:', e.detail.issuer);
  });
  document.getElementById('auth').addEventListener('sol-logout', () => {
    console.log('Logged out');
  });
</script>