Merge pull request #760 from SolidOS/uvdsl

replace Inrupt by Uvdsl OIDC client

Author: bourgeoa

jest.config.mjs

@@ -1,3 +1,14 @@
+import { existsSync } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const localSolidLogicSrc = path.resolve(__dirname, '../solid-logic/src')
+const solidLogicMapper = existsSync(localSolidLogicSrc)
+  ? localSolidLogicSrc
+  : '<rootDir>/node_modules/solid-logic/src'
+
 export default {
   // verbose: true, // Uncomment for detailed test output
   collectCoverage: true,
@@ -16,7 +27,9 @@ export default {
   setupFilesAfterEnv: ['./test/helpers/setup.ts'],
   moduleNameMapper: {
     '^~icons/(.*)$': '<rootDir>/__mocks__/iconsMock.js',
-    '^.+\\.css$': '<rootDir>/__mocks__/styleMock.js'
+    '^.+\\.css$': '<rootDir>/__mocks__/styleMock.js',
+    '^solid-logic$': solidLogicMapper,
+    '^@uvdsl/solid-oidc-client-browser$': '<rootDir>/test/mocks/solid-oidc-client-browser.ts'
   },
   testMatch: ['**/?(*.)+(spec|test).[tj]s?(x)'],
   roots: ['<rootDir>/src', '<rootDir>/test', '<rootDir>/__mocks__'],

src/design-system/lib/auth/SolidAuth.ts

@@ -1,25 +1,39 @@
 import { authSession, solidLogicSingleton } from 'solid-logic'
 import Account from '../../../primitives/lib/auth/Account'
-import { findImage } from '../../../widgets/buttons'
 import { AuthContext } from '../../../primitives/lib/auth/context'
 import { showDialog } from '../dialogs'
 import { html } from 'lit'
+import ns from '../../../ns'
 
 import '../../components/login-modal'
 
 export const DEFAULT_SIGNUP_URL = 'https://solidproject.org/get_a_pod'
 
+function findAccountImage (webId: string): string | undefined {
+  const store = solidLogicSingleton.store
+  const me = store.sym(webId)
+  const image =
+    store.any(me, ns.sioc('avatar')) ||
+    store.any(me, ns.foaf('img')) ||
+    store.any(me, ns.vcard('logo')) ||
+    store.any(me, ns.vcard('hasPhoto')) ||
+    store.any(me, ns.vcard('photo')) ||
+    store.any(me, ns.foaf('depiction'))
+
+  return image ? (image as any).value : undefined
+}
+
 export default class SolidAuth implements AuthContext {
   constructor (public signupUrl: string = DEFAULT_SIGNUP_URL) {}
 
   get account (): Account | null {
-    if (!authSession.info?.isLoggedIn || !authSession.info?.webId) {
+    const webId: string | undefined = authSession.webId ?? authSession.info?.webId
+    const isActive: boolean = authSession.isActive ?? authSession.info?.isLoggedIn ?? Boolean(webId)
+    if (!isActive || !webId) {
       return null
     }
 
-    const webId = authSession.info.webId
-    const me = solidLogicSingleton.store.sym(webId)
-    const avatarUrl = findImage(me) ?? undefined
+    const avatarUrl = findAccountImage(webId)
 
     return new Account(webId, avatarUrl)
   }
@@ -44,10 +58,7 @@ export default class SolidAuth implements AuthContext {
 
     locationUrl.hash = ''
 
-    await authSession.login({
-      redirectUrl: locationUrl.href,
-      oidcIssuer: loginUrl
-    })
+    await authSession.login(loginUrl, locationUrl.href)
   }
 
   async signup () {
@@ -59,14 +70,26 @@ export default class SolidAuth implements AuthContext {
   }
 
   onSessionUpdated (callback: () => unknown) {
-    authSession.events.on('login', callback)
-    authSession.events.on('logout', callback)
-    authSession.events.on('sessionRestore', callback)
+    const sessionEventTarget = authSession as unknown as EventTarget
+    const listener = () => {
+      callback()
+    }
+    if (typeof sessionEventTarget.addEventListener === 'function') {
+      sessionEventTarget.addEventListener('sessionStateChange', listener)
+    } else {
+      authSession.events.on('login', callback)
+      authSession.events.on('logout', callback)
+      authSession.events.on('sessionRestore', callback)
+    }
 
     return () => {
-      authSession.events.off('login', callback)
-      authSession.events.off('logout', callback)
-      authSession.events.off('sessionRestore', callback)
+      if (typeof sessionEventTarget.removeEventListener === 'function') {
+        sessionEventTarget.removeEventListener('sessionStateChange', listener)
+      } else {
+        authSession.events.off('login', callback)
+        authSession.events.off('logout', callback)
+        authSession.events.off('sessionRestore', callback)
+      }
     }
   }
 }

src/login/login.ts

@@ -162,6 +162,8 @@ export async function ensureLoadedPreferences (
     } else {
       throw new Error(`(via loadPrefs) ${err}`)
     }
+
+    context.preferencesFileError = m2
   }
   return context
 }
@@ -513,10 +515,7 @@ export function renderSignInPopup (dom: HTMLDocument) {
       // Login
       const locationUrl = new URL(window.location.href)
       locationUrl.hash = '' // remove hash part
-      await authSession.login({
-        redirectUrl: locationUrl.href,
-        oidcIssuer: issuerUri
-      })
+      await authSession.login(issuerUri, locationUrl.href)
     } catch (err) {
       alert(err.message)
     }
@@ -669,9 +668,9 @@ export function loginStatusBox (
   }
 
   box.refresh = function () {
-    const sessionInfo = authSession.info
-    if (sessionInfo && sessionInfo.webId && sessionInfo.isLoggedIn) {
-      me = solidLogicSingleton.store.sym(sessionInfo.webId)
+    const webId = authSession.webId
+    if (webId) {
+      me = solidLogicSingleton.store.sym(webId)
     } else {
       me = null
     }
@@ -716,6 +715,12 @@ authSession.events.on('logout', async () => {
           await fetch(openidConfiguration.end_session_endpoint, { credentials: 'include' })
         }
       }
+
+      try {
+        await fetch('/.well-known/solid/logout', { credentials: 'include' })
+      } catch (_err) {
+        // Not all deployments expose NSS-compatible well-known logout endpoint.
+      }
     } catch (_err) {
       // Do nothing
     }
@@ -1047,22 +1052,10 @@ export function newAppInstance (
  * and/or a developer
  */
 export async function getUserRoles (): Promise<Array<NamedNode>> {
-  const sessionInfo = authSession.info
-  if (!sessionInfo?.isLoggedIn || !sessionInfo?.webId) {
-    return []
-  }
-
-  const currentUser = authn.currentUser()
-  if (!currentUser) {
-    return []
-  }
-
   try {
-    const { me, preferencesFile, preferencesFileError } = await ensureLoadedPreferences({
-      me: currentUser
-    })
+    const { me, preferencesFile, preferencesFileError } = await ensureLoadedPreferences({})
     if (!preferencesFile || preferencesFileError) {
-      throw new Error(preferencesFileError || 'Unable to load user preferences file.')
+      throw new Error(preferencesFileError)
     }
     return solidLogicSingleton.store.each(
       me,

src/v2/components/auth/loginButton/LoginButton.ts

@@ -419,10 +419,7 @@ export class LoginButton extends LitElement {
 
       const locationUrl = new URL(window.location.href)
       locationUrl.hash = ''
-      await authSession.login({
-        redirectUrl: locationUrl.href,
-        oidcIssuer: issuerUri
-      })
+      await authSession.login(issuerUri, locationUrl.href)
     } catch (err: any) {
       this._errorMsg = err.message || String(err)
       this.requestUpdate()

src/v2/components/layout/footer/Footer.ts

@@ -107,9 +107,6 @@ export class Footer extends LitElement {
     if (typeof authSession.events.off === 'function') {
       authSession.events.off('login', this._updateFooter)
       authSession.events.off('logout', this._updateFooter)
-    } else if (typeof authSession.events.removeListener === 'function') {
-      authSession.events.removeListener('login', this._updateFooter)
-      authSession.events.removeListener('logout', this._updateFooter)
     }
     super.disconnectedCallback()
   }

src/v2/components/layout/header/Header.ts

@@ -1,6 +1,6 @@
 import { LitElement, html, css } from 'lit'
 import { icons } from '../../../../iconBase'
-import { authSession } from 'solid-logic'
+import { authSession, authn, performServerSideLogout } from 'solid-logic'
 import '../../auth/loginButton/index'
 import '../../auth/signupButton/index'
 import { ifDefined } from 'lit/directives/if-defined.js'
@@ -14,6 +14,36 @@ const DEFAULT_SOLID_ICON_URL = 'https://solidproject.org/assets/img/solid-emblem
 const DEFAULT_SIGNUP_URL = 'https://solidproject.org/get_a_pod'
 const DEFAULT_LOGGEDIN_MENU_BUTTON_AVATAR = icons.iconBase + 'emptyProfileAvatar.png'
 
+async function clearPersistedAuthState (): Promise<void> {
+  if (typeof window === 'undefined') {
+    return
+  }
+
+  const explicitKeys = ['loginIssuer', 'preLoginRedirectHash']
+  for (const key of explicitKeys) {
+    window.localStorage.removeItem(key)
+    window.sessionStorage.removeItem(key)
+  }
+
+  if (typeof indexedDB === 'undefined') {
+    return
+  }
+
+  const databases = ['soidc', 'solid-client-authn-store', 'solid-client-authn']
+  for (const dbName of databases) {
+    await new Promise<void>((resolve) => {
+      try {
+        const request = indexedDB.deleteDatabase(dbName)
+        request.onsuccess = () => resolve()
+        request.onerror = () => resolve()
+        request.onblocked = () => resolve()
+      } catch (_err) {
+        resolve()
+      }
+    })
+  }
+}
+
 export type HeaderAuthState = 'logged-out' | 'logged-in'
 
 export type HeaderMenuItem = {
@@ -51,7 +81,8 @@ export class Header extends LitElement {
     accountMenuOpen: { state: true },
     helpMenuOpen: { state: true },
     hasSlottedAccountMenu: { state: true },
-    hasSlottedHelpMenu: { state: true }
+    hasSlottedHelpMenu: { state: true },
+    authResolved: { state: true }
   }
 
   static styles = css`
@@ -514,6 +545,14 @@ export class Header extends LitElement {
   declare helpMenuOpen: boolean
   declare hasSlottedAccountMenu: boolean
   declare hasSlottedHelpMenu: boolean
+  declare authResolved: boolean
+  private _refreshPromise: Promise<void> | null = null
+
+  private readonly handleAuthSessionChange = () => {
+    this.refreshAuthStateFromSession().catch(() => {
+      // Keep auth event handling resilient on transient refresh failures.
+    })
+  }
 
   constructor () {
     super()
@@ -538,20 +577,59 @@ export class Header extends LitElement {
     this.helpMenuOpen = false
     this.hasSlottedAccountMenu = false
     this.hasSlottedHelpMenu = false
+    this.authResolved = false
   }
 
   connectedCallback () {
     super.connectedCallback()
     document.addEventListener('click', this.handleDocumentClick)
     window.addEventListener('keydown', this.handleWindowKeydown)
+    if (typeof authSession.events?.on === 'function') {
+      authSession.events.on('login', this.handleAuthSessionChange)
+      authSession.events.on('logout', this.handleAuthSessionChange)
+      authSession.events.on('sessionRestore', this.handleAuthSessionChange)
+    }
+    this.refreshAuthStateFromSession().catch(() => {
+      // Keep initial header render resilient on transient refresh failures.
+    })
   }
 
   disconnectedCallback () {
     document.removeEventListener('click', this.handleDocumentClick)
     window.removeEventListener('keydown', this.handleWindowKeydown)
+    if (typeof authSession.events?.off === 'function') {
+      authSession.events.off('login', this.handleAuthSessionChange)
+      authSession.events.off('logout', this.handleAuthSessionChange)
+      authSession.events.off('sessionRestore', this.handleAuthSessionChange)
+    }
     super.disconnectedCallback()
   }
 
+  private async refreshAuthStateFromSession () {
+    if (!this._refreshPromise) {
+      this._refreshPromise = (async () => {
+        try {
+          await authn.checkUser()
+          // Some auth stacks resolve session state asynchronously after first check.
+          if (!authn.currentUser()) {
+            await authn.checkUser()
+          }
+        } catch (_err) {
+          // Keep rendering even if session refresh cannot complete.
+        }
+      })()
+    }
+
+    try {
+      await this._refreshPromise
+    } finally {
+      this._refreshPromise = null
+    }
+
+    this.authState = authn.currentUser() ? 'logged-in' : 'logged-out'
+    this.authResolved = true
+  }
+
   private handleHelpMenuClick (item: HeaderMenuItem, event: MouseEvent) {
     event.preventDefault()
     this.helpMenuOpen = false
@@ -669,8 +747,8 @@ export class Header extends LitElement {
     `
   }
 
-  private handleLoginSuccess () {
-    this.authState = 'logged-in'
+  private async handleLoginSuccess () {
+    await this.refreshAuthStateFromSession()
     this.dispatchEvent(new CustomEvent('auth-action-select', {
       detail: { role: 'login' },
       bubbles: true,
@@ -680,12 +758,25 @@ export class Header extends LitElement {
 
   private async handleLogout () {
     this.accountMenuOpen = false
+    const issuer = window.localStorage.getItem('loginIssuer') || ''
+
     try {
       await authSession.logout()
     } catch (_err) {
       // logout errors are non-fatal — proceed to clear state
     }
-    this.authState = 'logged-out'
+
+    await clearPersistedAuthState()
+
+    const redirectedToServerLogout = await performServerSideLogout({
+      issuer,
+      postLogoutRedirectPath: '/'
+    })
+    if (redirectedToServerLogout) {
+      return
+    }
+
+    await this.refreshAuthStateFromSession()
     this.dispatchEvent(new CustomEvent('logout-select', {
       detail: { role: 'logout' },
       bubbles: true,
@@ -802,6 +893,10 @@ export class Header extends LitElement {
       `
     }
 
+    if (!this.authResolved) {
+      return html`<div class="auth-actions" part="auth-actions"></div>`
+    }
+
     if (this.authState === 'logged-out') {
       return this.renderLoggedOutActions()
     }