@polyguard/sdk 1.3.1 → 1.4.0

package/dist/sdk.esm.js

@@ -10839,7 +10839,7 @@ var reconnecting_websocket_mjs_default = ReconnectingWebSocket;
 
 // src/ui.js
 var import_qrcode = __toESM(require_browser(), 1);
-var LOADING_SPINNER = `<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 200 200" fill="none">
+var LOADING_SPINNER = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" fill="none">
   <style>
     .spinner-circle {
       animation: spin 1s linear infinite;
@@ -10868,12 +10868,13 @@ function buildModal() {
   modal.style.justifyContent = "center";
   modal.style.overflowY = "auto";
   modal.style.paddingTop = "24px";
+  modal.style.zIndex = "2147483647";
   modal.innerHTML = `
-    <div id="polyguard-modal-content" style="background: #fff; color: #222; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 26px 19px 19px 19px; max-width: 272px; width: 100%; text-align: center; position: relative; font-family: 'IBM Plex Sans', 'Inter', 'Helvetica', 'Arial', sans-serif; margin: 0 auto; box-sizing: border-box;">
+    <div id="polyguard-modal-content" style="background: #fff; color: #222; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 26px 19px 19px 19px; max-width: 312px; width: 100%; text-align: center; position: relative; z-index: 2147483647; font-family: 'IBM Plex Sans', 'Inter', 'Helvetica', 'Arial', sans-serif; margin: 0 auto; box-sizing: border-box;">
       <button id="polyguard-modal-close" style="position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 18px; color: #222; cursor: pointer; z-index: 2;">&times;</button>
       <h2 style="margin-top: 0; font-size: 1.04rem; font-weight: 700; color: #222;">Quick Identity Verification</h2>
       <div style="font-size: 10px; color: #888; margin-bottom: 10px; font-weight: 500;">Powered by Polyguard</div>
-      <div id="polyguard-qr" style="width: 160px; height: 160px; margin: 0 auto 13px auto; display: flex; align-items: center; justify-content: center; background: #f4f8fb; border-radius: 10px;"></div>
+      <div id="polyguard-qr" style="width: 200px; height: 200px; margin: 0 auto 13px auto; display: flex; align-items: center; justify-content: center; background: #f4f8fb; border-radius: 10px;"></div>
       <div style="margin-bottom: 10px; font-weight: 600; font-size: 13px; color: #222;">Scan this QR code to verify your identity.</div>
       <ul style="text-align: left; margin: 0 0 13px 0; padding-left: 16px; font-size: 11px; color: #444;">
         <li>We use the Polyguard service to verify your identity.</li>
