feat: detailed status during web app bootstrap; handle token errors (#…

…1450)

client/src/js/init.js

@@ -1,7 +1,13 @@
 import { stylesheets, scripts, isMinimizedSource } from './resources.js'
 import * as OP from './modules/oidcProvider.js'
+
+const statusEl = document.getElementById("loading-text")
 window.oidcProvider = OP
 
+function appendStatus(html) {
+  statusEl.innerHTML += `${statusEl.innerHTML ? '<br/><br/>' : ''}${html}`
+}
+
 function getScopeStr() {
   const scopePrefix = STIGMAN.Env.oauth.scopePrefix
   let scopes = [
@@ -56,19 +62,23 @@ async function authorizeOidc() {
       scope: getScopeStr()
     })
     if (tokens) {
+      appendStatus(`Loading App ${STIGMAN?.Env?.version}`)
       loadResources()
     }
   }
   catch (e) {
-    document.getElementById("loading-text").innerHTML = e.message
+    appendStatus(e.message)
   }
 }
 
 if (window.isSecureContext) {
-  document.getElementById("loading-text").innerHTML = `Loading ${STIGMAN?.Env?.version}`
+  appendStatus(`Authorizing`)
   authorizeOidc()
 }
 else {
-  document.getElementById("loading-text").innerHTML = `SECURE CONTEXT REQUIRED<br><br>The App is not executing in a <a href=https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts target="_blank">secure context</a> and cannot continue. <br><br>To be considered secure, resources that are not local must be served over https:// URLs and the security properties of the network channel used to deliver the resource must not be considered deprecated.`
+  appendStatus(`SECURE CONTEXT REQUIRED<br><br>
+    The App is not executing in a <a href=https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts target="_blank">secure context</a> and cannot continue.
+    <br><br>To be considered secure, resources that are not local must be served over https:// URLs and the security 
+    properties of the network channel used to deliver the resource must not be considered deprecated.`)
 }
 

client/src/js/modules/oidcProvider.js

@@ -52,11 +52,14 @@ function setTokens(tokens, clientTime) {
   state.tokens = tokens
   token = state.tokens.access_token
   refreshToken = state.tokens.refresh_token
+
   tokenParsed = decodeToken(token)
   refreshTokenParsed = decodeToken(refreshToken)
+
   state.timeSkew = clientTime ? Math.floor(clientTime / 1000) - tokenParsed.iat : 0
   console.log('[OIDCPROVIDER] Estimated time difference between browser and server is ' + state.timeSkew + ' seconds')
   console.log('[OIDCPROVIDER] Token expires ' + new Date(tokenParsed.exp * 1000))
+
   const tokenExpiresIn = (tokenParsed.exp - (new Date().getTime() / 1000) + state.timeSkew) * 1000
   if (tokenExpiresIn <= 0) {
     expiredCallback()
@@ -67,6 +70,7 @@ function setTokens(tokens, clientTime) {
     }
     state.tokenTimeoutHandle = setTimeout(expiredCallback, tokenExpiresIn)
   }
+
   if (state.autoRefresh && refreshToken) {
     const now = new Date().getTime()
     const expiration = refreshTokenParsed ? refreshTokenParsed.exp : tokenParsed.exp
@@ -158,6 +162,10 @@ async function requestToken(body) {
     method: 'post',
     body
   })
+  if (!response.ok) {
+    const text = await response.text()
+    throw new Error(text)
+  }
   return response.json()
 }
 
@@ -168,18 +176,30 @@ async function requestRefresh() {
     body
   })
   if (!response.ok) {
-    throw new Error()
+    const text = await response.text()
+    throw new Error(text)
   }
   return response.json()
 }
 
 function getTokenRequestBody(code, redirectUri) {
+  if (!localStorage.getItem('oidc-code-verifier')) {
+    // Will assume this function was called while handling a replayed request,
+    // perhaps from a bookmarked URL of an earlier authorization request.
+    // Try to restart authorization from the beginning by redirecting to our entry point.
+    window.location.href = redirectUri
+    throw new Error('Redirecting after not finding code verifier')
+  }
   const params = new URLSearchParams()
   params.append('code', code)
   params.append('grant_type', 'authorization_code')
   params.append('client_id', state.clientId)
   params.append('redirect_uri', redirectUri)
   params.append('code_verifier', localStorage.getItem('oidc-code-verifier'))
+
+  // Clear saved code verifier to prevent replay error scenarios
+  localStorage.removeItem('oidc-code-verifier')
+
   return params
 }
 
@@ -215,6 +235,8 @@ async function getAuthorizationUrl() {
   params.append('code_challenge_method', 'S256')
 
   const authEndpoint = state.oidcConfiguration.authorization_endpoint
+
+  // Save the code verifier for use after the OP redirect back to us
   localStorage.setItem('oidc-code-verifier', pkce.codeVerifier)
 
   return `${authEndpoint}?${params.toString()}`

client/src/js/stigman.js

@@ -27,25 +27,28 @@ function myContextMenu (e,t,eOpts) {
 Ext.Ajax.disableCaching = false
 
 async function start () {
-	let timer
+	const el = Ext.get('loading-text').dom
+
 	try {
 		if ('serviceWorker' in navigator) {
 			await navigator.serviceWorker.register('serviceWorker.js')
 		}
-		timer = setTimeout(() => {
-			Ext.get( 'loading-text' ).dom.innerHTML = "Getting configuration..."
-		}, 250)
-		await SM.GetUserObject()
+		el.innerHTML += "<br/><br/>Fetching user data"
+		try {
+			await SM.GetUserObject()
+		}
+		catch (e) {
+			el.innerHTML += `<br/><br/>Error Fetching user data`
+			throw(e)
+		}
 		if (curUser.username !== undefined) {
-			clearTimeout(timer)
 			loadApp();
 		} else {
-			Ext.get( 'loading-text' ).dom.innerHTML =`No account for ${window.oidcProvider.token}`;
+			el.innerHTML += `<br/>No account for ${window.oidcProvider.token}`
 		}
 	}
 	catch (e) {
-		clearTimeout(timer)
-		Ext.get( 'loading-text' ).dom.innerHTML = e.message
+		el.innerHTML += `<br/></br/><textarea rows=12 cols=80 style="font-size: 10px" readonly>${JSON.stringify(STIGMAN.serializeError(e), null, 2)}</textarea>`
 	}
 }