[WIP] solid-client-authn integration

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

@@ -68,8 +68,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