NgxSolid

Install

Add the following libraries to index.html:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist-lib/solid-auth-client.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/window/solid-file-client.bundle.js"></script>

Add the following to polyfills.ts:

(window as any).global = window;

Install the library with npm i --save ngx-solid solid-auth-client tripledoc rdf-namespaces

Import it to your module:

import { NgxSolidModule } from 'ngx-solid';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  ...
  imports: [
    ...
    NgxSolidModule,
    HttpClientModule
  ],
  ...
})

Use

AuthGuard

Build an auth guard and use the SolidAuthClient like in this example:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { SolidAuthService } from 'dist/ngx-solid';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(
    public authenticationService: SolidAuthService,
    public router: Router
  ) { }

  async canActivate(): Promise<boolean> {
    const session = await this.authenticationService.getSession();

    // If no session, take the user to the login page
    if(!session){
      this.router.navigate(['login']);
    }

    return session ? true : false;
  }

}

The above example takes the user to a login page if not logged in.

Auth pipe

In order to for example display images from a persons POD, the correct authentication must be applied to the request. The SolidAuthPipe is designed for this purpose. Example:

<img [attr.src]="imageURL | solid | async">

Public/private type index

The library has methods to read the user's public and private type index and see where instances of a certain class are stored. If there is no specification for the particular document that the app creates/consumes, next step is to create a document and add it to the type index. For example:

constructor(
    private fc: SolidAuthService,
    private profileService: SolidFileClientService
){}

async getDoc(){
    // Get document with the persons public schema:TextDigitalDocument-instances
    const type = "http://schema.org/TextDigitalDocument";
    const doc = await this.profileService.getDocFromPublicTypeIndex(type);
    if(!doc){
        // Ask user to create the doc if none exists
        let location = prompt("Where do you wish to store TextDigitalDocument?", "/public/notes.ttl");
        if(location){
            // Create folder
            const folderRef = await this.fc.createSubFolderIfNotExist(location);
            // Add to type index
            await this.profileService.savePublicTypeIndexForClass(type, folderRef);
        }
    }
}