- {errorMessage}
-
- {/if}
-
-
-
-
-
-
-
+
+ {#if errorMessage}
+
- 🔒 Deine Authentifizierungsdaten werden lokal gespeichert
-
-
+
+ 🔒 Deine Authentifizierungsdaten werden lokal gespeichert
+
+
From 8cf21273a031d13c4eb95096cb3537a7507d2150 Mon Sep 17 00:00:00 2001
From: hugotiburtino <45924645+hugotiburtino@users.noreply.github.com>
Date: Fri, 3 Apr 2026 11:17:51 -0300
Subject: [PATCH 2/4] remove dead code
---
src/lib/stores/syncManager.svelte.ts | 3 ---
1 file changed, 3 deletions(-)
diff --git a/src/lib/stores/syncManager.svelte.ts b/src/lib/stores/syncManager.svelte.ts
index d58d2b43..5f5511b4 100644
--- a/src/lib/stores/syncManager.svelte.ts
+++ b/src/lib/stores/syncManager.svelte.ts
@@ -119,10 +119,7 @@ export class SyncManager {
}
public updateSigner(signer: NDKSigner | undefined): void {
- const wasSigner = this.signer ? 'yes' : 'no';
- const isSigner = signer ? 'yes' : 'no';
this.signer = signer;
- // console.log(`[SyncManager] Signer updated: ${wasSigner} ${isSigner}`);
if (signer && this.isOnline && this.eventQueue.length > 0) {
console.log(`[SyncManager] New signer available! Syncing ${this.eventQueue.length} queued event(s)...`);
this.syncQueue();
From 546131663db284693640b431fc3a3c993cbd31b2 Mon Sep 17 00:00:00 2001
From: hugotiburtino <45924645+hugotiburtino@users.noreply.github.com>
Date: Fri, 3 Apr 2026 11:58:09 -0300
Subject: [PATCH 3/4] fix e2e test
---
src/routes/cardsboard/LoginDialog.svelte | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/routes/cardsboard/LoginDialog.svelte b/src/routes/cardsboard/LoginDialog.svelte
index 3ae30918..dc88d8ad 100644
--- a/src/routes/cardsboard/LoginDialog.svelte
+++ b/src/routes/cardsboard/LoginDialog.svelte
@@ -239,7 +239,7 @@
isLoading = false;
}
}}
- disabled={isLoading}
+ disabled={isLoading || !nsecInput.trim()}
variant="outline"
class="w-full"
>
@@ -288,7 +288,7 @@
disabled={isLoading || !nip46ConnectionString.trim()}
variant="outline"
class="w-full"
- >
+ >
{#if isLoading}
Verbinde mit Remote Signer...
{:else}
From fa7b4bfc9838913a38915ca614742c7ea021090e Mon Sep 17 00:00:00 2001
From: hugotiburtino <45924645+hugotiburtino@users.noreply.github.com>
Date: Wed, 8 Apr 2026 00:12:00 -0300
Subject: [PATCH 4/4] feat(bunker): add qr code connection, it can only be
tested in deployment
---
src/lib/components/auth/LoginSheet.svelte | 274 ++++++++++++++++++----
src/lib/stores/authStore.svelte.ts | 128 ++++++++++
src/routes/cardsboard/LoginDialog.svelte | 269 +++++++++++++++++----
3 files changed, 588 insertions(+), 83 deletions(-)
diff --git a/src/lib/components/auth/LoginSheet.svelte b/src/lib/components/auth/LoginSheet.svelte
index 2ca26840..17ad2ace 100644
--- a/src/lib/components/auth/LoginSheet.svelte
+++ b/src/lib/components/auth/LoginSheet.svelte
@@ -1,5 +1,6 @@
!newOpen && onClose()}>
-
-
+
+
- Remote Signer (NIP-46) verwenden — URL des Signer-Services und optionaler Pubkey des Signers. -
- - + {#if errorMessage} +
+ {errorMessage}
+ {/if}
- {#if errorMessage}
-
- {errorMessage}
-
+
+
- - ⚠️ Remote Signing: Vertraue nur Signer, denen du vertraust. Private Keys verbleiben beim Signer. -
+ +
+
+
-
-
+
+
+
+
+ So funktioniert's:
+-
+
- Öffne dein Nostr-Wallet +
- Erstelle eine neue "Bunker"-Verbindung +
- Kopiere die Bunker-URL (beginnt mit
bunker://)
+ - Füge sie hier ein und klicke auf "Mit NIP-46 verbinden" +
+ {errorMessage}
+
+ {/if}
+
+
+
-
+
-
+
@@ -209,49 +313,135 @@
-
- Bunker-Verbindungszeichenfolge
-
-
-
- - Verbinde dich mit einem Remote Signer via NIP-46 (Nostr Connect). Unterstützt nsec.app, Amber und andere Bunker. -
-
-
+ {#if !qrCodeDataUrl}
+
+ ;
+ }> {
+ try {
+ this.isLoading = true;
+ this.errorMessage = null;
+
+ console.log('[AuthStore] Starting NIP-46 QR generation...');
+
+ // Get user's configured relays from NDK pool
+ const userRelays = Array.from(this.ndk.pool?.relays.values() || [])
+ .map(relay => relay.url)
+ .filter(url => url && url.startsWith('wss://'));
+
+ console.log('[AuthStore] Using relays for NIP-46:', userRelays);
+
+ // Create local signer (ephemeral keypair for this session)
+ console.log('[AuthStore] Creating local signer...');
+ const localSigner = NDKPrivateKeySigner.generate();
+
+ // Create NIP-46 signer that will wait for remote connection
+ console.log('[AuthStore] Creating NIP-46 signer...');
+ const remoteSigner = new NDKNip46Signer(this.ndk, undefined, localSigner);
+
+ // Try createAccount with a 5-second timeout
+ const createAccountWithTimeout = () => {
+ return Promise.race([
+ remoteSigner.createAccount(),
+ new Promise((_, reject) =>
+ setTimeout(() => reject(new Error('createAccount timeout - constructing URL manually')), 5000)
+ )
+ ]);
+ };
+
+ let nostrconnectUrl: string;
+ try {
+ nostrconnectUrl = await createAccountWithTimeout();
+ console.log('[AuthStore] createAccount() succeeded');
+ } catch (timeoutError) {
+ // Fallback: Construct the URL manually using user's configured relays
+ console.warn('[AuthStore] createAccount() timed out, using manual URL construction');
+ const localPubkey = await localSigner.user();
+ const pubkeyHex = localPubkey.pubkey;
+
+ // Build relay parameters - include all user relays for better connectivity
+ const relayParams = userRelays.map(url => `relay=${encodeURIComponent(url)}`).join('&');
+ const metadata = encodeURIComponent(JSON.stringify({name: 'Kanban Board', url: window.location.origin}));
+
+ nostrconnectUrl = `nostrconnect://${pubkeyHex}?${relayParams}&metadata=${metadata}`;
+ console.log('[AuthStore] Manual URL construction complete with', userRelays.length, 'relays');
+ }
+
+ console.log('🔗 Generated nostrconnect URL:', nostrconnectUrl.substring(0, 80) + '...');
+
+ // ✅ IMPORTANT: Set loading to false after URL generation
+ // The waitForApproval will handle its own loading state
+ this.isLoading = false;
+ // Return URL and a promise that resolves when connection is approved
+ return {
+ url: nostrconnectUrl,
+ waitForApproval: async () => {
+ console.log('[AuthStore] Waiting for mobile approval...');
+ this.isLoading = true;
+
+ // Set the signer and wait for it to be ready
+ this.ndk.signer = remoteSigner;
+
+ // Wait for remote app to approve (this will block until approved)
+ const user = await remoteSigner.blockUntilReady();
+
+ console.log('[AuthStore] Mobile approval received!');
+
+ // Fetch user profile
+ await user.fetchProfile();
+
+ this.currentUser = user;
+ await this.saveSession(user, "nip46");
+
+ // Update SyncManager
+ try {
+ getSyncManager().updateSigner(remoteSigner);
+ console.log('✅ SyncManager signer updated after NIP-46 QR login');
+
+ const { reconnectAuthRelays } = await import('./syncManager.svelte.js');
+ await reconnectAuthRelays();
+ } catch (error) {
+ console.warn('⚠️ SyncManager signer update warning:', error);
+ }
+
+ // Load boards from Nostr
+ try {
+ const { boardStore } = await import('./kanbanStore.svelte.js');
+ boardStore.updateBoardAuthor?.();
+ await boardStore.onAuthChanged?.();
+ await boardStore.loadBoardsFromNostrForCurrentUser?.();
+ boardStore.subscribeToBoardUpdatesForCurrentUser?.();
+ console.log('[AuthStore] ✅ Boards synced from Nostr after NIP-46 QR login');
+ } catch (error) {
+ console.warn('[AuthStore] ⚠️ Failed to sync boards from Nostr after NIP-46 QR login:', error);
+ }
+
+ this.isLoading = false;
+ return user;
+ }
+ };
+ } catch (error) {
+ this.isLoading = false;
+ const { message = 'NIP-46 QR generation failed' } = error as Error;
+ this.errorMessage = message;
+ console.error('[AuthStore] QR generation error:', error);
+ console.error('[AuthStore] Error details:', {
+ message: (error as Error).message,
+ stack: (error as Error).stack
+ });
+ toast.error(message);
+ return Promise.reject(error);
+ }
}
/**
@@ -1016,6 +1141,9 @@ class AuthStoreProxy {
loginWithNip46(relayUrl: string) {
return AuthStoreWrapper.getInstance().loginWithNip46(relayUrl);
}
+ generateNip46QRCode() {
+ return AuthStoreWrapper.getInstance().generateNip46QRCode();
+ }
logout() {
return AuthStoreWrapper.getInstance().logout();
}
diff --git a/src/routes/cardsboard/LoginDialog.svelte b/src/routes/cardsboard/LoginDialog.svelte
index dc88d8ad..5056c369 100644
--- a/src/routes/cardsboard/LoginDialog.svelte
+++ b/src/routes/cardsboard/LoginDialog.svelte
@@ -10,9 +10,14 @@
import { Label } from "$lib/components/ui/label/index.js";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "$lib/components/ui/tabs/index.js";
import { authStore } from "$lib/stores/authStore.svelte.js";
+ import QRCode from 'qrcode';
import LogInIcon from "@lucide/svelte/icons/log-in";
import UserIcon from "@lucide/svelte/icons/user";
import KeyRoundIcon from "@lucide/svelte/icons/key-round";
+ import QrCodeIcon from "@lucide/svelte/icons/qr-code";
+ import SmartphoneIcon from "@lucide/svelte/icons/smartphone";
+ import CopyIcon from "@lucide/svelte/icons/copy";
+ import CheckIcon from "@lucide/svelte/icons/check";
let { open = $bindable(false) }: { open: boolean } = $props();
@@ -21,6 +26,13 @@
let isLoading = $derived(authStore.isLoading);
let errorMessage = $derived(authStore.errorMessage);
let isAuthenticated = $derived(authStore.isAuthenticated);
+
+ // QR Code state
+ let qrCodeDataUrl = $state(null);
+ let connectionUrl = $state(null);
+ let isGeneratingQr = $state(false);
+ let isWaitingForApproval = $state(false);
+ let copied = $state(false);
// Track if dialog was open when auth was NOT active, then close after fresh auth // This prevents premature closing if user was already authenticated
let wasUnauthenticatedWhenOpened = $state(false);
@@ -46,6 +58,15 @@
}, 500);
}
});
+
+ // Reset QR code when dialog closes
+ $effect(() => {
+ if (!open) {
+ resetQrCode();
+ nsecInput = '';
+ nip46ConnectionString = '';
+ }
+ });
// Browser detection
let browserType = $state<'chrome' | 'firefox' | 'safari' | 'edge' | 'opera' | 'brave' | 'unknown'>('unknown');
@@ -110,11 +131,77 @@
console.error('NIP-46 login failed:', error);
}
}
+
+ async function generateQrCode() {
+ try {
+ isGeneratingQr = true;
+
+ console.log('[LoginDialog] Starting QR code generation...');
+
+ // Generate the nostrconnect URL using authStore
+ const result = await authStore.generateNip46QRCode();
+ console.log('[LoginDialog] Got nostrconnect URL:', result.url.substring(0, 50) + '...');
+
+ connectionUrl = result.url;
+
+ // Generate QR code as data URL
+ qrCodeDataUrl = await QRCode.toDataURL(result.url, {
+ width: 300,
+ margin: 2,
+ color: {
+ dark: '#000000',
+ light: '#FFFFFF'
+ }
+ });
+
+ console.log('[LoginDialog] QR code generated successfully');
+
+ // Finish generating state
+ isGeneratingQr = false;
+
+ // Start waiting for approval
+ isWaitingForApproval = true;
+ console.log('[LoginDialog] Waiting for mobile approval...');
+
+ // Wait for the mobile app to approve (don't await - let it run in background)
+ result.waitForApproval()
+ .then((user) => {
+ if (user) {
+ console.log('[LoginDialog] Mobile approval received!');
+ isWaitingForApproval = false;
+ open = false;
+ }
+ })
+ .catch((approvalError: any) => {
+ console.error('[LoginDialog] Approval failed:', approvalError);
+ isWaitingForApproval = false;
+ });
+
+ } catch (err: any) {
+ console.error('[LoginDialog] QR generation error:', err);
+ isGeneratingQr = false;
+ isWaitingForApproval = false;
+ }
+ }
+
+ function copyToClipboard() {
+ if (connectionUrl) {
+ navigator.clipboard.writeText(connectionUrl);
+ copied = true;
+ setTimeout(() => copied = false, 2000);
+ }
+ }
+
+ function resetQrCode() {
+ qrCodeDataUrl = null;
+ connectionUrl = null;
+ isWaitingForApproval = false;
+ }
-
-
+
+
-
+
+
+
+
+
+ Scan with Mobile Bunker App
++ Use Amber or another mobile bunker app to sign in securely +
+ +
+
+
+
+
+
+
+
+ Or
+
+
+
+ Paste Bunker Connection String
+
+
+
+
+
+
+
+ {:else}
+
+
+
+
+
+
diff --git a/src/lib/stores/authStore.svelte.ts b/src/lib/stores/authStore.svelte.ts
index 1745fa1b..5efcb9d6 100644
--- a/src/lib/stores/authStore.svelte.ts
+++ b/src/lib/stores/authStore.svelte.ts
@@ -265,7 +265,132 @@ export class AuthStore {
} finally {
this.isLoading = false;
}
+ }
+
+ /**
+ * Generate NIP-46 QR Code for Mobile App Login
+ * Creates a nostrconnect URL that can be scanned by mobile apps (Amber, etc.)
+ * Returns the URL and waits for approval
+ */
+ public async generateNip46QRCode(): Promise<{
+ url: string;
+ waitForApproval: () => Promise
+
-
+ {#if qrCodeDataUrl}
+ 
+ {/if}
+
+ {#if isWaitingForApproval}
+
+
+ Waiting for approval on your mobile device...
+
+ {/if}
+
-
+ {/if}
So funktioniert's:
--
-
- Öffne dein Nostr-Wallet -
- Erstelle eine neue "Bunker"-Verbindung -
- Kopiere die Bunker-URL (beginnt mit
bunker://)
- - Füge sie hier ein und klicke auf "Mit NIP-46 verbinden" + +
- Open Amber or your bunker app on mobile +
- Scan this QR code +
- Approve the connection request +
- You'll be automatically signed in
+
-
-
-
-
+
+ {#if connectionUrl}
+ Instructions:
+-
+
+
+ {/if}
+
+
+ Or copy the connection URL:
+
+
+
+
+
+
Browser-Extension
@@ -254,53 +342,152 @@
-
-
-
-
+ {#if !qrCodeDataUrl}
+
+
+
🔒 Deine Authentifizierungsdaten werden lokal gespeichert
+
-
+
+ Scan with Mobile Bunker App
++ Use Amber or another mobile bunker app to sign in securely +
+
-
-
- {#if errorMessage}
- So funktioniert's:
--
-
- Öffne dein Nostr-Wallet -
- Erstelle eine neue "Bunker"-Verbindung -
- Kopiere die Bunker-URL (beginnt mit
bunker://)
- - Füge sie hier ein und klicke auf "Mit NIP-46 verbinden" -
+
-
+
+
+
+ Or
+
- {errorMessage}
+
+
+
-
+
+
- {/if}
-
-
+
+
+
+
+
+
How it works:
+-
+
- Open your Nostr wallet +
- Create a new "Bunker" connection +
- Copy the bunker URL (starts with
bunker://)
+ - Paste it here and click "Connect with NIP-46" +