Fit into SAI

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@janeirodigital/interop-application": "^1.0.0-rc.23",
     "@ldo/ldo": "^0.0.1-alpha.17",
     "@ldo/solid-react": "^0.0.1-alpha.17",
     "@testing-library/jest-dom": "^5.17.0",
@@ -21,7 +22,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "PORT=3006 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

public/access-needs.ttl

@@ -0,0 +1,34 @@
+PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
+PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
+PREFIX interop: <http://www.w3.org/ns/solid/interop#>
+PREFIX acl: <http://www.w3.org/ns/auth/acl#>
+PREFIX foaf: <http://xmlns.com/foaf/0.1/>
+PREFIX shapetrees: <http://www.w3.org/ns/shapetrees#>
+
+<#this>
+  a interop:AccessNeedGroup ;
+  interop:accessNecessity interop:accessRequired ;
+  interop:accessScenario interop:PersonalAccess ;
+  interop:authenticatesAs interop:SocialAgent ;
+  interop:hasAccessDescriptionSet
+    <./descriptions-en.ttl> ;
+  interop:hasAccessNeed <#need-foaf-profile> .
+
+<#need-foaf-profile>
+  a interop:AccessNeed ;
+  interop:registeredShapeTree <#profileTree> ;
+  interop:accessNecessity interop:AccessRequired ;
+  interop:hasAccessDescriptionSet
+    <./descriptions-en.ttl> ;
+  interop:accessMode acl:Read, acl:Create, acl:Update, acl:Delete .
+
+<#profileTree>
+  a shapetrees:ShapeTree ;
+  shapetrees:expectsType shapetrees:Resource ;
+  shapetrees:shape <./foafProfile.shex> ;
+  interop:hasAccessDescriptionSet
+    <./descriptions-en.ttl> ;
+  shapetrees:describesInstance foaf:name .
+
+<./descriptions-en.ttl>
+  interop:usesLanguage "en"^^xsd:language .

public/descriptions-en.ttl

@@ -0,0 +1,27 @@
+PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
+PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
+PREFIX interop: <http://www.w3.org/ns/solid/interop#>
+PREFIX shapetrees: <http://www.w3.org/ns/shapetrees#>
+
+<>
+  a interop:AccessDescriptionSet ;
+  interop:usesLanguage "en"^^xsd:language ;
+  shapetrees:usesLanguage "en"^^xsd:language .
+
+<#en-access-need>
+  a interop:AccessNeedGroupDescription ;
+  interop:inAccessDescriptionSet <> ;
+  interop:hasAccessNeedGroup <./access-needs.ttl#this> ;
+  skos:prefLabel "Access to FOAF parts of your WebID Doc (need group)."@en .
+
+<#en-need-foaf-profile>
+  a interop:AccessNeedDescription ;
+  interop:inAccessDescriptionSet <> ;
+  interop:hasAccessNeed <./access-needs.ttl#need-foaf-profile> ;
+  skos:prefLabel "Access to FOAF parts of your WebID Doc (access need)."@en .
+
+<#en-profileTree>
+  a shapetrees:Description ;
+  shapetrees:inDescriptionSet <> ;
+  shapetrees:describes <./access-needs.ttl#profileTree> ;
+  skos:prefLabel "FOAF profile (shape tree)."@en .

public/foafProfile.shex

@@ -0,0 +1,15 @@
+PREFIX ex: <https://example.com/>
+PREFIX foaf: <http://xmlns.com/foaf/0.1/>
+PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
+PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
+
+ex:FoafProfile EXTRA a {
+  a [ foaf:Person ]
+    // rdfs:comment  "Defines the node as a Person (from foaf)" ;
+  foaf:name xsd:string ?
+    // rdfs:comment  "Define a person's name." ;
+  foaf:img xsd:string ?
+    // rdfs:comment  "Photo link but in string form" ;
+  foaf:knows @ex:FoafProfile *
+    // rdfs:comment  "A list of WebIds for all the people this user knows." ;
+}

public/id.json

@@ -0,0 +1,15 @@
+{
+    "@context": [
+      "https://www.w3.org/ns/solid/oidc-context.jsonld",
+      {
+        "interop": "http://www.w3.org/ns/solid/interop#"
+      }
+    ]  ,
+    "client_id": "http://localhost:3009/id.json",
+    "client_name": "LDO React Tutorial",
+    "logo_uri": "https://robohash.org/ldo-react-tutorial?set=set3",
+    "redirect_uris": ["http://localhost:3006/"],
+    "grant_types" : ["refresh_token","authorization_code"],
+    "interop:hasAccessNeedGroup": "http://localhost:3009/access-needs.ttl",
+    "interop:hasAuthorizationCallbackEndpoint": "http://localhost:3006"
+  }

