Use solid-auth-fetcher

common/js/auth-buttons.js

@@ -1,7 +1,7 @@
 /* global location, alert, solid */
 /* Provide functionality for authentication buttons */
 
-(({ auth }) => {
+((SessionManager) => {
   // Wire up DOM elements
   const [
     loginButton,
@@ -22,38 +22,55 @@
   logoutButton.addEventListener('click', logout)
   registerButton.addEventListener('click', register)
 
-  // Track authentication status and update UI
-  auth.trackSession(session => {
-    const loggedIn = !!session
-    const isOwner = loggedIn && new URL(session.webId).origin === location.origin
+  function onSessionChange(sessionInfo) {
+    const loggedIn = sessionInfo.isLoggedIn
+    const isOwner = loggedIn && new URL(sessionInfo.webId).origin === location.origin
     loginButton.classList.toggle('hidden', loggedIn)
     logoutButton.classList.toggle('hidden', !loggedIn)
     registerButton.classList.toggle('hidden', loggedIn)
     accountSettings.classList.toggle('hidden', !isOwner)
     loggedInContainer.classList.toggle('hidden', !loggedIn)
-    if (session) {
-      profileLink.href = session.webId
-      profileLink.innerText = session.webId
+    if (sessionInfo) {
+      profileLink.href = sessionInfo.webId
+      profileLink.innerText = sessionInfo.webId
     }
-  })
+  }
+
+  const session = new SessionManager.Session(
+    {
+      clientAuthentication: solidClientAuthentication.getClientAuthenticationWithDependencies(
+        {}
+      ),
+    },
+    "mySession"
+  );
+
+  const authCode = new URL(window.location.href).searchParams.get("code")
+  if (authCode) {
+    // Being redirected after requesting a token
+    session
+      .handleIncomingRedirect(new URL(window.location.href))
+      .then((sessionInfo) => {
+        onSessionChange(sessionInfo)
+      });
+  } else {
+    onSessionChange(session.info)
+  }
 
   // Log the user in on the client and the server
   async function login () {
-    const session = await auth.popupLogin()
-    if (session) {
-      // Make authenticated request to the server to establish a session cookie
-      const { status } = await auth.fetch(location, { method: 'HEAD' })
-      if (status === 401) {
-        alert(`Invalid login.\n\nDid you set ${session.idp} as your OIDC provider in your profile ${session.webId}?`)
-        await auth.logout()
-      }
-      location.reload()
-    }
+    // TODO: This should be made to look nicer.
+    const thisUrl = new URL(window.location.href).origin
+    const issuer = prompt("Enter an issuer", thisUrl)
+    session.login({
+      redirectUrl: new URL(window.location.href),
+      oidcIssuer: new URL(issuer),
+    });
   }
 
   // Log the user out from the client and the server
   async function logout () {
-    await auth.logout()
+    await session.logout()
     location.reload()
   }
 
@@ -62,4 +79,4 @@
     const registration = new URL('/register', location)
     location.href = registration
   }
-})(solid)
+})(solidClientAuthentication)

default-templates/server/index.html

@@ -49,7 +49,7 @@ <h2>Server info</h2>
     </dl>
   </section>
 </div>
-<script src="/common/js/solid-auth-client.bundle.js"></script>
+<script src="/common/js/solid-client-authn.bundle.js"></script>
 <script src="/common/js/auth-buttons.js"></script>
 </body>
 </html>

default-views/auth/login-required.hbs

@@ -28,7 +28,7 @@
 
 </div>
 </div>
-<script src="/common/js/solid-auth-client.bundle.js"></script>
+<script src="/common/js/solid-client-authn.bundle.js"></script>
 <script src="/common/js/auth-buttons.js"></script>
 </body>
 </html>

default-views/auth/no-permission.hbs

@@ -23,7 +23,7 @@
   </div>
 </div>
 </div>
-<script src="/common/js/solid-auth-client.bundle.js"></script>
+<script src="/common/js/solid-client-authn.bundle.js"></script>
 <script src="/common/js/auth-buttons.js"></script>
 </body>
 </html>

lib/create-app.js

@@ -69,8 +69,7 @@ function createApp (argv = {}) {
   // Serve the public 'common' directory (for shared CSS files, etc)
   app.use('/common', express.static(path.join(__dirname, '../common')))
   app.use('/', express.static(path.dirname(require.resolve('mashlib/dist/databrowser.html')), { index: false }))
-  routeResolvedFile(app, '/common/js/', 'solid-auth-client/dist-lib/solid-auth-client.bundle.js')
-  routeResolvedFile(app, '/common/js/', 'solid-auth-client/dist-lib/solid-auth-client.bundle.js.map')
+  routeResolvedFile(app, '/common/js/', '@inrupt/solid-client-authn-browser/browserDist/solid-client-authn.bundle.js')
   app.use('/.well-known', express.static(path.join(__dirname, '../common/well-known')))
 
   // Serve bootstrap from it's node_module directory

lib/handlers/error-pages.js

@@ -3,6 +3,10 @@ const fs = require('fs')
 const util = require('../utils')
 const Auth = require('../api/authn')
 
+// Required for HACK below
+const Negotiator = require('negotiator')
+// End Required for hack
+
 /**
  * Serves as a last-stop error handler for all other middleware.
  *
@@ -11,7 +15,7 @@ const Auth = require('../api/authn')
  * @param res {ServerResponse}
  * @param next {Function}
  */
-function handler (err, req, res, next) {
+async function handler (err, req, res, next) {
   debug('Error page because of:', err)
 
   const locals = req.app.locals
@@ -29,7 +33,7 @@ function handler (err, req, res, next) {
   switch (statusCode) {
     case 401:
       setAuthenticateHeader(req, res, err)
-      renderLoginRequired(req, res, err)
+      renderDataBrowser(req, res, err, ldp)
       break
     case 403:
       renderNoPermission(req, res, err)
@@ -125,6 +129,28 @@ function sendErrorPage (statusCode, res, err, ldp) {
   })
 }
 
+function renderDataBrowser (req, res, err, ldp) {
+  const currentUrl = util.fullUrlForReq(req)
+  debug(`Display login-required for ${currentUrl}`)
+  // Render the databrowser if applicable
+  // HACK: this is basically a copy of the DB render in get.js. This could be
+  // better structured.
+  const negotiator = new Negotiator(req)
+  const requestedType = negotiator.mediaType()
+  res.statusMessage = err.message
+  res.status(401)
+  if (requestedType && requestedType.includes('text/html')) {
+    res.set('Content-Type', 'text/html')
+    const defaultDataBrowser = require.resolve('mashlib/dist/databrowser.html')
+    const dataBrowserPath = ldp.dataBrowserPath === 'default' ? defaultDataBrowser : ldp.dataBrowserPath
+    debug('   sending data browser file: ' + dataBrowserPath)
+    res.sendFile(dataBrowserPath)
+  } else {
+    renderLoginRequired(req, res, err)
+  }
+  // END HACK
+}
+
 /**
  * Renders a 401 response explaining that a login is required.
  *
@@ -134,8 +160,6 @@ function sendErrorPage (statusCode, res, err, ldp) {
 function renderLoginRequired (req, res, err) {
   const currentUrl = util.fullUrlForReq(req)
   debug(`Display login-required for ${currentUrl}`)
-  res.statusMessage = err.message
-  res.status(401)
   res.render('auth/login-required', { currentUrl })
 }