gameglue 1.2.2 → 2.0.0

package/examples/flight-dashboard.html

@@ -30,17 +30,37 @@
       color: #64748b;
       margin-bottom: 2rem;
     }
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 1.5rem;
+    }
     .status {
       display: inline-block;
       padding: 0.25rem 0.75rem;
       border-radius: 9999px;
       font-size: 0.875rem;
-      margin-bottom: 1.5rem;
     }
     .status.disconnected { background: #7f1d1d; color: #fca5a5; }
     .status.connecting { background: #78350f; color: #fcd34d; }
     .status.connected { background: #14532d; color: #86efac; }
 
+    .logout-btn {
+      background: transparent;
+      border: 1px solid #334155;
+      color: #94a3b8;
+      padding: 0.5rem 1rem;
+      border-radius: 0.5rem;
+      font-size: 0.875rem;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+    .logout-btn:hover {
+      background: #334155;
+      color: #f1f5f9;
+    }
+
     .card {
       background: #1e293b;
       border-radius: 0.75rem;
@@ -164,12 +184,15 @@
     <!-- Auth Section (shown when not authenticated) -->
     <div id="auth-section" class="card auth-section">
       <p style="margin-bottom: 1rem; color: #94a3b8;">Connect to GameGlue to view flight telemetry and send commands</p>
-      <button class="auth-btn" onclick="authenticate()">Connect with GameGlue</button>
+      <button class="auth-btn" onclick="doLogin()">Connect with GameGlue</button>
     </div>
 
     <!-- Dashboard (shown when authenticated) -->
     <div id="dashboard" class="hidden">
-      <span id="status" class="status disconnected">Waiting for MSFS...</span>
+      <div class="header">
+        <span id="status" class="status disconnected">Waiting for MSFS...</span>
+        <button class="logout-btn" onclick="doLogout()">Logout</button>
+      </div>
 
       <!-- Telemetry Card -->
       <div class="card">
@@ -259,47 +282,55 @@
   </div>
 
   <!-- Load GameGlue SDK from local build -->
-  <script src="../dist/gg.sdk.js"></script>
+  <script src="../dist/gg.umd.js"></script>
   <script>
     // Configuration
     const CLIENT_ID = 'gameglue-sdk-examples';
-    const REDIRECT_URI = window.location.href.split('?')[0];
+    const REDIRECT_URI = window.location.href.split('?')[0].split('#')[0];
+
+    // Create a single SDK instance
+    const ggClient = new GameGlue({
+      clientId: CLIENT_ID,
+      redirect_uri: REDIRECT_URI,
+      scopes: ['msfs:read', 'msfs:write']
+    });
 
-    let ggClient = null;
     let listener = null;
 
-    // Initialize GameGlue client
-    function initGameGlue() {
-      ggClient = new GameGlue({
-        clientId: CLIENT_ID,
-        redirect_uri: REDIRECT_URI,
-        scopes: ['msfs:read', 'msfs:write']
-      });
+    // Login button handler
+    function doLogin() {
+      log('Redirecting to GameGlue login...');
+      ggClient.login();
+    }
+
+    // Logout button handler
+    function doLogout() {
+      log('Logging out...');
+      ggClient.logout({ redirect: false });
+      document.getElementById('auth-section').classList.remove('hidden');
+      document.getElementById('dashboard').classList.add('hidden');
     }
 
-    // Authenticate with GameGlue
-    async function authenticate() {
+    // Check authentication and set up listener
+    async function init() {
       try {
-        log('Authenticating with GameGlue...');
-        const userId = await ggClient.auth();
+        log('Checking authentication...');
 
-        if (userId) {
-          log('Authenticated! User ID: ' + userId);
-          showDashboard();
-          await setupListener(userId);
+        // isAuthenticated() handles OAuth callback automatically
+        const isAuthed = await ggClient.isAuthenticated();
+
+        if (!isAuthed) {
+          log('Not authenticated - please log in');
+          return;
         }
-      } catch (err) {
-        log('Authentication failed: ' + err.message, 'error');
-      }
-    }
 
-    // Check if already authenticated on page load
-    async function checkAuth() {
-      if (await ggClient.isAuthenticated()) {
-        const userId = ggClient.getUserId();
-        log('Already authenticated. User ID: ' + userId);
+        // Authenticated
+        const userId = ggClient.getUser();
+        log('Authenticated! User ID: ' + userId);
         showDashboard();
         await setupListener(userId);
+      } catch (err) {
+        log('Error: ' + err.message, 'error');
       }
     }
 
@@ -383,19 +414,18 @@
 
     function log(message, type = '') {
       const logEl = document.getElementById('log');
-      const entry = document.createElement('div');
-      entry.className = 'log-entry ' + type;
-      entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
-      logEl.appendChild(entry);
-      logEl.scrollTop = logEl.scrollHeight;
+      if (logEl) {
+        const entry = document.createElement('div');
+        entry.className = 'log-entry ' + type;
+        entry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
+        logEl.appendChild(entry);
+        logEl.scrollTop = logEl.scrollHeight;
+      }
       console.log(message);
     }
 
     // Initialize on page load
-    window.onload = () => {
-      initGameGlue();
-      checkAuth();
-    };
+    window.onload = init;
   </script>
 </body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gameglue",
-  "version": "1.2.2",
+  "version": "2.0.0",
   "description": "Javascript SDK for the GameGlue developer platform.",
   "type": "module",
   "main": "dist/gg.cjs.js",

package/src/auth.js

@@ -2,107 +2,224 @@ import { OidcClient } from 'oidc-client-ts';
 import { storage } from './utils';
 import jwt_decode from 'jwt-decode';
 
+const DEFAULT_AUTH_URL = 'https://auth.gameglue.gg/realms/GameGlue';
+
+// Track if callback is being processed (prevents double-processing)
+let _callbackPromise = null;
 
 export class GameGlueAuth {
   constructor(cfg) {
+    const authority = cfg.authUrl || DEFAULT_AUTH_URL;
     this._oidcSettings = {
-      authority: "https://auth.gameglue.gg/realms/GameGlue",
+      authority,
       client_id: cfg.clientId,
       redirect_uri: removeTrailingSlashes(cfg.redirect_uri || window.location.href),
       post_logout_redirect_uri: removeTrailingSlashes(window.location.href),
       response_type: "code",
-      scope: `openid ${(cfg.scopes||[]).join(' ')}`,
+      scope: `openid ${(cfg.scopes || []).join(' ')}`,
       response_mode: "fragment",
       filterProtocolClaims: true
     };
     this._oidcClient = new OidcClient(this._oidcSettings);
-    this._refreshCallback = () => {}
+    this._refreshCallback = () => {};
     this._refreshTimeout = null;
   }
-  setTokenRefreshTimeout(token) {
-    if (!token) {
-      return;
+
+  /**
+   * Check if user is authenticated.
+   * If OAuth callback params are in URL, processes them first.
+   * Safe to call multiple times - idempotent.
+   * @returns {Promise<boolean>}
+   */
+  async isAuthenticated() {
+    // If callback params present, process them first
+    if (this._hasCallbackParams()) {
+      await this._processCallback();
     }
+
+    // Check for valid tokens
+    return this._hasValidTokens();
+  }
+
+  /**
+   * Redirect to OAuth login page.
+   * Does not return - navigates away.
+   */
+  login() {
+    this._oidcClient.createSigninRequest({ state: { bar: 15 } }).then((req) => {
+      window.location = req.url;
+    }).catch((err) => {
+      console.error('Failed to create signin request:', err);
+    });
+  }
+
+  /**
+   * Log out the user.
+   * Clears local tokens and optionally redirects to Keycloak logout.
+   * @param {Object} options - { redirect?: boolean }
+   */
+  logout(options = {}) {
+    // Clear local tokens
+    storage.remove('gg-auth-token');
+    storage.remove('gg-refresh-token');
     clearTimeout(this._refreshTimeout);
-    const timeUntilExp = (jwt_decode(token).exp * 1000) - Date.now() - 5000;
-    if (timeUntilExp > 0) {
-      this._refreshTimeout = setTimeout(() => {
-        this.attemptRefresh();
-      }, timeUntilExp);
+
+    // Optionally redirect to Keycloak logout
+    if (options.redirect !== false) {
+      const logoutUrl = `${this._oidcSettings.authority}/protocol/openid-connect/logout?post_logout_redirect_uri=${encodeURIComponent(this._oidcSettings.post_logout_redirect_uri)}`;
+      window.location.href = logoutUrl;
     }
   }
-  setAccessToken(token) {
-    this.setTokenRefreshTimeout(token);
-    return storage.set('gg-auth-token', token);
+
+  /**
+   * Get the current user's ID.
+   * @throws {Error} if not authenticated
+   * @returns {string}
+   */
+  getUser() {
+    const token = this._getAccessToken();
+    if (!token) {
+      throw new Error('Not authenticated');
+    }
+    const decoded = jwt_decode(token);
+    return decoded.sub;
   }
+
+  /**
+   * Get the access token for API calls.
+   * @returns {string|null}
+   */
   getAccessToken() {
-    let token = storage.get('gg-auth-token');
-    this.setTokenRefreshTimeout(token);
-    return token;
+    return this._getAccessToken();
   }
-  getUserId() {
-    const decoded = jwt_decode(this.getAccessToken());
-    return decoded.sub;
-  }
-  setRefreshToken(token) {
-    return storage.set('gg-refresh-token', token);
+
+  /**
+   * Register callback for token refresh events.
+   * @param {Function} callback
+   */
+  onTokenRefreshed(callback) {
+    this._refreshCallback = callback;
   }
-  getRefreshToken(token) {
-    return storage.get('gg-refresh-token');
+
+  // ============ Internal Methods ============
+
+  _hasCallbackParams() {
+    return location.hash.includes("state=") &&
+           (location.hash.includes("code=") || location.hash.includes("error="));
   }
-  _shouldHandleRedirectResponse() {
-    return (location.hash.includes("state=") && (location.hash.includes("code=") || location.hash.includes("error=")));
+
+  _clearCallbackUrl() {
+    window.history.replaceState("", document.title, window.location.pathname + window.location.search);
   }
-  async handleRedirectResponse() {
-    let response = await this._oidcClient.processSigninResponse(window.location.href);
-    if (response.error || !response.access_token) {
-      console.error(response.error);
+
+  async _processCallback() {
+    // If already processing, wait for that to complete
+    if (_callbackPromise) {
+      await _callbackPromise;
       return;
     }
-    window.history.pushState("", document.title, window.location.pathname + window.location.search);
-    this.setAccessToken(response.access_token);
-    this.setRefreshToken(response.refresh_token);
+
+    // Start processing
+    _callbackPromise = this._doProcessCallback();
+
+    try {
+      await _callbackPromise;
+    } finally {
+      _callbackPromise = null;
+    }
   }
-  onTokenRefreshed(callback) {
-    this._refreshCallback = callback;
+
+  async _doProcessCallback() {
+    try {
+      const response = await this._oidcClient.processSigninResponse(window.location.href);
+
+      if (response.error) {
+        this._clearCallbackUrl();
+        throw new Error(response.error);
+      }
+
+      if (!response.access_token) {
+        this._clearCallbackUrl();
+        throw new Error('No access token received');
+      }
+
+      this._setAccessToken(response.access_token);
+      this._setRefreshToken(response.refresh_token);
+      this._clearCallbackUrl();
+    } catch (err) {
+      // If we failed but tokens exist (another call succeeded), that's fine
+      if (this._hasValidTokens()) {
+        this._clearCallbackUrl();
+        return;
+      }
+      this._clearCallbackUrl();
+      throw err;
+    }
   }
-  async isAuthenticated(refreshAttempted) {
-    // 1. Get the access token
-    let access_token = this.getAccessToken();
-    
-    // 2. If we don't have an access token, we're not authenticated
-    if (!access_token) {
+
+  _hasValidTokens() {
+    const token = this._getAccessToken();
+    if (!token) {
       return false;
     }
-    // 3. Decode the token, then check to see if it has expired
-    const decoded = jwt_decode(access_token);
-    const expirationDate = new Date(decoded.exp*1000);
-    const isExpired = (expirationDate < new Date());
-    
-    if (isExpired && !refreshAttempted) {
-      await this.attemptRefresh();
-      return this.isAuthenticated(true);
+
+    try {
+      const decoded = jwt_decode(token);
+      const expirationDate = new Date(decoded.exp * 1000);
+      return expirationDate > new Date();
+    } catch {
+      return false;
     }
-    
-    // This line might be a little confusing. Basically it's just saying if we tried to refresh the token,
-    // but it's STILL expired, return false, otherwise return true.
-    return !(isExpired && refreshAttempted);
   }
-  isTokenExpired(token) {
-    const decoded = jwt_decode(token);
-    const expirationDate = new Date(decoded.exp*1000);
-    return (expirationDate < new Date());
+
+  _getAccessToken() {
+    const token = storage.get('gg-auth-token');
+    if (token) {
+      this._setTokenRefreshTimeout(token);
+    }
+    return token;
+  }
+
+  _setAccessToken(token) {
+    this._setTokenRefreshTimeout(token);
+    return storage.set('gg-auth-token', token);
   }
-  async attemptRefresh() {
+
+  _setRefreshToken(token) {
+    return storage.set('gg-refresh-token', token);
+  }
+
+  _getRefreshToken() {
+    return storage.get('gg-refresh-token');
+  }
+
+  _setTokenRefreshTimeout(token) {
+    if (!token) return;
+
+    clearTimeout(this._refreshTimeout);
+
+    try {
+      const timeUntilExp = (jwt_decode(token).exp * 1000) - Date.now() - 5000;
+      if (timeUntilExp > 0) {
+        this._refreshTimeout = setTimeout(() => {
+          this._attemptRefresh();
+        }, timeUntilExp);
+      }
+    } catch {
+      // Invalid token, ignore
+    }
+  }
+
+  async _attemptRefresh() {
     const url = `${this._oidcSettings.authority}/protocol/openid-connect/token`;
     const client_id = this._oidcSettings.client_id;
-    const refresh_token = this.getRefreshToken();
+    const refresh_token = this._getRefreshToken();
     const grant_type = 'refresh_token';
-    
+
     try {
-      const response =  await fetch(url, {
+      const response = await fetch(url, {
         method: 'POST',
-        headers:{
+        headers: {
           'Content-Type': 'application/x-www-form-urlencoded'
         },
         body: new URLSearchParams({
@@ -111,31 +228,15 @@ export class GameGlueAuth {
           refresh_token
         })
       });
+
       if (response.status === 200) {
         const resObj = await response.json();
-        this.setAccessToken(resObj.access_token);
-        this.setRefreshToken(resObj.refresh_token);
-        this._refreshCallback(resObj);
+        this._setAccessToken(resObj.access_token);
+        this._setRefreshToken(resObj.refresh_token);
+        this._refreshCallback(resObj.access_token);
       }
-    } catch(e) {
-      console.log('Error: ', e);
-    }
-  }
-  _triggerAuthRedirect() {
-    this._oidcClient.createSigninRequest({ state: { bar: 15 } }).then(function(req) {
-      window.location = req.url;
-    }).catch(function(err) {
-      console.error(err);
-    });
-  }
-  async authenticate() {
-    if (this._shouldHandleRedirectResponse()) {
-      await this.handleRedirectResponse();
-    }
-    
-    let isAuthenticated = await this.isAuthenticated();
-    if (!isAuthenticated) {
-      await this._triggerAuthRedirect();
+    } catch (e) {
+      console.error('Token refresh failed:', e);
     }
   }
 }
@@ -145,4 +246,4 @@ function removeTrailingSlashes(url) {
     return url.replace(/\/+$/, '');
   }
   return url;
-}
+}