@@ -10979,6 +10980,35 @@ function handleWebSocketMessage(event, ctx) {
     return;
   }
   if (data.jwt) {
+    const redirectUrl = data.redirect_url;
+    const { sidebarUrl, link_uuid } = ctx;
+    if (sidebarUrl && redirectUrl) {
+      const hasMsftSession = document.cookie.includes("pg_msft_session");
+      cleanup();
+      ws.close();
+      if (hasMsftSession) {
+        window.location.assign(redirectUrl);
+        resolve(rawJwt ? data : data.jwt);
+      } else {
+        const targetEl = qrDiv || document.body;
+        const btn = document.createElement("button");
+        btn.id = "polyguard-join-meeting";
+        btn.textContent = "Join Meeting";
+        btn.style.cssText = "padding:12px 24px;font-size:16px;cursor:pointer;border:none;border-radius:8px;background:#4CAF50;color:white;margin:16px auto;display:block;";
+        targetEl.appendChild(btn);
+        btn.addEventListener("click", () => {
+          const sidebarFullUrl = link_uuid ? `${sidebarUrl}?linkUuid=${link_uuid}` : sidebarUrl;
+          window.open(
+            sidebarFullUrl,
+            "polyguard-sidebar",
+            "width=320,height=900,top=0,left=" + (window.screen.availWidth - 320)
+          );
+          window.location.assign(redirectUrl);
+          resolve(rawJwt ? data : data.jwt);
+        });
+      }
+      return;
+    }
     cleanup();
     ws.close();
     resolve(rawJwt ? data : data.jwt);
@@ -11002,7 +11032,8 @@ function handleWebSocketMessage(event, ctx) {
 var PolyguardWebsocketClientImpl = class {
   constructor(params = {}) {
     this.apiClient = new ApiClient_default();
-    const { apiKey, baseUrl, appId, apiServer, requiredProofs = ["Full Name"], scanType = "single", redirectUrl, callbackUrl, cookieName, link_uuid } = params;
+    const { apiKey, baseUrl, appId, apiServer, requiredProofs = ["Full Name"], scanType = "single", redirectUrl, callbackUrl, cookieName, link_uuid, sidebarUrl } = params;
+    this.sidebarUrl = sidebarUrl;
     if (baseUrl) {
       this.apiClient.basePath = baseUrl;
     }
@@ -11114,7 +11145,7 @@ var PolyguardWebsocketClientImpl = class {
           reconnectionDelayGrowFactor: 1.5
         };
         ws = new reconnecting_websocket_mjs_default(wsUrl, [], options);
-        const ctx = { ws, qrDiv, isTargetMode, modal, cleanup, returnError, clearError, resolve, rawJwt };
+        const ctx = { ws, qrDiv, isTargetMode, modal, cleanup, returnError, clearError, resolve, rawJwt, sidebarUrl: this.sidebarUrl, link_uuid: this.link_uuid };
         ws.addEventListener("message", (event) => handleWebSocketMessage(event, ctx));
         ws.addEventListener("error", () => {
           console.error("WebSocket error");

package/dist/sdk.js

@@ -10872,7 +10872,7 @@ var Polyguard = (() => {
 
   // src/ui.js
   var import_qrcode = __toESM(require_browser(), 1);
-  var LOADING_SPINNER = `<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 200 200" fill="none">
+  var LOADING_SPINNER = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" fill="none">
   <style>
     .spinner-circle {
       animation: spin 1s linear infinite;
@@ -10901,12 +10901,13 @@ var Polyguard = (() => {
     modal.style.justifyContent = "center";
     modal.style.overflowY = "auto";
     modal.style.paddingTop = "24px";
+    modal.style.zIndex = "2147483647";
     modal.innerHTML = `
-    <div id="polyguard-modal-content" style="background: #fff; color: #222; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 26px 19px 19px 19px; max-width: 272px; width: 100%; text-align: center; position: relative; font-family: 'IBM Plex Sans', 'Inter', 'Helvetica', 'Arial', sans-serif; margin: 0 auto; box-sizing: border-box;">
+    <div id="polyguard-modal-content" style="background: #fff; color: #222; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 26px 19px 19px 19px; max-width: 312px; width: 100%; text-align: center; position: relative; z-index: 2147483647; font-family: 'IBM Plex Sans', 'Inter', 'Helvetica', 'Arial', sans-serif; margin: 0 auto; box-sizing: border-box;">
       <button id="polyguard-modal-close" style="position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 18px; color: #222; cursor: pointer; z-index: 2;">&times;</button>
       <h2 style="margin-top: 0; font-size: 1.04rem; font-weight: 700; color: #222;">Quick Identity Verification</h2>
       <div style="font-size: 10px; color: #888; margin-bottom: 10px; font-weight: 500;">Powered by Polyguard</div>
-      <div id="polyguard-qr" style="width: 160px; height: 160px; margin: 0 auto 13px auto; display: flex; align-items: center; justify-content: center; background: #f4f8fb; border-radius: 10px;"></div>
+      <div id="polyguard-qr" style="width: 200px; height: 200px; margin: 0 auto 13px auto; display: flex; align-items: center; justify-content: center; background: #f4f8fb; border-radius: 10px;"></div>
       <div style="margin-bottom: 10px; font-weight: 600; font-size: 13px; color: #222;">Scan this QR code to verify your identity.</div>
       <ul style="text-align: left; margin: 0 0 13px 0; padding-left: 16px; font-size: 11px; color: #444;">
         <li>We use the Polyguard service to verify your identity.</li>
@@ -11012,6 +11013,35 @@ var Polyguard = (() => {
       return;
     }
     if (data.jwt) {
+      const redirectUrl = data.redirect_url;
+      const { sidebarUrl, link_uuid } = ctx;
+      if (sidebarUrl && redirectUrl) {
+        const hasMsftSession = document.cookie.includes("pg_msft_session");
+        cleanup();
+        ws.close();
+        if (hasMsftSession) {
+          window.location.assign(redirectUrl);
+          resolve(rawJwt ? data : data.jwt);
+        } else {
+          const targetEl = qrDiv || document.body;
+          const btn = document.createElement("button");
+          btn.id = "polyguard-join-meeting";
+          btn.textContent = "Join Meeting";
+          btn.style.cssText = "padding:12px 24px;font-size:16px;cursor:pointer;border:none;border-radius:8px;background:#4CAF50;color:white;margin:16px auto;display:block;";
+          targetEl.appendChild(btn);
+          btn.addEventListener("click", () => {
+            const sidebarFullUrl = link_uuid ? `${sidebarUrl}?linkUuid=${link_uuid}` : sidebarUrl;
+            window.open(
+              sidebarFullUrl,
+              "polyguard-sidebar",
+              "width=320,height=900,top=0,left=" + (window.screen.availWidth - 320)
+            );
+            window.location.assign(redirectUrl);
+            resolve(rawJwt ? data : data.jwt);
+          });
+        }
+        return;
+      }
       cleanup();
       ws.close();
       resolve(rawJwt ? data : data.jwt);
@@ -11035,7 +11065,8 @@ var Polyguard = (() => {
   var PolyguardWebsocketClientImpl = class {
     constructor(params = {}) {
       this.apiClient = new ApiClient_default();
-      const { apiKey, baseUrl, appId, apiServer, requiredProofs = ["Full Name"], scanType = "single", redirectUrl, callbackUrl, cookieName, link_uuid } = params;
+      const { apiKey, baseUrl, appId, apiServer, requiredProofs = ["Full Name"], scanType = "single", redirectUrl, callbackUrl, cookieName, link_uuid, sidebarUrl } = params;
+      this.sidebarUrl = sidebarUrl;
       if (baseUrl) {
         this.apiClient.basePath = baseUrl;
       }
@@ -11147,7 +11178,7 @@ var Polyguard = (() => {
             reconnectionDelayGrowFactor: 1.5
           };
           ws = new reconnecting_websocket_mjs_default(wsUrl, [], options);
-          const ctx = { ws, qrDiv, isTargetMode, modal, cleanup, returnError, clearError, resolve, rawJwt };
+          const ctx = { ws, qrDiv, isTargetMode, modal, cleanup, returnError, clearError, resolve, rawJwt, sidebarUrl: this.sidebarUrl, link_uuid: this.link_uuid };
           ws.addEventListener("message", (event) => handleWebSocketMessage(event, ctx));
           ws.addEventListener("error", () => {
             console.error("WebSocket error");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polyguard/sdk",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "type": "module",
   "main": "dist/sdk.esm.js",
   "module": "dist/sdk.esm.js",

package/src/PolyguardWebsocketClientImpl.js

@@ -8,7 +8,8 @@ import { handleWebSocketMessage } from './messageHandler.js';
 export class PolyguardWebsocketClientImpl {
   constructor(params = {}) {
     this.apiClient = new PolyguardApi.ApiClient();
-    const { apiKey, baseUrl, appId, apiServer, requiredProofs = ['Full Name'], scanType = 'single', redirectUrl, callbackUrl, cookieName, link_uuid } = params;
+    const { apiKey, baseUrl, appId, apiServer, requiredProofs = ['Full Name'], scanType = 'single', redirectUrl, callbackUrl, cookieName, link_uuid, sidebarUrl } = params;
+    this.sidebarUrl = sidebarUrl;
     if (baseUrl) {
       this.apiClient.basePath = baseUrl;
     }
@@ -135,7 +136,7 @@ export class PolyguardWebsocketClientImpl {
         };
         ws = new ReconnectingWebSocket(wsUrl, [], options);
 
-        const ctx = { ws, qrDiv, isTargetMode, modal, cleanup, returnError, clearError, resolve, rawJwt };
+        const ctx = { ws, qrDiv, isTargetMode, modal, cleanup, returnError, clearError, resolve, rawJwt, sidebarUrl: this.sidebarUrl, link_uuid: this.link_uuid };
         ws.addEventListener('message', (event) => handleWebSocketMessage(event, ctx));
 
         ws.addEventListener('error', () => {

package/src/__tests__/sidebar.test.js

@@ -0,0 +1,265 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { buildFakeJwt, DEFAULT_PARAMS, mockTicketResponse } from './helpers/fixtures.js';
+import { MockReconnectingWebSocket } from './helpers/mockWebSocket.js';
+
+// ---- Module mocks ----
+
+const { MockApiClient, generatedMock, mockQRCode } = vi.hoisted(() => {
+  class MockApiClient {
+    constructor() {
+      this.basePath = '';
+      this.authentications = { bearerAuth: { apiKey: null } };
+    }
+  }
+
+  const generatedMock = { ApiClient: MockApiClient };
+  const apiClassNames = [
+    'BlockingApi', 'CallsApi', 'DefaultApi', 'LinksApi', 'SdkApi',
+    'SecureLinksApi', 'StirApi', 'TwilioApi', 'UsersApi', 'VeriffApi',
+    'WellKnownApi', 'ZoomApi',
+  ];
+  for (const name of apiClassNames) {
+    generatedMock[name] = class {
+      constructor(apiClient) { this._apiClient = apiClient; }
+    };
+  }
+
+  const mockQRCode = {
+    toString: null,
+  };
+
+  return { MockApiClient, generatedMock, mockQRCode };
+});
+
+vi.mock('../generated/src', () => generatedMock);
+
+vi.mock('reconnecting-websocket', async () => {
+  const { MockReconnectingWebSocket } = await import('./helpers/mockWebSocket.js');
+  return { default: MockReconnectingWebSocket };
+});
+
+vi.mock('qrcode', () => ({
+  default: mockQRCode,
+}));
+
+const { PolyguardWebsocketClientImpl } = await import('../PolyguardWebsocketClientImpl.js');
+
+// ---- Helpers ----
+
+async function flushMicrotasks() {
+  await new Promise(resolve => setTimeout(resolve, 0));
+}
+
+function stubFetch(ticket = 'test-ticket-123', ok = true) {
+  const mock = vi.fn().mockResolvedValue(mockTicketResponse(ticket, ok));
+  vi.stubGlobal('fetch', mock);
+  return mock;
+}
+
+function setProtocol(protocol) {
+  Object.defineProperty(window, 'location', {
+    value: { protocol, assign: vi.fn(), href: '' },
+    writable: true,
+    configurable: true,
+  });
+}
+
+function setUserAgent(ua) {
+  Object.defineProperty(navigator, 'userAgent', {
+    value: ua,
+    writable: true,
+    configurable: true,
+  });
+}
+
+async function startVerifyAndGetWs(client, target = null, rawJwt = false) {
+  const promise = client.verify(target, rawJwt);
+  await flushMicrotasks();
+  const ws = MockReconnectingWebSocket.latest();
+  return { promise, ws };
+}
+
+function setCookie(name, value) {
+  Object.defineProperty(document, 'cookie', {
+    value: `${name}=${value}; other=stuff`,
+    writable: true,
+    configurable: true,
+  });
+}
+
+function clearCookies() {
+  Object.defineProperty(document, 'cookie', {
+    value: '',
+    writable: true,
+    configurable: true,
+  });
+}
+
+// ---- Tests ----
+
+describe('sidebarUrl feature', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    MockReconnectingWebSocket.reset();
+    setProtocol('https:');
+    setUserAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)');
+    stubFetch();
+    mockQRCode.toString = vi.fn((data, opts, cb) => cb(null, '<svg>mock-qr</svg>'));
+    clearCookies();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    document.body.innerHTML = '';
+  });
+
+  describe('constructor', () => {
+    it('stores sidebarUrl when provided', () => {
+      const client = new PolyguardWebsocketClientImpl({
+        ...DEFAULT_PARAMS,
+        sidebarUrl: 'https://teams.polyguard.ai/ms-teams/sidebar-standalone',
+      });
+      expect(client.sidebarUrl).toBe('https://teams.polyguard.ai/ms-teams/sidebar-standalone');
+    });
+
+    it('sidebarUrl is undefined when not provided', () => {
+      const client = new PolyguardWebsocketClientImpl(DEFAULT_PARAMS);
+      expect(client.sidebarUrl).toBeUndefined();
+    });
+  });
+
+  describe('without sidebarUrl - existing behavior unchanged', () => {
+    it('jwt with redirect_url resolves normally', async () => {
+      const client = new PolyguardWebsocketClientImpl(DEFAULT_PARAMS);
+      const fakeJwt = buildFakeJwt({ redirect_url: 'https://teams.microsoft.com/meet/123' });
+      const { promise, ws } = await startVerifyAndGetWs(client);
+      ws.simulateMessage({ jwt: fakeJwt });
+      const result = await promise;
+      expect(result).toBe(fakeJwt);
+    });
+
+    it('does not call window.open', async () => {
+      const openSpy = vi.fn();
+      vi.stubGlobal('open', openSpy);
+      const client = new PolyguardWebsocketClientImpl(DEFAULT_PARAMS);
+      const fakeJwt = buildFakeJwt({ redirect_url: 'https://teams.microsoft.com/meet/123' });
+      const { promise, ws } = await startVerifyAndGetWs(client);
+      ws.simulateMessage({ jwt: fakeJwt });
+      await promise;
+      expect(openSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('with sidebarUrl and pg_msft_session cookie (authenticated user)', () => {
+    it('auto-redirects without showing a button', async () => {
+      setCookie('pg_msft_session', '1');
+      const client = new PolyguardWebsocketClientImpl({
+        ...DEFAULT_PARAMS,
+        sidebarUrl: 'https://teams.polyguard.ai/ms-teams/sidebar-standalone',
+        link_uuid: 'link-abc',
+      });
+      document.body.innerHTML = '<div id="test-target"></div>';
+      const fakeJwt = buildFakeJwt({ redirect_url: 'https://teams.microsoft.com/meet/123' });
+      const { promise, ws } = await startVerifyAndGetWs(client, 'test-target');
+      ws.simulateMessage({ jwt: fakeJwt, redirect_url: 'https://teams.microsoft.com/meet/123' });
+      await promise;
+      expect(window.location.assign).toHaveBeenCalledWith('https://teams.microsoft.com/meet/123');
+    });
+
+    it('does not render a join button', async () => {
+      setCookie('pg_msft_session', '1');
+      const client = new PolyguardWebsocketClientImpl({
+        ...DEFAULT_PARAMS,
+        sidebarUrl: 'https://teams.polyguard.ai/ms-teams/sidebar-standalone',
+        link_uuid: 'link-abc',
+      });
+      document.body.innerHTML = '<div id="test-target"></div>';
+      const fakeJwt = buildFakeJwt({ redirect_url: 'https://teams.microsoft.com/meet/123' });
+      const { promise, ws } = await startVerifyAndGetWs(client, 'test-target');
+      ws.simulateMessage({ jwt: fakeJwt, redirect_url: 'https://teams.microsoft.com/meet/123' });
+      await promise;
+      expect(document.querySelector('#polyguard-join-meeting')).toBeNull();
+    });
+  });
+
+  describe('with sidebarUrl and NO cookie (anonymous user)', () => {
+    it('renders a join button instead of auto-redirecting', async () => {
+      clearCookies();
+      const client = new PolyguardWebsocketClientImpl({
+        ...DEFAULT_PARAMS,
+        sidebarUrl: 'https://teams.polyguard.ai/ms-teams/sidebar-standalone',
+        link_uuid: 'link-abc',
+      });
+      document.body.innerHTML = '<div id="test-target"></div>';
+      const fakeJwt = buildFakeJwt({ redirect_url: 'https://teams.microsoft.com/meet/123' });
+      const { promise, ws } = await startVerifyAndGetWs(client, 'test-target');
+      ws.simulateMessage({ jwt: fakeJwt, redirect_url: 'https://teams.microsoft.com/meet/123' });
+      // Should not have redirected yet
+      expect(window.location.assign).not.toHaveBeenCalled();
+      // Should show join button
+      const btn = document.querySelector('#polyguard-join-meeting');
+      expect(btn).not.toBeNull();
+      // Resolve by clicking the button
+      btn.click();
+      await promise;
+    });
+
+    it('clicking join button opens sidebar popup', async () => {
+      clearCookies();
+      const openSpy = vi.fn().mockReturnValue({});
+      vi.stubGlobal('open', openSpy);
+      const client = new PolyguardWebsocketClientImpl({
+        ...DEFAULT_PARAMS,
+        sidebarUrl: 'https://teams.polyguard.ai/ms-teams/sidebar-standalone',
+        link_uuid: 'link-abc',
+      });
+      document.body.innerHTML = '<div id="test-target"></div>';
+      const fakeJwt = buildFakeJwt({ redirect_url: 'https://teams.microsoft.com/meet/123' });
+      const { promise, ws } = await startVerifyAndGetWs(client, 'test-target');
+      ws.simulateMessage({ jwt: fakeJwt, redirect_url: 'https://teams.microsoft.com/meet/123' });
+      const btn = document.querySelector('#polyguard-join-meeting');
+      btn.click();
+      await promise;
+      expect(openSpy).toHaveBeenCalledWith(
+        'https://teams.polyguard.ai/ms-teams/sidebar-standalone?linkUuid=link-abc',
+        'polyguard-sidebar',
+        expect.stringContaining('width=320')
+      );
+    });
+
+    it('clicking join button redirects to meeting', async () => {
+      clearCookies();
+      vi.stubGlobal('open', vi.fn().mockReturnValue({}));
+      const client = new PolyguardWebsocketClientImpl({
+        ...DEFAULT_PARAMS,
+        sidebarUrl: 'https://teams.polyguard.ai/ms-teams/sidebar-standalone',
+        link_uuid: 'link-abc',
+      });
+      document.body.innerHTML = '<div id="test-target"></div>';
+      const fakeJwt = buildFakeJwt({ redirect_url: 'https://teams.microsoft.com/meet/123' });
+      const { promise, ws } = await startVerifyAndGetWs(client, 'test-target');
+      ws.simulateMessage({ jwt: fakeJwt, redirect_url: 'https://teams.microsoft.com/meet/123' });
+      document.querySelector('#polyguard-join-meeting').click();
+      await promise;
+      expect(window.location.assign).toHaveBeenCalledWith('https://teams.microsoft.com/meet/123');
+    });
+  });
+
+  describe('with sidebarUrl but no redirect_url in JWT (non-meeting links)', () => {
+    it('resolves normally without button or redirect', async () => {
+      clearCookies();
+      const client = new PolyguardWebsocketClientImpl({
+        ...DEFAULT_PARAMS,
+        sidebarUrl: 'https://teams.polyguard.ai/ms-teams/sidebar-standalone',
+        link_uuid: 'link-abc',
+      });
+      const fakeJwt = buildFakeJwt({ confirmation_code: 'ABC123' });
+      const { promise, ws } = await startVerifyAndGetWs(client);
+      // No redirect_url in the message data
+      ws.simulateMessage({ jwt: fakeJwt });
+      const result = await promise;
+      expect(result).toBe(fakeJwt);
+      expect(window.location.assign).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/messageHandler.js

@@ -54,6 +54,45 @@ export function handleWebSocketMessage(event, ctx) {
   }
 
   if (data.jwt) {
+    const redirectUrl = data.redirect_url;
+    const { sidebarUrl, link_uuid } = ctx;
+
+    // When sidebarUrl is configured and the server provides a redirect_url,
+    // the SDK handles the redirect (and optionally opens a sidebar popup).
+    if (sidebarUrl && redirectUrl) {
+      const hasMsftSession = document.cookie.includes('pg_msft_session');
+      cleanup();
+      ws.close();
+
+      if (hasMsftSession) {
+        // Authenticated user — redirect directly, they'll see the in-Teams sidepanel
+        window.location.assign(redirectUrl);
+        resolve(rawJwt ? data : data.jwt);
+      } else {
+        // Anonymous user — show a "Join Meeting" button so the click provides
+        // the user gesture Chrome requires for window.open()
+        const targetEl = qrDiv || document.body;
+        const btn = document.createElement('button');
+        btn.id = 'polyguard-join-meeting';
+        btn.textContent = 'Join Meeting';
+        btn.style.cssText = 'padding:12px 24px;font-size:16px;cursor:pointer;border:none;border-radius:8px;background:#4CAF50;color:white;margin:16px auto;display:block;';
+        targetEl.appendChild(btn);
+        btn.addEventListener('click', () => {
+          const sidebarFullUrl = link_uuid
+            ? `${sidebarUrl}?linkUuid=${link_uuid}`
+            : sidebarUrl;
+          window.open(
+            sidebarFullUrl,
+            'polyguard-sidebar',
+            'width=320,height=900,top=0,left=' + (window.screen.availWidth - 320)
+          );
+          window.location.assign(redirectUrl);
+          resolve(rawJwt ? data : data.jwt);
+        });
+      }
+      return;
+    }
+
     cleanup();
     ws.close();
     resolve(rawJwt ? data : data.jwt);

package/src/ui.js

@@ -1,7 +1,7 @@
 import QRCode from 'qrcode';
 
 // Animated spinner SVG
-export const LOADING_SPINNER = `<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 200 200" fill="none">
+export const LOADING_SPINNER = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200" fill="none">
   <style>
     .spinner-circle {
       animation: spin 1s linear infinite;
@@ -31,12 +31,13 @@ export function buildModal() {
   modal.style.justifyContent = 'center';
   modal.style.overflowY = 'auto';
   modal.style.paddingTop = '24px';
+  modal.style.zIndex = '2147483647';
   modal.innerHTML = `
-    <div id="polyguard-modal-content" style="background: #fff; color: #222; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 26px 19px 19px 19px; max-width: 272px; width: 100%; text-align: center; position: relative; font-family: 'IBM Plex Sans', 'Inter', 'Helvetica', 'Arial', sans-serif; margin: 0 auto; box-sizing: border-box;">
+    <div id="polyguard-modal-content" style="background: #fff; color: #222; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.18); padding: 26px 19px 19px 19px; max-width: 312px; width: 100%; text-align: center; position: relative; z-index: 2147483647; font-family: 'IBM Plex Sans', 'Inter', 'Helvetica', 'Arial', sans-serif; margin: 0 auto; box-sizing: border-box;">
       <button id="polyguard-modal-close" style="position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 18px; color: #222; cursor: pointer; z-index: 2;">&times;</button>
       <h2 style="margin-top: 0; font-size: 1.04rem; font-weight: 700; color: #222;">Quick Identity Verification</h2>
       <div style="font-size: 10px; color: #888; margin-bottom: 10px; font-weight: 500;">Powered by Polyguard</div>
-      <div id="polyguard-qr" style="width: 160px; height: 160px; margin: 0 auto 13px auto; display: flex; align-items: center; justify-content: center; background: #f4f8fb; border-radius: 10px;"></div>
+      <div id="polyguard-qr" style="width: 200px; height: 200px; margin: 0 auto 13px auto; display: flex; align-items: center; justify-content: center; background: #f4f8fb; border-radius: 10px;"></div>
       <div style="margin-bottom: 10px; font-weight: 600; font-size: 13px; color: #222;">Scan this QR code to verify your identity.</div>
       <ul style="text-align: left; margin: 0 0 13px 0; padding-left: 16px; font-size: 11px; color: #444;">
         <li>We use the Polyguard service to verify your identity.</li>