saasufy-components 10.2.0 → 10.3.0

package/README.md

@@ -936,6 +936,8 @@ The change in the location hash can then be detected by an `app-router` to switc
 
 A component which can be placed inside a `socket-provider` to deauthenticate the socket (e.g. on click).
 
+If the user logged in via an OAuth provider which supports RP-initiated log out (such as Keycloak), deauthenticating the socket does not end the session on the provider itself; the user would be logged straight back in without being asked for their credentials the next time they log in. To also end the provider session, specify the `logout-url` attribute and the component will redirect the user to that endpoint after deauthenticating the socket.
+
 **Import**
 
 ```html
@@ -948,6 +950,27 @@ A component which can be placed inside a `socket-provider` to deauthenticate the
 <log-out onclick="logOut()"><a href="javascript:void(0)">Log out</a></log-out>
 ```
 
+Logging out of Keycloak as well as of the app:
+
+```html
+<log-out
+  onclick="logOut()"
+  provider="keycloak"
+  logout-url="https://auth.example.com/realms/myrealm/protocol/openid-connect/logout"
+  client-id="myclient"
+  post-logout-redirect-uri="https://myapp.com/index.html"
+><a href="javascript:void(0)">Log out</a></log-out>
+```
+
+**Attributes**
+
+- `logout-url`: The log out endpoint of the OAuth provider; for OpenID Connect providers this is the `end_session_endpoint`. If it is not specified, the component only deauthenticates the socket. The redirect is skipped if the user did not log in via an OAuth provider.
+- `provider`: The name of the OAuth provider, as specified on the `Authentication` page of your Saasufy control panel. If it is set, the redirect only happens when the user logged in via that specific provider; this is useful when your app offers several different ways to log in.
+- `client-id`: The client ID to pass to the provider as the `client_id` query parameter. OpenID Connect providers require either this or an ID token in order to log the user out without asking them to confirm.
+- `post-logout-redirect-uri`: The URL to send the user back to once the provider has logged them out, passed as the `post_logout_redirect_uri` query parameter. It usually needs to be registered with the provider in advance. If it is not specified, the user is left on the provider's own logged out page.
+
+If the auth token contains an ID token (which requires the `idTokenField` of the provider to be set on the `Authentication` page of your Saasufy control panel), it is passed to the provider as the `id_token_hint` query parameter. Providers such as Keycloak show a log out confirmation page when it is missing. Any of these query parameters which are already present in `logout-url` are left untouched.
+
 ### oauth-link
 
 A link to initiate an OAuth flow to authenticate a user as part of log in. Can support a range of different OAuth providers.

package/if-group.js

