@matdata/yasgui 5.6.0 → 5.7.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@matdata/yasgui",
   "description": "Yet Another SPARQL GUI",
-  "version": "5.6.0",
+  "version": "5.7.0",
   "main": "build/yasgui.min.js",
   "types": "build/ts/src/index.d.ts",
   "license": "MIT",
@@ -33,7 +33,8 @@
     "jsuri": "^1.3.1",
     "lodash-es": "^4.17.15",
     "sortablejs": "^1.10.2",
-    "@matdata/yasgui-graph-plugin": "^1.0.0"
+    "@matdata/yasgui-graph-plugin": "^1.3.0",
+    "@matdata/yasgui-table-plugin": "^1.0.0"
   },
   "devDependencies": {
     "@types/autosuggest-highlight": "^3.1.0",

package/src/ConfigExportImport.ts

@@ -307,6 +307,7 @@ export function parseFromTurtle(turtle: string): Partial<PersistedJson> {
             basicAuth: undefined,
             bearerAuth: undefined,
             apiKeyAuth: undefined,
+            oauth2Auth: undefined,
           },
           yasr: {
             settings: {},

package/src/OAuth2Utils.ts

@@ -0,0 +1,315 @@
+/**
+ * OAuth 2.0 Utility Functions
+ * Handles OAuth 2.0 Authorization Code flow with PKCE
+ */
+
+/**
+ * Generate a random string for PKCE code verifier
+ */
+function generateRandomString(length: number): string {
+  const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~";
+  const values = crypto.getRandomValues(new Uint8Array(length));
+  return Array.from(values)
+    .map((v) => possible[v % possible.length])
+    .join("");
+}
+
+/**
+ * Generate SHA-256 hash and base64url encode it
+ */
+async function sha256(plain: string): Promise<string> {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(plain);
+  const hash = await crypto.subtle.digest("SHA-256", data);
+  return base64urlEncode(hash);
+}
+
+/**
+ * Base64url encode (without padding)
+ */
+function base64urlEncode(buffer: ArrayBuffer): string {
+  const bytes = new Uint8Array(buffer);
+  let binary = "";
+  for (let i = 0; i < bytes.length; i++) {
+    binary += String.fromCharCode(bytes[i]);
+  }
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
+}
+
+export interface OAuth2Config {
+  clientId: string;
+  authorizationEndpoint: string;
+  tokenEndpoint: string;
+  redirectUri: string;
+  scope?: string;
+}
+
+export interface OAuth2TokenResponse {
+  access_token: string;
+  id_token?: string; // ID token for authentication (Azure AD, OIDC)
+  refresh_token?: string;
+  expires_in?: number; // seconds
+  token_type: string;
+}
+
+/**
+ * Check if a token has expired
+ */
+export function isTokenExpired(tokenExpiry?: number): boolean {
+  if (!tokenExpiry) return true;
+  // Add 60 second buffer to refresh before actual expiration
+  return Date.now() >= tokenExpiry - 60000;
+}
+
+/**
+ * Start OAuth 2.0 Authorization Code flow with PKCE
+ * Opens a popup window for user authentication
+ */
+export async function startOAuth2Flow(config: OAuth2Config): Promise<OAuth2TokenResponse> {
+  // Generate PKCE code verifier and challenge
+  const codeVerifier = generateRandomString(128);
+  const codeChallenge = await sha256(codeVerifier);
+
+  // Generate state for CSRF protection
+  const state = generateRandomString(32);
+
+  // Generate unique flow ID to prevent collisions across multiple OAuth flows
+  const flowId = generateRandomString(16);
+
+  // Store code verifier and state in sessionStorage for later retrieval with unique keys
+  sessionStorage.setItem(`oauth2_code_verifier_${flowId}`, codeVerifier);
+  sessionStorage.setItem(`oauth2_state_${flowId}`, state);
+
+  // Build authorization URL
+  const authUrl = new URL(config.authorizationEndpoint);
+  authUrl.searchParams.set("client_id", config.clientId);
+  authUrl.searchParams.set("response_type", "code");
+  authUrl.searchParams.set("redirect_uri", config.redirectUri);
+  authUrl.searchParams.set("code_challenge", codeChallenge);
+  authUrl.searchParams.set("code_challenge_method", "S256");
+  // Include flowId in state to link the callback to this specific flow
+  authUrl.searchParams.set("state", `${state}:${flowId}`);
+  if (config.scope) {
+    authUrl.searchParams.set("scope", config.scope);
+  }
+
+  // Open popup window
+  const width = 600;
+  const height = 700;
+  const left = window.screenX + (window.outerWidth - width) / 2;
+  const top = window.screenY + (window.outerHeight - height) / 2;
+  const popup = window.open(
+    authUrl.toString(),
+    "OAuth2 Authorization",
+    `width=${width},height=${height},left=${left},top=${top},popup=yes,scrollbars=yes`,
+  );
+
+  if (!popup) {
+    throw new Error("Failed to open OAuth 2.0 authorization popup. Please allow popups for this site.");
+  }
+
+  // Wait for the OAuth callback
+  return new Promise<OAuth2TokenResponse>((resolve, reject) => {
+    // Flag to prevent race condition between polling and messageHandler
+    let flowCompleted = false;
+
+    const cleanup = () => {
+      clearInterval(checkInterval);
+      window.removeEventListener("message", messageHandler);
+      // Clean up sessionStorage
+      sessionStorage.removeItem(`oauth2_code_verifier_${flowId}`);
+      sessionStorage.removeItem(`oauth2_state_${flowId}`);
+    };
+
+    const checkInterval = setInterval(() => {
+      try {
+        // Check if popup is closed
+        if (popup.closed) {
+          if (!flowCompleted) {
+            flowCompleted = true;
+            cleanup();
+            reject(new Error("OAuth 2.0 authorization was cancelled"));
+          }
+          return;
+        }
+
+        // Try to read popup URL (will throw if cross-origin)
+        try {
+          const popupUrl = popup.location.href;
+          if (popupUrl.startsWith(config.redirectUri) && !flowCompleted) {
+            flowCompleted = true;
+            cleanup();
+            popup.close();
+
+            // Parse the authorization code from URL
+            const url = new URL(popupUrl);
+            const code = url.searchParams.get("code");
+            const returnedState = url.searchParams.get("state");
+            const error = url.searchParams.get("error");
+            const errorDescription = url.searchParams.get("error_description");
+
+            if (error) {
+              reject(new Error(`OAuth 2.0 error: ${error}${errorDescription ? " - " + errorDescription : ""}`));
+              return;
+            }
+
+            if (!code) {
+              reject(new Error("No authorization code received"));
+              return;
+            }
+
+            // Validate state includes our flowId
+            const expectedState = `${state}:${flowId}`;
+            if (returnedState !== expectedState) {
+              reject(new Error("State mismatch - possible CSRF attack"));
+              return;
+            }
+
+            // Exchange code for tokens
+            exchangeCodeForToken(config, code, codeVerifier).then(resolve).catch(reject);
+          }
+        } catch (e) {
+          // Cross-origin error is expected when on OAuth provider's domain
+          // Keep waiting
+        }
+      } catch (e) {
+        // Ignore errors while checking popup
+      }
+    }, 500);
+
+    // Also listen for postMessage from redirect page (alternative method)
+    const messageHandler = (event: MessageEvent) => {
+      // Validate origin if needed (should match redirect URI origin)
+      if (event.data && event.data.type === "oauth2_callback" && !flowCompleted) {
+        flowCompleted = true;
+        cleanup();
+        if (popup && !popup.closed) {
+          popup.close();
+        }
+
+        const { code, state: returnedState, error, error_description } = event.data;
+
+        if (error) {
+          reject(new Error(`OAuth 2.0 error: ${error}${error_description ? " - " + error_description : ""}`));
+          return;
+        }
+
+        if (!code) {
+          reject(new Error("No authorization code received"));
+          return;
+        }
+
+        // Validate state includes our flowId
+        const expectedState = `${state}:${flowId}`;
+        if (returnedState !== expectedState) {
+          reject(new Error("State mismatch - possible CSRF attack"));
+          return;
+        }
+
+        // Exchange code for tokens
+        exchangeCodeForToken(config, code, codeVerifier).then(resolve).catch(reject);
+      }
+    };
+
+    window.addEventListener("message", messageHandler);
+
+    // Cleanup timeout after 5 minutes
+    setTimeout(
+      () => {
+        if (!flowCompleted) {
+          flowCompleted = true;
+          cleanup();
+          if (popup && !popup.closed) {
+            popup.close();
+          }
+          reject(new Error("OAuth 2.0 authorization timeout"));
+        }
+      },
+      5 * 60 * 1000,
+    );
+  });
+}
+
+/**
+ * Exchange authorization code for access token
+ */
+async function exchangeCodeForToken(
+  config: OAuth2Config,
+  code: string,
+  codeVerifier: string,
+): Promise<OAuth2TokenResponse> {
+  const tokenUrl = config.tokenEndpoint;
+
+  const body = new URLSearchParams();
+  body.set("grant_type", "authorization_code");
+  body.set("code", code);
+  body.set("redirect_uri", config.redirectUri);
+  body.set("client_id", config.clientId);
+  body.set("code_verifier", codeVerifier);
+
+  try {
+    const response = await fetch(tokenUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: body.toString(),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Token exchange failed: ${response.status} ${response.statusText} - ${errorText}`);
+    }
+
+    const tokenResponse: OAuth2TokenResponse = await response.json();
+
+    // Note: sessionStorage cleanup is handled by the caller
+    return tokenResponse;
+  } catch (error) {
+    // Note: sessionStorage cleanup is handled by the caller
+    throw error;
+  }
+}
+
+/**
+ * Refresh an OAuth 2.0 access token using a refresh token
+ */
+export async function refreshOAuth2Token(
+  config: Omit<OAuth2Config, "authorizationEndpoint" | "redirectUri">,
+  refreshToken: string,
+): Promise<OAuth2TokenResponse> {
+  const tokenUrl = config.tokenEndpoint;
+
+  const body = new URLSearchParams();
+  body.set("grant_type", "refresh_token");
+  body.set("refresh_token", refreshToken);
+  body.set("client_id", config.clientId);
+
+  try {
+    const response = await fetch(tokenUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded",
+      },
+      body: body.toString(),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Token refresh failed: ${response.status} ${response.statusText} - ${errorText}`);
+    }
+
+    const tokenResponse: OAuth2TokenResponse = await response.json();
+    return tokenResponse;
+  } catch (error) {
+    throw error;
+  }
+}
+
+/**
+ * Calculate token expiry timestamp from expires_in value
+ */
+export function calculateTokenExpiry(expiresIn?: number): number | undefined {
+  if (!expiresIn) return undefined;
+  return Date.now() + expiresIn * 1000;
+}

package/src/Tab.ts

@@ -9,6 +9,7 @@ import * as shareLink from "./linkUtils";
 import EndpointSelect from "./endpointSelect";
 import "./tab.scss";
 import { getRandomId, default as Yasgui, YasguiRequestConfig } from "./";
+import * as OAuth2Utils from "./OAuth2Utils";
 
 // Layout orientation toggle icons
 const HORIZONTAL_LAYOUT_ICON = `<svg viewBox="0 0 24 24" class="svgImg">
@@ -477,9 +478,15 @@ export class Tab extends EventEmitter {
   public getName() {
     return this.persistentJson.name;
   }
-
-  public query(): Promise<any> {
+  public async query(): Promise<any> {
     if (!this.yasqe) return Promise.reject(new Error("No yasqe editor initialized"));
+
+    // Check and refresh OAuth 2.0 token if needed
+    const tokenValid = await this.ensureOAuth2TokenValid();
+    if (!tokenValid) {
+      return Promise.reject(new Error("OAuth 2.0 authentication failed"));
+    }
+
     return this.yasqe.query();
   }
 
@@ -528,11 +535,85 @@ export class Tab extends EventEmitter {
           apiKey: auth.apiKey,
         },
       };
+    } else if (auth.type === "oauth2") {
+      // For OAuth 2.0, return the current access token and ID token
+      // Token refresh is handled separately before query execution
+      if (auth.accessToken) {
+        return {
+          type: "oauth2" as const,
+          config: {
+            accessToken: auth.accessToken,
+            idToken: auth.idToken,
+          },
+        };
+      }
     }
 
     return undefined;
   }
 
+  /**
+   * Check and refresh OAuth 2.0 token if needed
+   * Should be called before query execution
+   */
+  private async ensureOAuth2TokenValid(): Promise<boolean> {
+    const endpoint = this.getEndpoint();
+    if (!endpoint) return true;
+
+    const endpointConfig = this.yasgui.persistentConfig.getEndpointConfig(endpoint);
+    if (!endpointConfig || !endpointConfig.authentication) return true;
+
+    const auth = endpointConfig.authentication;
+    if (auth.type !== "oauth2") return true;
+
+    // Check if token is expired
+    if (OAuth2Utils.isTokenExpired(auth.tokenExpiry)) {
+      // Try to refresh the token if we have a refresh token
+      if (auth.refreshToken) {
+        try {
+          const tokenResponse = await OAuth2Utils.refreshOAuth2Token(
+            {
+              clientId: auth.clientId,
+              tokenEndpoint: auth.tokenEndpoint,
+            },
+            auth.refreshToken,
+          );
+
+          const tokenExpiry = OAuth2Utils.calculateTokenExpiry(tokenResponse.expires_in);
+
+          // Update stored authentication with new tokens
+          this.yasgui.persistentConfig.addOrUpdateEndpoint(endpoint, {
+            authentication: {
+              ...auth,
+              accessToken: tokenResponse.access_token,
+              idToken: tokenResponse.id_token,
+              refreshToken: tokenResponse.refresh_token || auth.refreshToken,
+              tokenExpiry,
+            },
+          });
+
+          return true;
+        } catch (error) {
+          console.error("Failed to refresh OAuth 2.0 token:", error);
+          // Token refresh failed, user needs to re-authenticate
+          alert(
+            "Your OAuth 2.0 session has expired and could not be refreshed. Please re-authenticate by clicking the Settings button (gear icon) and selecting the SPARQL Endpoints tab.",
+          );
+          return false;
+        }
+      } else {
+        // No refresh token available, user needs to re-authenticate
+        alert(
+          "Your OAuth 2.0 session has expired. Please re-authenticate by clicking the Settings button (gear icon) and selecting the SPARQL Endpoints tab.",
+        );
+        return false;
+      }
+    }
+
+    // Token is still valid
+    return true;
+  }
+
   /**
    * The Yasgui configuration object may contain a custom request config
    * This request config object can contain getter functions, or plain json
@@ -606,6 +687,8 @@ export class Tab extends EventEmitter {
             processedReqConfig.bearerAuth = endpointAuth.config;
           } else if (endpointAuth.type === "apiKey" && typeof processedReqConfig.apiKeyAuth === "undefined") {
             processedReqConfig.apiKeyAuth = endpointAuth.config;
+          } else if (endpointAuth.type === "oauth2" && typeof processedReqConfig.oauth2Auth === "undefined") {
+            processedReqConfig.oauth2Auth = endpointAuth.config;
           }
         }
 

package/src/TabSettingsModal.scss

@@ -63,7 +63,7 @@
   background: var(--yasgui-bg-primary, white);
   border-radius: 8px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  max-width: 800px;
+  max-width: 1000px;
   width: 90%;
   max-height: 90vh;
   display: flex;
@@ -160,6 +160,13 @@
 
 .settingsSection {
   margin-bottom: 20px;
+
+  h3 {
+    margin: 0 0 12px 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: var(--yasgui-text-primary, #000);
+  }
 }
 
 .settingsLabel {
@@ -297,7 +304,8 @@
 }
 
 .primaryButton,
-.secondaryButton {
+.secondaryButton,
+.dangerButton {
   padding: 8px 20px;
   border: none;
   border-radius: 4px;
@@ -320,7 +328,21 @@
   color: var(--yasgui-text-primary, #333);
 
   &:hover {
-    background: var(--yasgui-border-color, #d0d0d0);
+    background: var(--yasgui-bg-quaternary, #d0d0d0);
+  }
+}
+
+.dangerButton {
+  background: var(--yasgui-danger-bg, #dc3545);
+  color: white;
+  margin-top: 10px;
+
+  &:hover {
+    background: var(--yasgui-danger-hover, #c82333);
+  }
+
+  &:active {
+    background: var(--yasgui-danger-active, #bd2130);
   }
 }
 
@@ -849,6 +871,24 @@
   }
 }
 
+.authHelpLink {
+  padding: 10px 12px;
+  background: var(--yasgui-bg-secondary, #f5f5f5);
+  border: 1px solid var(--yasgui-border-color, #e0e0e0);
+  border-radius: 4px;
+  font-size: 13px;
+  margin-bottom: 12px;
+
+  a {
+    color: var(--yasgui-accent-color, #337ab7);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
 .authSecurityNotice {
   padding: 12px;
   background: var(--yasgui-warning-bg, #fff3cd);
@@ -925,6 +965,33 @@
   }
 }
 
+// OAuth 2.0 specific styling
+.authInputHelp {
+  font-size: 12px;
+  color: var(--yasgui-text-secondary, #666);
+  margin-top: 4px;
+  line-height: 1.4;
+}
+
+.oauth2TokenStatus {
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 500;
+
+  &.authenticated {
+    background: var(--yasgui-success-bg, #d4edda);
+    color: var(--yasgui-success-text, #155724);
+    border: 1px solid var(--yasgui-success-border, #c3e6cb);
+  }
+
+  &.expired {
+    background: var(--yasgui-warning-bg, #fff3cd);
+    color: var(--yasgui-warning-text, #856404);
+    border: 1px solid var(--yasgui-warning-border, #ffeaa7);
+  }
+}
+
 // Add endpoint form styling
 .addEndpointForm {
   margin-top: 20px;