https://github.com/solidlabresearch/lit-solid-login
https://github.com/solidlabresearch/lit-solid-login
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/solidlabresearch/lit-solid-login
- Owner: SolidLabResearch
- Created: 2023-08-28T17:50:37.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-29T09:50:14.000Z (over 2 years ago)
- Last Synced: 2025-01-17T07:09:34.196Z (about 1 year ago)
- Language: JavaScript
- Size: 502 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Solid Login Web Component
This is a [Web Component](https://github.com/SolidLabResearch/lit-solid-login) that enables users to log in with Solid-OIDC.
We used [Lit](https://lit.dev/) to build the component.
The component is framework-agnostic.
You can use it with vanilla JavaScript, but also frameworks such as React and Vue.
End-users have the option to use either their WebID or Identity Provider to log in.
This component follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
You find a screencast [here](https://cloud.ilabt.imec.be/index.php/s/gWfBDSp5WZKaySc).
## Installation
This doesn't work (yet).
```shell
npm i solid-login
```
But the following does.
```shell
npm i https://github.com/SolidLabResearch/lit-solid-login
```
## Usage
```html
import 'solid-login/solid-login.js';
```
The screenshot belows shows the result in a Web app.
Best to have a look at the code in the folder `demo` to see how we do it now.
## Options
All of these options are optional.
- `selectedOption` (String): If the default login is via WebID or IDP. Values: "webid" or "idp". Default is "webid".
- `loginCallback` (Function): The component calls this function when the login button is pressed.
This disables the default Solid-OIDC login process.
- `loggedInCallback` (Function): The component calls this function when the user is logged in.
- `loggedOutCallback` (Function): The component calls this function when the user is logged out.
- `handleIncomingRedirectOptions` (Object): This object overwrites the default options for `handleIncomingRedirect`.
- `loginOptions` (Object): This object overwrites the default options for `login`.
- `showWelcomeMessage` (Boolean): If this is true, then a message is shown when logged in. Default is true.
## Local Demo
1. Install the dependencies via
```shell
npm i
```
2. Start the demo via
```shell
npm start
```
Keep the demo running.
3. In another terminal prepare the Solid pods via
```shell
npm run prepare:pods
```
4. Start the Solid server with the pods via
```shell
npm run start:pods
```
The server is ready when the following message appears in the terminal
```text
Listening to server at http://localhost:3000/
```
Keep this process running.
5. Open a browser at .
## Tests
1. Install the dependencies via
```shell
npm i
```
2. Start the demo via
```shell
npm start
```
Keep the demo running.
3. In another terminal prepare the Solid pods via
```shell
npm run prepare:pods
```
4. Start the Solid server with the pods via
```shell
npm run start:pods
```
The server is ready when the following message appears in the terminal
```text
Listening to server at http://localhost:3000/
```
Keep this process running.
5. In another terminal run the tests via
```shell
npm test
```