Merge pull request #27 from solid-contrib/18-adding-auth

Fixing build

.github/workflows/nextjs.yml

@@ -7,7 +7,7 @@ name: Deploy Next.js site to Pages
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: ["main"]
+    branches: ['main']
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -21,7 +21,7 @@ permissions:
 # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
 # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
 concurrency:
-  group: "pages"
+  group: 'pages'
   cancel-in-progress: false
 
 jobs:
@@ -51,7 +51,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: '18'
           cache: ${{ steps.detect-package-manager.outputs.manager }}
       - name: Setup Pages
         uses: actions/configure-pages@v3

app/add-resource/page.tsx

@@ -1,3 +1,76 @@
-export default async function Page() {
-  return <p className="ml-10">Form coming soon...</p>
+'use client';
+
+import { useEffect, useState } from 'react';
+import {
+  getDefaultSession,
+  handleIncomingRedirect,
+  login,
+} from '@inrupt/solid-client-authn-browser';
+import Link from 'next/link';
+
+export default function Page() {
+  const [loggedIn, setLoggedIn] = useState(false);
+  const [webID, setWebID] = useState('');
+  const session = getDefaultSession();
+  // TODO: persist session upon refresh (by default, refreshing the page logs out the user)
+  // see https://docs.inrupt.com/developer-tools/javascript/client-libraries/tutorial/restore-session-browser-refresh/
+  if (typeof window !== 'undefined') {
+    handleIncomingRedirect({ restorePreviousSession: true }).then((info) => {
+      console.log('info.isloggedin', info?.isLoggedIn);
+      setWebID(info?.webId || '');
+      if (info?.isLoggedIn) {
+        setLoggedIn(true);
+      }
+    });
+  }
+
+  function startLogin() {
+    if (!getDefaultSession().info.isLoggedIn) {
+      login({
+        oidcIssuer: 'https://onboarding.solidcommunity.net',
+        redirectUrl: 'http://localhost:3000/add-resource',
+        clientName: 'Solid Onboarding',
+      });
+    }
+  }
+
+  return (
+    <>
+      <p className="ml-10 text-lg font-semibold">
+        In order to add a new resource, you need to have a Solid WebID, and be
+        logged in.
+      </p>
+      <p className="ml-10 text-lg font-semibold">
+        To get a WebID, you should register for a Solid Pod. You can{' '}
+        <Link
+          href="https://solidproject.org/users/get-a-pod"
+          className="border-b-2 border-b-primary-800  hover:text-white hover:bg-primary-700 hover:p-1"
+        >
+          find a Pod Provider here
+        </Link>{' '}
+        or you could use{' '}
+        <Link
+          href="https://solidcommunity.net/"
+          className="border-b-2 border-b-primary-800  hover:text-white hover:bg-primary-700 hover:p-1"
+        >
+          SolidCommunity.net
+        </Link>
+        .
+      </p>
+      {!loggedIn && (
+        <button
+          onClick={() => startLogin()}
+          className="mt-10 ml-10 p-2 w-max block border-4 border-primary-600 rounded text-primary-800 bg-primary-300 hover:text-white hover:bg-primary-700"
+        >
+          Login with Solid Identity Provider
+        </button>
+      )}
+      {loggedIn && (
+        <div className="mt-10 ml-10">
+          <p>You are logged in with WebID: {webID}</p>
+          <p>Form coming soon...please check back.</p>
+        </div>
+      )}
+    </>
+  );
 }

app/components/sections.tsx

@@ -1,32 +1,32 @@
-import React, { cache } from 'react'
-import Link from 'next/link'
-import { fetch } from '@inrupt/solid-client-authn-browser'
-import { getSolidDataset, getThingAll } from '@inrupt/solid-client'
+import React, { cache } from 'react';
+import Link from 'next/link';
+import { fetch } from '@inrupt/solid-client-authn-browser';
+import { getSolidDataset, getThingAll } from '@inrupt/solid-client';
 
 export default async function Sections() {
-  const linksList = await getData()
+  const linksList = await getData();
 
-  let referenceList = []
-  let explanationList = []
-  let tutorialList = []
-  let howToList = []
+  let referenceList = [];
+  let explanationList = [];
+  let tutorialList = [];
+  let howToList = [];
 
   for (let i = 0; i < linksList.length; i++) {
     switch (linksList[i].category) {
       case 'Reference':
-        referenceList.push(linksList[i])
-        break
+        referenceList.push(linksList[i]);
+        break;
       case 'Explanation':
-        explanationList.push(linksList[i])
-        break
+        explanationList.push(linksList[i]);
+        break;
       case 'Tutorial':
-        tutorialList.push(linksList[i])
-        break
+        tutorialList.push(linksList[i]);
+        break;
       case 'How-to':
-        howToList.push(linksList[i])
-        break
+        howToList.push(linksList[i]);
+        break;
       default:
-        console.log(`No category found`)
+        console.log(`No category found`);
     }
   }
 
@@ -133,11 +133,11 @@ export default async function Sections() {
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 // revalidate the data at most every hour
-export const revalidate = 3600
+export const revalidate = 3600;
 
 const getData = cache(async () => {
   // getStaticProps is now deprecated, since all Nextjs 13 components are now server components by default,
@@ -147,27 +147,32 @@ const getData = cache(async () => {
   const myDataset = await getSolidDataset(
     'https://onboarding.solidcommunity.net/public/Links',
     { fetch }
-  )
+  );
   // The return value is *not* serialized
   // You can return Date, Map, Set, etc.
-  const links = getThingAll(myDataset)
+  const links = getThingAll(myDataset);
 
   // Build List of links, URL's, categories, about
-  const linksList: any = []
+  const linksList: any = [];
   for (let i = 0; i < links.length; i++) {
     let newLink: { name: string; url: string; category: string } = {
       name: '',
       url: '',
       category: '',
-    }
-    newLink.name = (links as any)[i].predicates['http://schema.org/name']
-      ?.literals['http://www.w3.org/2001/XMLSchema#string'][0]
+    };
+    newLink.name = (links as any)[i].predicates[
+      'http://schema.org/name'
+    ]?.literals['http://www.w3.org/2001/XMLSchema#string'][0];
     newLink.url = (links as any)[i].predicates['http://schema.org/URL']
-      ?.namedNodes[0]
+      ?.namedNodes
+      ? (links as any)[i].predicates['http://schema.org/URL']?.namedNodes[0]
+      : (links as any)[i].predicates['http://schema.org/URL']?.literals[
+          'http://www.w3.org/2001/XMLSchema#string'
+        ][0];
     newLink.category = (links as any)[i].predicates[
       'http://schema.org/category'
-    ]?.literals['http://www.w3.org/2001/XMLSchema#string'][0]
-    linksList.push(newLink)
+    ]?.literals['http://www.w3.org/2001/XMLSchema#string'][0];
+    linksList.push(newLink);
   }
-  return linksList
-})
+  return linksList;
+});

next.config.js

@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = { output: 'export' }
+const nextConfig = { output: 'export' };
 
-module.exports = nextConfig
+module.exports = nextConfig;