From 6b77765e1c51d48a9c4a8b56b3822d4c38383771 Mon Sep 17 00:00:00 2001
From: Jure <44338+hoornet@users.noreply.github.com>
Date: Tue, 24 Mar 2026 12:45:22 +0100
Subject: [PATCH] Mask nsec on backup screen with reveal toggle

---
 src/components/onboarding/OnboardingFlow.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/onboarding/OnboardingFlow.tsx b/src/components/onboarding/OnboardingFlow.tsx
index 238985d..46d9aaf 100644
--- a/src/components/onboarding/OnboardingFlow.tsx
+++ b/src/components/onboarding/OnboardingFlow.tsx
@@ -115,6 +115,7 @@ function BackupStep({ signer, onComplete }: { signer: NDKPrivateKeySigner; onCom
   const { loginWithNsec, loginError } = useUserStore();
   const [confirmed, setConfirmed] = useState(false);
   const [copied, setCopied] = useState(false);
+  const [revealed, setRevealed] = useState(false);
   const [saving, setSaving] = useState(false);
 
   const handleCopy = () => {
@@ -146,7 +147,15 @@ function BackupStep({ signer, onComplete }: { signer: NDKPrivateKeySigner; onCom
           <span className="text-danger text-[10px] uppercase tracking-widest">Secret key (nsec) — keep private</span>
         </div>
         <div className="flex items-center gap-2 px-3 py-2">
-          <span className="text-text font-mono text-[11px] truncate flex-1 select-all">{signer.nsec}</span>
+          <span className={`font-mono text-[11px] truncate flex-1 ${revealed ? "text-text select-all" : "text-text-dim"}`}>
+            {revealed ? signer.nsec : "••••••••••••••••••••••••••••••••••••••••••••••••"}
+          </span>
+          <button
+            onClick={() => setRevealed(!revealed)}
+            className="text-[10px] text-text-dim hover:text-text transition-colors shrink-0"
+          >
+            {revealed ? "hide" : "reveal"}
+          </button>
           <button
             onClick={handleCopy}
             className="text-[10px] text-text-dim hover:text-danger transition-colors shrink-0"