saasufy-components 2.2.0 → 2.3.0

package/oauth-handler.js

@@ -0,0 +1,98 @@
+import { SocketConsumer } from './socket.js';
+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');
+    let navigateEventPath = this.getAttribute('navigate-event-path');
+
+    if (successLocationHash) {
+      location.hash = successLocationHash;
+    } else if (successURL) {
+      location.href = successURL;
+    } else {
+      this.dispatchEvent(
+        new CustomEvent('navigate', {
+          detail: {
+            path: navigateEventPath
+          },
+          bubbles: true
+        })
+      );
+    }
+  }
+
+  async connectedCallback() {
+    this.innerHTML = '';
+
+    let provider = this.getAttribute('provider');
+    if (!provider) {
+      throw new Error('The provider attribute of oauth-handler was not specified');
+    }
+
+    let sessionStorageKey = this.getAttribute('state-session-storage-key') || `oauth.${provider}.state`;
+    let expectedOAuthState = sessionStorage.getItem(sessionStorageKey);
+    if (!expectedOAuthState) return;
+
+    let codeParamName = this.getAttribute('code-param-name') || 'code';
+    let stateParamName = this.getAttribute('state-param-name') || 'state';
+
+    let authTimeout = Number(this.getAttribute('auth-timeout') || DEFAULT_AUTH_TIMEOUT);
+
+    let urlSearchParams = new URLSearchParams(location.search);
+    let code = urlSearchParams.get(codeParamName);
+
+    if (code) {
+      let state = urlSearchParams.get(stateParamName);
+      let socket = this.getSocket();
+
+      history.replaceState({}, document.title, location.pathname);
+
+      if (state === expectedOAuthState) {
+        try {
+          await socket.invoke('log-in-oauth', { provider, data: { code } });
+        } catch (error) {
+          this.innerHTML = `
+            <div class="error">OAuth authentication failed. ${error.message}</div>
+          `;
+          return;
+        }
+        if (socket.authState === 'authenticated') {
+          this.successRedirect();
+        } else {
+          try {
+            await socket.listener('authenticate').once(authTimeout);
+          } catch (error) {
+            this.innerHTML = `
+              <div class="error">OAuth socket authentication timed out</div>
+            `;
+            return;
+          }
+          this.successRedirect();
+        }
+      } else {
+        this.innerHTML = `
+          <div class="error">OAuth state query parameter was invalid</div>
+        `;
+      }
+    }
+  }
+}
+
+window.customElements.define('oauth-handler', OAuthHandler);

package/oauth-link.js

@@ -0,0 +1,84 @@
+import { renderTemplate, generateRandomHexString } from './utils.js';
+
+class OAuthLink extends HTMLElement {
+  constructor() {
+    super();
+    this.isReady = false;
+    this.attachShadow({ mode: 'open' });
+
+    this.handleSlotChangeEvent = () => {
+      this.renderItem();
+    };
+  }
+
+  static get observedAttributes() {
+    return [
+      'provider',
+      'client-id',
+      'state-size',
+      'state-session-storage-key'
+    ];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (!this.isReady) return;
+    this.render();
+  }
+
+  connectedCallback() {
+    this.isReady = true;
+    this.render();
+    this.shadowRoot.addEventListener('slotchange', this.handleSlotChangeEvent);
+  }
+
+  disconnectedCallback() {
+    this.shadowRoot.removeEventListener('slotchange', this.handleSlotChangeEvent);
+  }
+
+  renderItem() {
+    let provider = this.getAttribute('provider');
+    if (!provider) {
+      throw new Error('The provider attribute of oauth-link was not specified');
+    }
+    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
+        }
+      }
+    );
+    viewportNode.innerHTML = itemString;
+  }
+
+  render() {
+    let urlSearchParams = new URLSearchParams(location.search);
+    let code = urlSearchParams.get('code');
+    
+    if (code) {
+      this.shadowRoot.innerHTML = '';
+      return;
+    }
+
+    this.shadowRoot.innerHTML = `
+      <slot name="item"></slot>
+      <slot name="viewport"></slot>
+    `;
+
+    this.renderItem();
+  }
+}
+
+window.customElements.define('oauth-link', OAuthLink);

package/package.json

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

package/utils.js

@@ -268,6 +268,18 @@ export function updateConsumerElements(parentElement, consumers, value) {
   }
 }
 
+export function generateRandomHexString(byteLength) {
+  let byteArray = new Uint8Array(byteLength);
+  crypto.getRandomValues(byteArray);
+  return Array.from(byteArray, byte => {
+    let firstChar = byte >> 4;
+    firstChar = firstChar < 10 ? String(firstChar) : String.fromCharCode(firstChar + 87);
+    let secondChar = byte & 0x0f;
+    secondChar = secondChar < 10 ? String(secondChar) : String.fromCharCode(secondChar + 87);
+    return `${firstChar}${secondChar}`;
+  }).join('');
+}
+
 export function wait(duration) {
   return new Promise((resolve) => setTimeout(resolve, duration));
 }