public/id.ttl

@@ -0,0 +1,6 @@
+<http://localhost:3009/id.ttl> <http://www.w3.org/ns/solid/oidc#client_name> "LDO React Tutorial";
+<http://www.w3.org/ns/solid/oidc#logo_uri> <https://robohash.org/ldo-react-tutorial?set=set3>;
+<http://www.w3.org/ns/solid/oidc#redirect_uris> <http://localhost:3006/>;
+<http://www.w3.org/ns/solid/oidc#grant_types> "refresh_token", "authorization_code";
+<http://www.w3.org/ns/solid/interop#hasAccessNeedGroup> "http://localhost:3009/access-needs.ttl";
+<http://www.w3.org/ns/solid/interop#hasAuthorizationCallbackEndpoint> "http://localhost:3006".

server.js

@@ -0,0 +1,29 @@
+const http = require('http');
+const fs = require('fs');
+const idDoc = fs.readFileSync('./public/id.ttl', 'utf8');
+const accessNeeds = fs.readFileSync('./public/access-needs.ttl', 'utf8');
+const foafProfileShex = fs.readFileSync('./public/foafProfile.shex', 'utf8');
+const descriptionsEn = fs.readFileSync('./public/descriptions-en.ttl', 'utf8');
+
+http.createServer((req, res) => {
+  console.log(req.url);
+  console.log(req.headers);
+  if (req.url === '/id.ttl') {
+    res.writeHead(200, { 'Content-Type': 'text/turtle' });
+    res.write(idDoc);
+  } else if (req.url === "/access-needs.ttl") {
+    res.writeHead(200, { 'Content-Type': 'text/turtle' });
+    res.write(accessNeeds);
+  } else if (req.url === "/foafProfile.shex") {
+    res.writeHead(200, { 'Content-Type': 'text/shex' });
+    res.write(foafProfileShex);
+  } else if (req.url === "/descriptions-en.ttl") {
+    res.writeHead(200, { 'Content-Type': 'text/turtle' });
+    res.write(descriptionsEn);
+  } else {
+    res.writeHead(404, { 'Content-Type': 'text/html' });
+    res.write('Not found: ' + req.url);
+    console.log('Not found: ' + req.url);    
+  }
+  res.end();
+}).listen(3009);

src/Header.tsx

@@ -1,26 +1,41 @@
 import { FunctionComponent } from "react";
 import { useResource, useSolidAuth, useSubject } from "@ldo/solid-react";
 import { SolidProfileShapeShapeType } from "./.ldo/solidProfile.shapeTypes";
+const { Application } = require('@janeirodigital/interop-application');
+
+const CLIENT_ID = 'http://localhost:3009/id.ttl';
 
 export const Header: FunctionComponent = () => {
-  const { session, login, logout } = useSolidAuth();
+  const { session, login, logout, fetch } = useSolidAuth();
 
   const webIdResource = useResource(session.webId);
   const profile = useSubject(SolidProfileShapeShapeType, session.webId);
-
+  let saiSession: unknown;
   const loggedInName = webIdResource?.isReading()
     ? "LOADING..."
     : profile?.fn
     ? profile.fn
     : session.webId;
 
+    // let saiSession: unknown;
+    const saiAuth = async () => {
+      console.log('saiAuth');
+      // if (saiSession) return;
+      if (!session.webId) return;
+      const webId = session.webId as string;
+      const deps = { fetch, randomUUID: crypto.randomUUID.bind(crypto) };
+      saiSession = await Application.build(webId, CLIENT_ID, deps);
+      window.location.href = (saiSession as any).authorizationRedirectUri;
+    }
+
   return (
     <header>
       {session.isLoggedIn ? (
         // Is the session is logged in
         <p>
           You are logged as {loggedInName}.{" "}
           <button onClick={logout}>Log Out</button>
+          <button onClick={saiAuth}>SAI Auth</button>
         </p>
       ) : (
         // If the session is not logged in
@@ -31,10 +46,10 @@ export const Header: FunctionComponent = () => {
               // Get the Solid issuer the user should log into
               const issuer = prompt(
                 "Enter your Solid Issuer",
-                "https://solidweb.me"
+                "http://localhost:3000"
               );
               if (!issuer) return;
-              login(issuer);
+              login(issuer, { clientId: CLIENT_ID });
             }}
           >
             Log In