saasufy-components 2.4.0 → 2.4.1

package/oauth-handler.js

@@ -4,19 +4,6 @@ import { generateRandomHexString } from './utils.js';
 const DEFAULT_AUTH_TIMEOUT = 10000;
 
 class OAuthHandler extends SocketConsumer {
-  static get observedAttributes() {
-    return [
-      'provider',
-      'code-param-name',
-      'state-param-name',
-      'state-session-storage-key',
-      'success-url',
-      'success-location-hash',
-      'navigate-event-path',
-      'auth-timeout'
-    ];
-  }
-
   successRedirect() {
     let successURL = this.getAttribute('success-url');
     let successLocationHash = this.getAttribute('success-location-hash');
@@ -46,9 +33,19 @@ class OAuthHandler extends SocketConsumer {
       throw new Error('The provider attribute of oauth-handler was not specified');
     }
 
-    let sessionStorageKey = this.getAttribute('state-session-storage-key') || `oauth.${provider}.state`;
+    let sessionStorageKey = this.getAttribute('state-session-storage-key') || 'oauth.state';
     let expectedOAuthState = sessionStorage.getItem(sessionStorageKey);
-    if (!expectedOAuthState) return;
+    if (!expectedOAuthState) {
+      this.innerHTML = `
+        <div class="error">OAuth authentication failed because the state query parameter was missing.</div>
+      `;
+      return;
+    };
+
+    let stateParts = expectedOAuthState.split('-');
+    // Do not process. The state may have been set for a different provider
+    // which is handled on the same page.
+    if (stateParts[0] !== provider) return;
 
     let codeParamName = this.getAttribute('code-param-name') || 'code';
     let stateParamName = this.getAttribute('state-param-name') || 'state';

package/oauth-link.js

@@ -27,6 +27,10 @@ class OAuthLink extends HTMLElement {
 
   connectedCallback() {
     this.isReady = true;
+
+    let urlSearchParams = new URLSearchParams(location.search);
+    this.code = urlSearchParams.get('code');
+
     this.render();
     this.shadowRoot.addEventListener('slotchange', this.handleSlotChangeEvent);
   }
@@ -36,27 +40,21 @@ class OAuthLink extends HTMLElement {
   }
 
   renderItem() {
-    let provider = this.getAttribute('provider');
-    if (!provider) {
-      throw new Error('The provider attribute of oauth-link was not specified');
-    }
+    if (this.code || !this.state) return;
+
     let viewportNode = this.shadowRoot.querySelector('slot[name="viewport"]').assignedNodes()[0];
     if (!viewportNode) return;
     let itemTemplate = this.shadowRoot.querySelector('slot[name="item"]').assignedNodes()[0];
     if (!itemTemplate) return;
 
     let clientId = this.getAttribute('client-id');
-    let stateSize = Number(this.getAttribute('state-size') || 20);
-    let sessionStorageKey = this.getAttribute('state-session-storage-key') || `oauth.${provider}.state`;
-    let state = generateRandomHexString(stateSize);
-    sessionStorage.setItem(sessionStorageKey, state);
 
     let itemString = renderTemplate(
       itemTemplate.innerHTML,
       {
         oauth: {
           clientId,
-          state
+          state: this.state
         }
       }
     );
@@ -64,14 +62,20 @@ class OAuthLink extends HTMLElement {
   }
 
   render() {
-    let urlSearchParams = new URLSearchParams(location.search);
-    let code = urlSearchParams.get('code');
-    
-    if (code) {
+    if (this.code) {
       this.shadowRoot.innerHTML = '';
       return;
     }
 
+    let provider = this.getAttribute('provider');
+    if (!provider) {
+      throw new Error('The provider attribute of oauth-link was not specified');
+    }
+    let stateSize = Number(this.getAttribute('state-size') || 20);
+    let sessionStorageKey = this.getAttribute('state-session-storage-key') || 'oauth.state';
+    this.state = `${provider}-${generateRandomHexString(stateSize)}`;
+    sessionStorage.setItem(sessionStorageKey, this.state);
+
     this.shadowRoot.innerHTML = `
       <slot name="item"></slot>
       <slot name="viewport"></slot>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "saasufy-components",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {