Authenticate

To access private data on Solid Pods, you must authenticate as a user/agent who has been granted appropriate access to that data. For example, to write to a resource, the user must have Write Access on the Resource.

To authenticate in a browser environment, you can use the solid-client-authn-browser library. Authentication in Solid is based on OIDC, which means that in order to be authenticated, the user must:

  1. Be redirected away from your app to an Identity Provider (e.g. their Google account),

  2. Log in the Identity Provider

  3. Be redirected back to your app.

Important

With solid-client-authn-browser, the login is only complete after the last step; i.e., your application must be reloaded between the start of the login and its completion.

Note

Use solid-client-authn-browser for client-side code only.

  1. First, create a new Session for the user.

  2. Then, use the Session.login() function to start the login process.

    Note

    This function call redirects the user away from your application to the identity provider.

  3. At this point, the user logs in their Identity Provider, independently from your application.

  4. To complete the login process, use Session.handleIncomingRedirect() to collect the information provided by the identity provider when it redirects the user back to your application.

  5. Once logged in, the Session object provides a fetch function that retrieves data using available login information.

    You can pass this function as an option to the solid-client functions (e.g., getSolidDataset, saveSolidDatasetAt) to include the user’s credentials with a request.

Example

The following example uses the solid-client-authn-browser library to login to a Solid server. It passes the fetch function as an option to the solid-client functions getSolidDataset and saveSolidDatasetAt to read and write data to a Pod where the logged-in user has the appropriate access.

import { Session } from '@inrupt/solid-client-authn-browser'
import { getSolidDataset, saveSolidDatasetAt } from "@inrupt/solid-client";

async function loginAndFetch() {
  // 1. Build a session
  const session = new Session();

  // 2. Check if the page is being loaded after a redirect from the Identity
  // Provider. If it is the case, the login process is complete. The following
  // collects information in the URL where the Identity Provider redirected
  // the user, and updates session.info accordingly.
  // Remember: a session **cannot** be logged in before calling this.
  await session.handleIncomingRedirect(window.location.href);

  // 3. Start the Login Process if not already logged in.
  if (!session.info.isLoggedIn) {
    // Redirect the user to their identity provider:
    // (This **moves the user away from the current page**.)
    await session.login({
      // Specify the URL of the user's OIDC issuer.
      oidcIssuer: 'https://inrupt.net',
      // Specify the URL the system should redirect to after login,
      // e.g. the current page for a single-page app.
      redirectUrl: window.location.href,
    });
  }

  // 4. Make authenticated requests by passing `session.fetch` to solid-client functions.
  // The user must have logged in as someone with the appropriate access to the specified URL.
  
  // For example, the user must be someone with Read access to the specified URL.
  const myDataset = await getSolidDataset(
    "https://docs-example.inrupt.net/profile/card", {
    fetch: session.fetch 
  });

  // ...
  
  // For example, the user must be someone with Write access to the specified URL.
  const savedSolidDataset = await saveSolidDatasetAt(
    "https://docs-example.inrupt.net/profile/card",
    myChangedDataset, {
    fetch: session.fetch 
  });
}

loginAndFetch();

For working examples, you can have a look at sample apps distributed with the code:

Using the Libraries Vocabulary