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 legacy browser library
that allows your apps to log in and read/write data using
a Node Solid Server.
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>When developing for webpack in a Node.js environment,
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}`)
})Note that this library is intended for the browser. You can use Node.js as a development environment, but not for actually logging in and out or making requests.
This library offers two main types of functionality:
fetchfunctionality to make authenticated HTTP requests to a Solid pod- login and logout functionality to authenticate the user
The fetch method mimics
the browser's fetch API:
it has the same signature and also returns a promise that resolves to the response to the request.
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.
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://solidcommunity.net');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://solidcommunity.net/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.
To log out, simply call the logout method:
solid.auth.logout()
.then(() => alert('Goodbye!'));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}!`);
});SolidAuthClient implements EventEmitter
and emits the following events:
login (session: Session)when a user logs inlogout ()when a user logs outsession (session: Session | null)when a user logs in or out
SolidAuthClient automatically registers your OIDC client application if it is
unknown to the authorization server, following
the registration request spec.
You can specify some fields of this registration request by passing them to the
loginSession parameter of solid.auth.login.
Supported fields are:
client_nameand internationalized variants (clientNameproperty)contacts(contactsproperty)logo_uri(logoUriproperty)
Example:
solid.auth.login(idp, {
clientName: 'My Example',
'clientName#ja-Jpan-JP': 'クライアント名',
logoUri: 'https://client.example.org/logo.png',
contacts: ['[email protected]', '[email protected]']
})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.
- Make sure you've got the
solid-auth-clientpackage installed globally.
$ npm install -g solid-auth-client # [--save | --save-dev]- Run the generation script to generate the popup's HTML file.
$ solid-auth-client generate-popup # ["My App Name"] [my-app-popup.html]-
Place the popup file on your server (say at
https://localhost:8080/popup.html). -
From within your own app, call
solid.auth.popupLogin({ popupUri: 'https://localhost:8080/popup.html' }).
Developing this library requires Node.js >= v10.0.
$ 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 modeYou can test how solid-auth-client operates within an app by running the demo app.
$ POPUP_URI='http://localhost:8606/popup-template.html' npm run start:demo$ APP_NAME='solid-auth-client demo' npm run start:popup
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent