saasufy-components 10.2.0 → 10.2.1

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/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.2.1",
   "description": "Components for Saasufy.",
   "main": "index.js",
   "scripts": {