fix: use Clerk hosted sign-in page in BrowserWindow (fixes 'not loaded with Ui components')

Agent-Logs-Url: https://github.com/highperformancecoder/minsky/sessions/7da5d79d-7c5f-4968-8943-58398993784d

Co-authored-by: highperformancecoder <3075825+highperformancecoder@users.noreply.github.com>

Author: Copilot

gui-js/apps/minsky-electron/src/app/managers/WindowManager.ts

@@ -2,6 +2,7 @@ import {
   ActiveWindow,
   AppLayoutPayload,
   CreateWindowPayload,
+  CLERK_PUBLISHABLE_KEY,
   events,
   Functions,
   minsky,
@@ -12,7 +13,7 @@ import {
   Utility,
 } from '@minsky/shared';
 import { StoreManager } from './StoreManager';
-import { BrowserWindow, dialog, Menu, OpenDialogOptions, SaveDialogOptions, screen } from 'electron';
+import { BrowserWindow, dialog, Menu, OpenDialogOptions, SaveDialogOptions, safeStorage, screen } from 'electron';
 import log from 'electron-log';
 import os from 'os';
 import { join, dirname } from 'path';
@@ -384,21 +385,82 @@ export class WindowManager {
       }
   }
 
-  static async openLoginWindow() {
-    const existingToken = StoreManager.store.get('authToken') || '';
-    const loginWindow = WindowManager.createPopupWindowWithRouting({
-      width: 420,
-      height: 500,
-      title: 'Login',
-      modal: false,
-      url: `#/headless/login?authToken=${encodeURIComponent(existingToken)}`,
-    });
-    
-    return new Promise<string>((resolve)=>{
-      // Resolve with null if the user closes the window before authenticating
+  static async openLoginWindow(): Promise<string | null> {
+    // Derive the Clerk frontendApi hostname from the publishable key.
+    // Key format: pk_<type>_<base64(frontendApi + '$')>
+    const encoded = CLERK_PUBLISHABLE_KEY.split('_')[2] ?? '';
+    const padded = encoded + '='.repeat((4 - (encoded.length % 4)) % 4);
+    let frontendApi: string;
+    try {
+      frontendApi = Buffer.from(padded, 'base64').toString('utf8').replace(/\$$/, '');
+    } catch {
+      log.error('WindowManager.openLoginWindow: invalid Clerk publishable key');
+      return Promise.resolve(null);
+    }
+
+    // Open Clerk's hosted sign-in page in a dedicated BrowserWindow.
+    // Because this window loads from HTTPS (not file://), Clerk's CDN
+    // resources and React UI components load normally — the full standard
+    // Clerk sign-in UI is displayed, including every configured OAuth provider.
+    // This mirrors the approach used by @clerk/electron without requiring that
+    // package.
+    //
+    // After successful sign-in, Clerk redirects to redirect_url ('minsky://signed-in').
+    // We intercept that navigation with will-navigate, execute JS in the still-live
+    // sign-in page to obtain a JWT from window.Clerk.session.getToken(), stash it,
+    // and close the window.
+    const redirectUrl = 'minsky://signed-in';
+    const signInUrl = `https://${frontendApi}/sign-in?redirect_url=${encodeURIComponent(redirectUrl)}`;
+
+    return new Promise<string>((resolve) => {
+      const loginWindow = new BrowserWindow({
+        width: 480,
+        height: 640,
+        title: 'Sign In',
+        parent: WindowManager.getMainWindow(),
+        modal: false,
+        webPreferences: {
+          contextIsolation: true,
+          nodeIntegration: false,
+        },
+        icon: __dirname + '/assets/favicon.png',
+      });
+
+      loginWindow.setMenu(null);
+      loginWindow.once('ready-to-show', () => loginWindow.show());
+
+      loginWindow.webContents.on('will-navigate', async (event, url) => {
+        if (url.startsWith('minsky://')) {
+          // The sign-in page is about to redirect to our custom scheme, meaning
+          // sign-in completed successfully. Prevent the navigation (the minsky://
+          // scheme is not registered as a real protocol), then extract the JWT
+          // from window.Clerk.session in the still-live sign-in page context.
+          event.preventDefault();
+          try {
+            const token: string | null = await loginWindow.webContents.executeJavaScript(
+              '(async () => { try { return await window.Clerk?.session?.getToken() ?? null; } catch(e) { return null; } })()'
+            );
+            if (token) {
+              // Inline token stash (mirrors CommandsManager.stashClerkToken).
+              if (safeStorage.isEncryptionAvailable()) {
+                const encrypted = safeStorage.encryptString(token);
+                StoreManager.store.set('authToken', encrypted.toString('latin1'));
+              } else {
+                StoreManager.store.set('authToken', token);
+              }
+            }
+          } catch (err) {
+            log.error('WindowManager.openLoginWindow: failed to retrieve Clerk token', err);
+          }
+          loginWindow.close();
+        }
+      });
+
       loginWindow.once('closed', () => {
-        resolve(StoreManager.store.get('authToken'));
+        resolve(StoreManager.store.get('authToken') as string | null ?? null);
       });
+
+      loginWindow.loadURL(signInUrl);
     });
   }
 

gui-js/libs/core/src/lib/services/clerk/clerk.service.ts

@@ -16,13 +16,13 @@ export class ClerkService {
   async initialize(): Promise<void> {
     if (this.initialized) return;
 
-    // Use the headless Clerk JS package (no React/ClerkUI dependency).
-    // Pre-built UI components (mountSignIn etc.) require @clerk/ui which loads
-    // React chunks lazily from Clerk's CDN. Electron blocks those requests, so
-    // mountSignIn() always throws "Clerk was not loaded with Ui components".
-    // Authentication is performed directly via clerk.client.signIn.create().
-    // standardBrowser: false uses the lightweight non-cookie path appropriate
-    // for Electron's renderer process.
+    // The npm dist build of @clerk/clerk-js is headless: it deliberately omits
+    // the React-based pre-built UI components (mountSignIn etc.) to keep the
+    // bundle small. In Electron the login window is Clerk's own hosted sign-in
+    // page opened by the main process in a dedicated BrowserWindow, so this
+    // renderer-side Clerk instance is only used for session queries (isSignedIn,
+    // getToken, setSession, signOut). standardBrowser:false selects the
+    // lightweight non-cookie path appropriate for Electron's renderer process.
     this.clerk = new Clerk(AppConfig.clerkPublishableKey);
     await this.clerk.load({ standardBrowser: false });
     this.initialized = true;
@@ -38,21 +38,6 @@ export class ClerkService {
     return await this.clerk.session.getToken();
   }
 
-  async signInWithEmailPassword(email: string | null | undefined, password: string | null | undefined): Promise<void> {
-    if (!this.clerk) throw new Error('Clerk is not initialized.');
-    if (!email || !password) throw new Error('Email and password are required.');
-    const result = await this.clerk.client.signIn.create({
-      identifier: email,
-      password,
-    });
-    if (result.status === 'complete') {
-      await this.clerk.setActive({ session: result.createdSessionId });
-      await this.sendTokenToElectron();
-    } else {
-      throw new Error('Sign-in was not completed. Additional steps may be required.');
-    }
-  }
-
   async signOut(): Promise<void> {
     if (!this.clerk) throw new Error('Clerk is not initialized.');
     await this.clerk.signOut();
@@ -77,7 +62,7 @@ export class ClerkService {
       await this.clerk.setActive({ session: this.clerk.client.sessions[0].id });
     }
     if (!this.clerk.session) {
-      if (this.electronService.isElectron) 
+      if (this.electronService.isElectron)
         await this.electronService.invoke(events.SET_AUTH_TOKEN, null);
       throw new Error('Session expired or invalid');
     }

gui-js/libs/shared/src/lib/constants/constants.ts

@@ -3,6 +3,10 @@ export const rendererAppURL = `http://localhost:${rendererAppPort}`;
 export const rendererAppName = 'minsky-web';
 export const electronAppName = 'minsky-electron';
 export const backgroundColor = '#c1c1c1';
+
+// Clerk publishable key — used in both the Angular renderer and the Electron main process.
+// The frontendApi hostname is base64-encoded in the third segment of the key.
+export const CLERK_PUBLISHABLE_KEY = 'pk_test_cG9zaXRpdmUtcGhvZW5peC04NS5jbGVyay5hY2NvdW50cy5kZXYk';
 export const updateServerUrl = 'https://deployment-server-url.com'; // TODO: insert your update server url here
 
 export const defaultBackgroundColor = '#ffffff';

gui-js/libs/ui-components/src/lib/login/login.component.html

@@ -4,27 +4,13 @@
   </div>
 
   <ng-container *ngIf="!isLoading">
-    <div *ngIf="isAuthenticated; else signInTemplate">
+    <div *ngIf="isAuthenticated; else notSignedIn">
       <p class="signed-in-message">You are signed in.</p>
       <button mat-raised-button color="warn" (click)="onSignOut()">Sign Out</button>
     </div>
 
-    <ng-template #signInTemplate>
+    <ng-template #notSignedIn>
       <p *ngIf="errorMessage" class="error-message" role="alert">{{ errorMessage }}</p>
-      <form class="sign-in-form" (ngSubmit)="onSignIn()" #signInForm="ngForm" novalidate>
-        <mat-form-field appearance="outline">
-          <mat-label>Email</mat-label>
-          <input matInput type="email" [(ngModel)]="email" name="email" autocomplete="email" required>
-        </mat-form-field>
-        <mat-form-field appearance="outline">
-          <mat-label>Password</mat-label>
-          <input matInput type="password" [(ngModel)]="password" name="password" autocomplete="current-password" required>
-        </mat-form-field>
-        <button mat-raised-button color="primary" type="submit" [disabled]="isSigningIn || !email || !password">
-          <mat-spinner *ngIf="isSigningIn" diameter="20" class="button-spinner"></mat-spinner>
-          {{ isSigningIn ? 'Signing in…' : 'Sign In' }}
-        </button>
-      </form>
     </ng-template>
   </ng-container>
 </div>

gui-js/libs/ui-components/src/lib/login/login.component.scss

@@ -17,4 +17,4 @@
 
 .signed-in-message {
   margin-bottom: 16px;
-}
+}

gui-js/libs/ui-components/src/lib/login/login.component.ts

@@ -1,9 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { ClerkService } from '@minsky/core';
 import { ElectronService } from '@minsky/core';
@@ -17,20 +14,14 @@ import { take } from 'rxjs';
   standalone: true,
   imports: [
     CommonModule,
-    FormsModule,
     MatButtonModule,
-    MatFormFieldModule,
-    MatInputModule,
     MatProgressSpinnerModule,
   ],
 })
 export class LoginComponent implements OnInit {
   isLoading = true;
-  isSigningIn = false;
   errorMessage = '';
   isAuthenticated = false;
-  email = '';
-  password = '';
 
   constructor(
     private clerkService: ClerkService,
@@ -66,20 +57,6 @@ export class LoginComponent implements OnInit {
     }
   }
 
-  async onSignIn() {
-    this.isSigningIn = true;
-    this.errorMessage = '';
-    try {
-      await this.clerkService.signInWithEmailPassword(this.email, this.password);
-      this.isAuthenticated = true;
-      this.electronService.closeWindow();
-    } catch (err: any) {
-      this.errorMessage = err?.message ?? 'Sign in failed.';
-    } finally {
-      this.isSigningIn = false;
-    }
-  }
-
   async onSignOut() {
     this.isLoading = true;
     this.errorMessage = '';