@@ -1,16 +1,13 @@
-import { debouncer } from './utils.js';
-
-const DEBOUNCE_DELAY = 0;
-
 class IfGroup extends HTMLElement {
   constructor() {
     super();
     this.isReady = false;
+    this.renderPending = false;
+    this.lastViewportNode = null;
+    this.lastRenderedContent = null;
     this.attachShadow({ mode: 'open' });
     this.shadowRoot.innerHTML = '<slot name="content"></slot><slot name="viewport"></slot>';
 
-    let debounce = debouncer();
-
     this.processTemplates = () => {
       let viewportSlot = this.shadowRoot.querySelector('slot[name="viewport"]');
       let viewportNode = viewportSlot.assignedNodes()[0];
@@ -32,10 +29,33 @@ class IfGroup extends HTMLElement {
       for (let node of contentNodes) {
         contentList.push(node.innerHTML);
       }
-      viewportNode.innerHTML = contentList.join('');
+      let content = contentList.join('');
+
+      // Rewriting innerHTML with identical markup recreates the nodes, which loses
+      // decoded images, focus and scroll position; greedy-refresh forces that reset.
+      if (
+        !this.hasAttribute('greedy-refresh') &&
+        viewportNode === this.lastViewportNode &&
+        content === this.lastRenderedContent
+      ) return;
+
+      this.lastViewportNode = viewportNode;
+      this.lastRenderedContent = content;
+
+      viewportNode.innerHTML = content;
+    };
+
+    // Coalescing on a microtask keeps the write ahead of the next paint; deferring
+    // with a timeout lets the browser paint the empty viewport first, which flickers.
+    this.debouncedProcessTemplates = () => {
+      if (this.renderPending) return;
+      this.renderPending = true;
+      queueMicrotask(() => {
+        this.renderPending = false;
+        this.processTemplates();
+      });
     };
 
-    this.debouncedProcessTemplates = debounce(this.processTemplates, DEBOUNCE_DELAY);
     this.shadowRoot.addEventListener('slotchange', this.debouncedProcessTemplates);
   }
 

package/log-out.js

@@ -1,8 +1,50 @@
 import { SocketConsumer } from './socket.js';
 
 class LogOut extends SocketConsumer {
-  logOut() {
-    this.getSocket().deauthenticate();
+  getProviderLogOutURL(authToken) {
+    let logoutURL = this.getAttribute('logout-url');
+    if (!logoutURL) return null;
+
+    // RP-initiated log out only applies to sessions which were created via an OAuth provider.
+    let authSource = authToken && authToken.authSource;
+    if (!authSource) return null;
+    let provider = this.getAttribute('provider');
+    if (provider && provider !== authSource) return null;
+
+    let providerLogOutURL;
+    try {
+      providerLogOutURL = new URL(logoutURL, location.origin);
+    } catch (error) {
+      throw new Error(
+        'The logout-url attribute of log-out was not a valid URL'
+      );
+    }
+
+    let clientId = this.getAttribute('client-id');
+    let postLogoutRedirectURI = this.getAttribute('post-logout-redirect-uri');
+    let searchParams = providerLogOutURL.searchParams;
+
+    // Without an id_token_hint, the provider asks the user to confirm the log out.
+    if (authToken.idToken && !searchParams.has('id_token_hint')) {
+      searchParams.set('id_token_hint', authToken.idToken);
+    }
+    if (clientId && !searchParams.has('client_id')) {
+      searchParams.set('client_id', clientId);
+    }
+    if (postLogoutRedirectURI && !searchParams.has('post_logout_redirect_uri')) {
+      searchParams.set('post_logout_redirect_uri', postLogoutRedirectURI);
+    }
+    return providerLogOutURL.href;
+  }
+
+  async logOut() {
+    let socket = this.getSocket();
+    // The auth token must be read before the socket is deauthenticated.
+    let providerLogOutURL = this.getProviderLogOutURL(socket.authToken);
+    await socket.deauthenticate();
+    if (providerLogOutURL) {
+      location.href = providerLogOutURL;
+    }
   }
 }
 

package/package.json

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

package/switch-group.js

@@ -1,16 +1,13 @@
-import { debouncer } from './utils.js';
-
-const DEBOUNCE_DELAY = 0;
-
 class SwitchGroup extends HTMLElement {
   constructor() {
     super();
     this.isReady = false;
+    this.renderPending = false;
+    this.lastViewportNode = null;
+    this.lastRenderedContent = null;
     this.attachShadow({ mode: 'open' });
     this.shadowRoot.innerHTML = '<slot name="content"></slot><slot name="viewport"></slot>';
 
-    let debounce = debouncer();
-
     this.processTemplates = () => {
       let viewportSlot = this.shadowRoot.querySelector('slot[name="viewport"]');
       let viewportNode = viewportSlot.assignedNodes()[0];
@@ -45,10 +42,33 @@ class SwitchGroup extends HTMLElement {
         }
       }
 
-      viewportNode.innerHTML = contentList.join('');
+      let content = contentList.join('');
+
+      // Rewriting innerHTML with identical markup recreates the nodes, which loses
+      // decoded images, focus and scroll position; greedy-refresh forces that reset.
+      if (
+        !this.hasAttribute('greedy-refresh') &&
+        viewportNode === this.lastViewportNode &&
+        content === this.lastRenderedContent
+      ) return;
+
+      this.lastViewportNode = viewportNode;
+      this.lastRenderedContent = content;
+
+      viewportNode.innerHTML = content;
+    };
+
+    // Coalescing on a microtask keeps the write ahead of the next paint; deferring
+    // with a timeout lets the browser paint the empty viewport first, which flickers.
+    this.debouncedProcessTemplates = () => {
+      if (this.renderPending) return;
+      this.renderPending = true;
+      queueMicrotask(() => {
+        this.renderPending = false;
+        this.processTemplates();
+      });
     };
 
-    this.debouncedProcessTemplates = debounce(this.processTemplates, DEBOUNCE_DELAY);
     this.shadowRoot.addEventListener('slotchange', this.debouncedProcessTemplates);
   }