GithubHelp home page GithubHelp logo

ralphtheninja / solid-auth-client Goto Github PK

View Code? Open in Web Editor NEW

This project forked from nodesolidserver/solid-auth-client

0.0 2.0 0.0 3.7 MB

A library for reading and writing to Solid pods

Home Page: https://solid.github.io/solid-auth-client/

License: MIT License

Shell 1.32% JavaScript 96.43% CSS 1.89% HTML 0.35%

solid-auth-client's Introduction

A library for reading and writing to Solid pods

Build Status Coverage Status

The Solid project allows people to use apps on the Web while storing their data in their own data pod.

solid-auth-client is a library that allows your apps to securely log in to Solid data pods and read and write data from them.

Usage

In the browser, the library is accessible through solid.auth:

<script src="https://solid.github.io/solid-auth-client/dist/solid-auth-client.bundle.js"></script>
<script>
solid.auth.trackSession(session => {
  if (!session)
    console.log('The user is not logged in')
  else
    console.log(`The user is ${session.webId}`)
})
</script>

In Node.js, run npm install solid-auth-client and then do:

const auth = require('solid-auth-client')

auth.trackSession(session => {
  if (!session)
    console.log('The user is not logged in')
  else
    console.log(`The user is ${session.webId}`)
})

Functionality

This library offers two main types of functionality:

  • fetch functionality to make authenticated HTTP requests to a Solid pod
  • login and logout functionality to authenticate the user

Reading and writing data

The fetch method mimics the browser's fetch API. You can use it to access any kind of HTTP(S) document, regardless of whether that document is on a Solid pod:

solid.auth.fetch('https://timbl.com/timbl/Public/friends.ttl')
  .then(console.log);
const { fetch } = solid.auth;
fetch('https://timbl.com/timbl/Public/friends.ttl')
  .then(console.log);

If the document is on a Solid pod, and the user is logged in, they will be able to access private documents that require read or write permissions.

Logging in

Since Solid is decentralized, users can have an account on any server. Therefore, users need to pick their identity provider (IDP) in order to log in.

If your application asks them for the URL of their identity provider, then you can call the login method with the IDP as an argument:

async function login(idp) {
  const session = await solid.auth.currentSession();
  if (!session)
    await solid.auth.login(idp);
  else
    alert(`Logged in as ${session.webId}`);
}
login('https://solid.community');

Be aware that this will redirect the user away from your application to their identity provider. When they return, currentSession() will return their login information.

If you want solid-auth-client to ask the user for their identity provider, then you can use a popup window:

async function popupLogin() {
  let session = await solid.auth.currentSession();
  let popupUri = 'https://solid.community/common/popup.html';
  if (!session)
    session = await solid.auth.popupLogin({ popupUri });
  alert(`Logged in as ${session.webId}`);
}
popupLogin();

The popup has the additional benefit that users are not redirected away.

You can find a popup in dist-popup/popup.html.

Logging out

To log out, simply call the logout method:

solid.auth.logout()
  .then(() => alert('Goodbye!'));

Getting the current user

The current user is available through the currentSession method. This returns a session, with the webId field indicating the user's WebID.

async function greetUser() {
  const session = await solid.auth.currentSession();
  if (!session)
    alert('Hello stranger!');
  else
    alert(`Hello ${session.webId}!`);
}
greetUser();

If you want to track user login and logout, use the trackSession method instead. It will invoke the callback with the current session, and notify you of any changes to the login status.

solid.auth.trackSession(session => {
  if (!session)
    alert('Hello stranger!');
  else
    alert(`Hello ${session.webId}!`);
});

Events

SolidAuthClient implements EventEmitter and emits the following events:

  • login (session: Session) when a user logs in
  • logout () when a user logs out
  • session (session: Session | null) when a user logs in or out

Advanced usage

Generating a popup window

To log in with a popup window, you'll need a popup application running on a trusted domain which authenticates the user, handles redirects, and messages the authenticated session back to your application.

In order to tell the user they're logging into your app, you'll need to generate a static popup bound to your application's name.

  1. Make sure you've got the solid-auth-client package installed globally.
$ npm install -g solid-auth-client # [--save | --save-dev]
  1. Run the generation script to generate the popup's HTML file.
$ solid-auth-client generate-popup # ["My App Name"] [my-app-popup.html]
  1. Place the popup file on your server (say at https://localhost:8080/popup.html).

  2. From within your own app, call solid.auth.popupLogin({ popupUri: 'https://localhost:8080/popup.html' }).

Developing solid-auth-client

Developing this library requires Node.js >= v8.0.

Setting up the development environment

$ git clone https://github.com/solid/solid-auth-client.git
$ cd solid-auth-client
$ npm install
$ npm run test     # run the code formatter, linter, and test suite
$ npm run test:dev # just run the tests in watch mode

Demo app

You can test how solid-auth-client operates within an app by running the demo app.

Running the demo development server

$ POPUP_URI='http://localhost:8081/popup-template.html' npm run start:demo

Running the popup development server

$ APP_NAME='solid-auth-client demo' npm run start:popup

solid-auth-client's People

Contributors

dan-f avatar rubenverborgh avatar dmitrizagidulin avatar ralphtheninja avatar

Watchers

 avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.