Vibe passkey

...
2026-07-03 14:31:40 -04:00 · 2026-07-03 13:48:14 -04:00 · 2026-07-03 13:41:30 -04:00
27 changed files with 1241 additions and 102 deletions
@@ -8,7 +8,15 @@
      "Bash(awk '{print $NF}')",
      "Bash(dotnet test *)",
      "Bash(dotnet user-secrets *)",
-      "Bash(env)"
+      "Bash(env)",
+      "Bash(grep -E \"\\\\.\\(cs|json|razor\\)$\")",
+      "Bash(dotnet package *)",
+      "Bash(dotnet restore *)",
+      "Bash(powershell -Command '[Reflection.Assembly]::LoadFrom\\('\\\\''C:\\\\Users\\\\jonmc\\\\.nuget\\\\packages\\\\microsoft.playwright\\\\1.60.0\\\\lib\\\\netstandard2.0\\\\Microsoft.Playwright.dll'\\\\''\\) | Out-Null; [Microsoft.Playwright.IBrowserContext].GetMethods\\(\\) | Where-Object { $_.Name -match '\\\\''Virtual|Authenticator|CDP|Request'\\\\'' } | Select-Object Name')",
+      "Bash(powershell -Command 'Add-Type -Path '\\\\''C:\\\\Users\\\\jonmc\\\\.nuget\\\\packages\\\\microsoft.playwright\\\\1.60.0\\\\lib\\\\netstandard2.0\\\\Microsoft.Playwright.dll'\\\\''; [AppDomain]::CurrentDomain.GetAssemblies\\(\\) | Where-Object { $_.GetName\\(\\).Name -eq '\\\\''Microsoft.Playwright'\\\\'' } | ForEach-Object { $_.GetExportedTypes\\(\\) | Where-Object { $_.Name -match '\\\\''Virtual|Authenticator|IBrowserContext'\\\\'' } | Select-Object FullName }')",
+      "Bash(python3 -c \"import json; d=json.load\\(open\\('/c/Users/jonmc/.nuget/packages/microsoft.playwright/1.60.0/.playwright/package/api.json'\\)\\); keys=[k for k in str\\(d\\) if 'Virtual' in k or 'Authenticator' in k]; print\\(keys[:5]\\)\")",
+      "Bash(python3 -c ' *)",
+      "Bash(powershell -Command ' *)"
    ]
  }
 }
@@ -12,6 +12,7 @@ public class AppDbContext : DbContext

    public DbSet<CardNote> CardNotes { get; set; }
    public DbSet<UserDeck> UserDecks { get; set; }
+    public DbSet<PasskeyCredential> PasskeyCredentials { get; set; }

    protected override void OnModelCreating(ModelBuilder modelBuilder)
    {
@@ -15,12 +15,15 @@
    <link href="/css/app.css" rel="stylesheet"/>
    <link href="/Server.styles.css" rel="stylesheet"/>
    <script defer src="/_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"></script>
+    <script src="/js/passkey.js"></script>
    <link href="/favicon.png" rel="icon" type="image/png"/>
    <HeadOutlet/>
 </head>

 <body>
+<CascadingAuthenticationState>
    <Routes/>
+</CascadingAuthenticationState>
 <script src="_framework/blazor.web.js"></script>
 </body>

@@ -69,14 +69,21 @@
                    <option value="@f">@f</option>
                }
            </select>
+            <div class="col-picker" title="Cards per row">
+                @for (var c = 1; c <= 6; c++)
+                {
+                    var cols = c;
+                    <button class="col-btn @(gridColumns == cols ? "active" : "")" @onclick="() => gridColumns = cols">@cols</button>
+                }
+            </div>
        </div>

-        <div class="browser-grid">
+        <div class="browser-grid" style="--grid-cols: @gridColumns">
            @foreach (var card in BrowserCards)
            {
                var count = CountInDeck(card.Name);
                var maxed = count >= 3;
-                <div class="browser-card @(count > 0 ? "in-deck" : "") @(maxed ? "maxed" : "")"
+                <div @key="card.Name" class="browser-card @(count > 0 ? "in-deck" : "") @(maxed ? "maxed" : "")"
                     @onclick="() => AddCard(card)"
                     title="@(count > 0 ? $"{card.Name} ({count}/3)" : card.Name)">
                    <div class="browser-card-img">
@@ -239,6 +246,7 @@
    private string search = "";
    private string categoryFilter = "";
    private string factionFilter = "";
+    private int gridColumns = 4;

    private bool showDiverPicker;
    private int activeDiverSlot;
@@ -306,7 +314,13 @@
        }
    }

-    private int CountInDeck(string name) => deckCards.Count(c => c == name);
+    private Dictionary<string, int> _deckCounts = new();
+
+    private void RebuildDeckCounts() =>
+        _deckCounts = deckCards.GroupBy(n => n).ToDictionary(g => g.Key, g => g.Count());
+
+    private int CountInDeck(string name) =>
+        _deckCounts.TryGetValue(name, out var c) ? c : 0;

    protected override async Task OnParametersSetAsync()
    {
@@ -331,23 +345,27 @@
        deckNotes = deck.Notes ?? "";
        deckCards = new List<string>(deck.Cards);
        divers = new List<string>(deck.Divers);
+        RebuildDeckCounts();
    }

    private void AddCard(CardData card)
    {
        if (CountInDeck(card.Name) >= 3) return;
        deckCards.Add(card.Name);
+        RebuildDeckCounts();
    }

    private void RemoveCard(string name)
    {
        var idx = deckCards.LastIndexOf(name);
        if (idx >= 0) deckCards.RemoveAt(idx);
+        RebuildDeckCounts();
    }

    private void ClearDeck()
    {
        deckCards.Clear();
+        RebuildDeckCounts();
    }

    private void OpenDiverPicker(int slot)
@@ -3,13 +3,14 @@
    display: flex;
    align-items: center;
    gap: 0.75rem;
-    padding: 0.75rem 1.25rem;
+    padding: 0.6rem 1.25rem;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 100;
+    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
 }

 .deck-name-input {
@@ -17,14 +18,36 @@
    min-width: 180px;
    max-width: 360px;
    font-weight: 600;
+    background: var(--bg-elevated);
+    border-color: var(--border);
+    color: var(--text-primary);
+}
+
+.deck-name-input:focus {
+    background: var(--bg-elevated);
+    border-color: var(--accent);
+    color: var(--text-primary);
+    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.18);
 }

 .season-input {
-    width: 120px;
+    width: 110px;
+    background: var(--bg-elevated);
+    border-color: var(--border);
+    color: var(--text-primary);
+}
+
+.season-input:focus {
+    background: var(--bg-elevated);
+    border-color: var(--accent);
+    color: var(--text-primary);
+    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.18);
 }

 .save-btn {
    white-space: nowrap;
+    font-weight: 600;
+    letter-spacing: 0.02em;
 }

 .validity-badge {
@@ -33,7 +56,7 @@
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
-    padding: 0.3rem 0.7rem;
+    padding: 0.3rem 0.75rem;
    border-radius: 100px;
    white-space: nowrap;
 }
@@ -41,13 +64,13 @@
 .badge-valid {
    background: rgba(102, 187, 106, 0.15);
    color: #66bb6a;
-    border: 1px solid rgba(102, 187, 106, 0.3);
+    border: 1px solid rgba(102, 187, 106, 0.35);
 }

 .badge-invalid {
    background: rgba(255, 171, 64, 0.12);
    color: #ffab40;
-    border: 1px solid rgba(255, 171, 64, 0.3);
+    border: 1px solid rgba(255, 171, 64, 0.35);
 }

 .save-toast {
@@ -73,28 +96,161 @@
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--border);
+    background: var(--bg-primary);
 }

+/* ── Category Tabs ── */
 .browser-panel .category-tabs {
    display: flex;
-    gap: 0.4rem;
-    padding: 0.75rem 1rem 0;
+    gap: 0.35rem;
+    padding: 0.75rem 1rem 0.6rem;
    flex-wrap: wrap;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-surface);
 }

+.tab {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.35rem 0.85rem;
+    border-radius: 100px;
+    border: 1px solid var(--border);
+    background: var(--bg-elevated);
+    color: var(--text-muted);
+    font-size: 0.78rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    letter-spacing: 0.02em;
+}
+
+.tab:hover {
+    border-color: rgba(108, 99, 255, 0.45);
+    color: var(--text-primary);
+    background: rgba(108, 99, 255, 0.08);
+}
+
+.tab.active {
+    background: var(--accent);
+    border-color: var(--accent);
+    color: #fff;
+    box-shadow: 0 2px 10px rgba(108, 99, 255, 0.35);
+}
+
+/* ── Filter Bar ── */
 .browser-panel .filter-bar {
-    padding: 0.5rem 1rem;
+    padding: 0.6rem 1rem;
    display: flex;
    gap: 0.5rem;
+    align-items: center;
+    background: var(--bg-surface);
+    border-bottom: 1px solid var(--border);
 }

+.search-wrapper {
+    position: relative;
+    flex: 1;
+}
+
+.search-icon {
+    position: absolute;
+    left: 0.6rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    pointer-events: none;
+}
+
+.search-input {
+    padding-left: 2rem;
+    background: var(--bg-elevated);
+    border-color: var(--border);
+    color: var(--text-primary);
+    font-size: 0.85rem;
+}
+
+.search-input:focus {
+    background: var(--bg-elevated);
+    border-color: var(--accent);
+    color: var(--text-primary);
+    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
+}
+
+.search-clear {
+    position: absolute;
+    right: 0.4rem;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    color: var(--text-muted);
+    cursor: pointer;
+    padding: 0.15rem 0.3rem;
+    font-size: 0.7rem;
+    display: flex;
+    align-items: center;
+}
+
+.search-clear:hover { color: var(--text-primary); }
+
+.filter-select {
+    width: 130px;
+    flex-shrink: 0;
+    background: var(--bg-elevated);
+    border-color: var(--border);
+    color: var(--text-primary);
+    font-size: 0.82rem;
+}
+
+.filter-select:focus {
+    background: var(--bg-elevated);
+    border-color: var(--accent);
+    color: var(--text-primary);
+    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.15);
+}
+
+/* ── Column Picker ── */
+.col-picker {
+    display: flex;
+    gap: 2px;
+    flex-shrink: 0;
+    background: var(--bg-elevated);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    padding: 2px;
+}
+
+.col-btn {
+    width: 1.6rem;
+    height: 1.6rem;
+    border: none;
+    background: none;
+    color: var(--text-muted);
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.7rem;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.12s ease;
+    padding: 0;
+}
+
+.col-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
+.col-btn.active { background: var(--accent); color: #fff; }
+
+/* ── Browser Grid ── */
 .browser-grid {
    flex: 1;
    overflow-y: auto;
-    padding: 0.5rem 1rem 1rem;
+    padding: 0.75rem 1rem 1rem;
    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
-    gap: 0.6rem;
+    grid-template-columns: repeat(var(--grid-cols, 4), 1fr);
+    column-gap: 0.6rem;
+    row-gap: 1rem;
    align-content: start;
 }

@@ -105,41 +261,51 @@
    background: var(--bg-surface);
    border: 2px solid transparent;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
+    height: 210px;
 }

 .browser-card:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 6px 20px rgba(108, 99, 255, 0.2);
-    border-color: rgba(108, 99, 255, 0.25);
+    transform: translateY(-4px) scale(1.01);
+    box-shadow: 0 8px 24px rgba(108, 99, 255, 0.28);
+    border-color: rgba(108, 99, 255, 0.45);
+    z-index: 2;
 }

 .browser-card.in-deck {
-    border-color: rgba(108, 99, 255, 0.4);
+    border-color: rgba(108, 99, 255, 0.5);
 }

 .browser-card.maxed {
-    opacity: 0.5;
+    opacity: 0.45;
    cursor: not-allowed;
 }

 .browser-card.maxed:hover {
    transform: none;
    box-shadow: none;
+    border-color: transparent;
 }

 .browser-card-img {
    position: relative;
    width: 100%;
-    aspect-ratio: 5 / 7;
+    height: calc(100% - 26px);
    overflow: hidden;
-    background: #111128;
+    background: #0e0e22;
 }

 .browser-card-img img {
+    position: absolute;
+    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
+    transition: transform 0.2s ease;
+}
+
+.browser-card:hover .browser-card-img img {
+    transform: scale(1.04);
 }

 .in-deck-count {
@@ -148,37 +314,41 @@
    right: 0.3rem;
    background: var(--accent);
    color: white;
-    font-size: 0.7rem;
+    font-size: 0.68rem;
    font-weight: 700;
-    width: 1.4rem;
-    height: 1.4rem;
+    width: 1.35rem;
+    height: 1.35rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
-    border: 1px solid rgba(255,255,255,0.2);
+    border: 1.5px solid rgba(255,255,255,0.25);
+    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
 }

 .maxed-overlay {
    position: absolute;
    inset: 0;
-    background: rgba(0,0,0,0.45);
+    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
-    font-size: 1.2rem;
-    color: rgba(255,255,255,0.5);
+    font-size: 1.4rem;
+    color: rgba(255,255,255,0.45);
 }

 .browser-card-name {
-    font-size: 0.72rem;
-    font-weight: 500;
-    padding: 0.3rem 0.4rem;
+    font-size: 0.7rem;
+    font-weight: 600;
+    padding: 0 0.45rem;
    background: var(--bg-elevated);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
+    letter-spacing: 0.01em;
+    height: 26px;
+    line-height: 26px;
 }

 /* ── Deck Panel ── */
@@ -187,7 +357,6 @@
    flex-direction: column;
    overflow-y: auto;
    background: var(--bg-surface);
-    gap: 0;
 }

 .deck-status-bar {
@@ -199,17 +368,18 @@
    position: sticky;
    top: 0;
    z-index: 10;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
 }

 .card-count {
-    font-size: 1.1rem;
+    font-size: 1.05rem;
    font-weight: 700;
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
 }

-.count-denom { font-size: 0.8rem; font-weight: 400; color: var(--text-muted); }
+.count-denom { font-size: 0.78rem; font-weight: 400; color: var(--text-muted); }
 .count-ok { color: #66bb6a; }
 .count-over { color: #ef5350; }
 .count-under { color: var(--text-secondary); }
@@ -222,6 +392,7 @@
    padding: 0.75rem 1rem 0.5rem;
    border-bottom: 1px solid var(--border);
    height: 80px;
+    background: var(--bg-primary);
 }

 .curve-col {
@@ -243,23 +414,22 @@
 }

 .curve-count {
-    font-size: 0.6rem;
+    font-size: 0.58rem;
    color: var(--text-muted);
    height: 0.8rem;
    line-height: 1;
 }

 .curve-bar {
-    width: 100%;
-    background: var(--accent);
+    width: 80%;
+    background: linear-gradient(to top, var(--accent), rgba(108, 99, 255, 0.5));
    border-radius: 2px 2px 0 0;
    min-height: 2px;
-    transition: height 0.2s ease;
-    opacity: 0.8;
+    transition: height 0.25s ease;
 }

 .curve-label {
-    font-size: 0.6rem;
+    font-size: 0.58rem;
    color: var(--text-muted);
    margin-top: 2px;
 }
@@ -267,7 +437,7 @@
 /* ── Deck Card List ── */
 .deck-card-list {
    flex: 1;
-    padding: 0.5rem 0;
+    padding: 0.4rem 0;
 }

 .deck-empty {
@@ -275,9 +445,10 @@
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
-    padding: 2rem;
+    padding: 2.5rem 1rem;
    color: var(--text-muted);
-    font-size: 0.9rem;
+    font-size: 0.88rem;
+    opacity: 0.7;
 }

 .deck-empty i { font-size: 2rem; }
@@ -286,24 +457,25 @@
    display: flex;
    align-items: center;
    gap: 0.5rem;
-    padding: 0.3rem 1rem;
-    border-bottom: 1px solid rgba(42, 42, 74, 0.5);
-    transition: background 0.15s ease;
+    padding: 0.3rem 0.75rem;
+    border-bottom: 1px solid rgba(255,255,255,0.04);
+    transition: background 0.12s ease;
 }

 .deck-row:hover { background: var(--bg-hover); }

 .deck-row-img {
-    width: 28px;
-    height: 40px;
+    width: 26px;
+    height: 37px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
+    opacity: 0.9;
 }

 .deck-row-name {
    flex: 1;
-    font-size: 0.82rem;
+    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
@@ -313,42 +485,50 @@
 }

 .deck-row-cost {
-    font-size: 0.75rem;
+    font-size: 0.72rem;
    color: var(--gold);
-    font-weight: 600;
+    font-weight: 700;
    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.15rem;
 }

 .deck-row-controls {
    display: flex;
    align-items: center;
-    gap: 0.25rem;
+    gap: 0.2rem;
    flex-shrink: 0;
 }

 .count-btn {
-    width: 1.5rem;
-    height: 1.5rem;
+    width: 1.4rem;
+    height: 1.4rem;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-radius: 4px;
    cursor: pointer;
-    font-size: 0.9rem;
+    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
-    transition: background 0.15s ease;
+    transition: all 0.12s ease;
    padding: 0;
 }

-.count-btn:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--accent); }
-.count-btn:disabled { opacity: 0.35; cursor: not-allowed; }
+.count-btn:hover:not(:disabled) {
+    background: var(--bg-hover);
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
+.count-btn:disabled { opacity: 0.3; cursor: not-allowed; }

 .count-display {
-    font-size: 0.85rem;
+    font-size: 0.82rem;
    font-weight: 700;
-    width: 1.2rem;
+    width: 1.1rem;
    text-align: center;
    color: var(--accent);
 }
@@ -358,13 +538,14 @@
    display: flex;
    align-items: center;
    gap: 0.4rem;
-    padding: 0.6rem 1rem 0.4rem;
-    font-size: 0.8rem;
+    padding: 0.55rem 0.75rem 0.4rem;
+    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
-    letter-spacing: 0.06em;
+    letter-spacing: 0.08em;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
+    background: var(--bg-elevated);
 }

 .section-count {
@@ -372,7 +553,7 @@
    background: var(--bg-hover);
    padding: 0.1rem 0.5rem;
    border-radius: 100px;
-    font-size: 0.75rem;
+    font-size: 0.72rem;
 }

 .divers-section { padding-bottom: 0.5rem; }
@@ -381,12 +562,12 @@
    display: flex;
    align-items: center;
    gap: 0.6rem;
-    margin: 0.25rem 1rem;
-    padding: 0.5rem 0.75rem;
+    margin: 0.25rem 0.75rem;
+    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border);
    cursor: pointer;
-    font-size: 0.85rem;
+    font-size: 0.83rem;
    transition: all 0.15s ease;
    color: var(--text-muted);
 }
@@ -394,19 +575,24 @@
 .diver-slot.empty:hover {
    border-color: var(--accent);
    color: var(--accent);
-    background: rgba(108, 99, 255, 0.05);
+    background: rgba(108, 99, 255, 0.06);
 }

 .diver-slot.filled {
    border-style: solid;
-    border-color: rgba(108, 99, 255, 0.3);
+    border-color: rgba(108, 99, 255, 0.35);
    color: var(--text-primary);
    background: var(--bg-elevated);
 }

+.diver-slot.filled:hover {
+    border-color: rgba(108, 99, 255, 0.6);
+    box-shadow: 0 2px 8px rgba(108, 99, 255, 0.15);
+}
+
 .diver-thumb {
-    width: 28px;
-    height: 40px;
+    width: 26px;
+    height: 37px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
@@ -415,7 +601,7 @@
 .diver-name {
    flex: 1;
    font-weight: 500;
-    font-size: 0.85rem;
+    font-size: 0.83rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
@@ -429,21 +615,21 @@
    padding: 0.2rem;
    display: flex;
    align-items: center;
-    font-size: 0.9rem;
+    font-size: 0.85rem;
    flex-shrink: 0;
+    border-radius: 4px;
+    transition: all 0.12s ease;
 }

-.diver-remove:hover { color: #ef5350; }
+.diver-remove:hover { color: #ef5350; background: rgba(239, 83, 80, 0.1); }

 /* ── Notes Section ── */
-.notes-section {
-    padding-bottom: 1rem;
-}
+.notes-section { padding-bottom: 1rem; }

 .notes-input {
-    margin: 0 1rem;
-    width: calc(100% - 2rem);
-    font-size: 0.85rem;
+    margin: 0 0.75rem;
+    width: calc(100% - 1.5rem);
+    font-size: 0.82rem;
    resize: vertical;
    min-height: 80px;
    background: var(--bg-primary);
@@ -451,7 +637,22 @@
    color: var(--text-primary);
 }

+.notes-input:focus {
+    background: var(--bg-primary);
+    border-color: var(--accent);
+    color: var(--text-primary);
+    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.12);
+}
+
 /* ── Diver Picker Modal ── */
+.modal-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.6);
+    z-index: 1040;
+    backdrop-filter: blur(2px);
+}
+
 .diver-modal {
    position: fixed;
    top: 50%;
@@ -462,20 +663,27 @@
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem;
-    width: 560px;
-    max-width: 92vw;
+    width: 580px;
+    max-width: 93vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
-    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
-    animation: detail-enter 0.2s ease-out;
+    box-shadow: 0 24px 64px rgba(0,0,0,0.7), 0 0 0 1px rgba(108, 99, 255, 0.1);
+    animation: modal-enter 0.18s ease-out;
+}
+
+@keyframes modal-enter {
+    from { opacity: 0; transform: translate(-50%, -52%) scale(0.97); }
+    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
 }

 .diver-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
+    padding-bottom: 0.5rem;
+    border-bottom: 1px solid var(--border);
 }

 .diver-modal-header h5 {
@@ -498,13 +706,14 @@
    overflow: hidden;
    background: var(--bg-elevated);
    border: 2px solid transparent;
-    transition: border-color 0.15s ease, transform 0.15s ease;
+    transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    text-align: center;
 }

 .diver-picker-card:hover {
    border-color: var(--accent);
-    transform: translateY(-2px);
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(108, 99, 255, 0.25);
 }

 .diver-picker-card img {
@@ -516,13 +725,14 @@

 .diver-picker-card span {
    display: block;
-    font-size: 0.68rem;
+    font-size: 0.67rem;
    padding: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text-primary);
    background: var(--bg-elevated);
+    font-weight: 500;
 }

 /* ── Responsive ── */
@@ -546,4 +756,13 @@
    .builder-topbar {
        position: static;
    }
+
+    /* Force single column on mobile regardless of picker selection */
+    .browser-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .col-picker {
+        display: none;
+    }
 }
@@ -0,0 +1,110 @@
+@page "/login"
+@rendermode InteractiveServer
+@attribute [Microsoft.AspNetCore.Authorization.AllowAnonymous]
+@using Microsoft.AspNetCore.Components.Authorization
+@inject IJSRuntime JS
+@inject NavigationManager Nav
+@inject AuthenticationStateProvider AuthStateProvider
+
+<PageTitle>Sign In — Chrono CCG</PageTitle>
+
+<div class="login-container">
+    <div class="login-card">
+        <h1 class="login-title">Chrono CCG</h1>
+
+        @if (_error is not null)
+        {
+            <div class="alert alert-danger">@_error</div>
+        }
+
+        @if (_enrolled)
+        {
+            <p class="login-hint">Use your registered passkey to sign in.</p>
+            <button class="btn btn-primary btn-lg w-100" @onclick="SignIn" disabled="@_busy">
+                @if (_busy)
+                {
+                    <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+                }
+                Sign in with Passkey
+            </button>
+        }
+        else
+        {
+            <p class="login-hint">No passkey enrolled yet. Register your device to get started.</p>
+            <button class="btn btn-success btn-lg w-100" @onclick="Enroll" disabled="@_busy">
+                @if (_busy)
+                {
+                    <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+                }
+                Enroll Passkey
+            </button>
+        }
+    </div>
+</div>
+
+@code {
+    private bool _enrolled;
+    private bool _busy;
+    private string? _error;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+        if (authState.User.Identity?.IsAuthenticated == true)
+        {
+            Nav.NavigateTo("/", replace: true);
+            return;
+        }
+
+        try
+        {
+            using var http = new HttpClient { BaseAddress = new Uri(Nav.BaseUri) };
+            var status = await http.GetFromJsonAsync<StatusResponse>("/api/auth/status");
+            _enrolled = status?.Enrolled ?? false;
+        }
+        catch
+        {
+            _enrolled = false;
+        }
+    }
+
+    private async Task SignIn()
+    {
+        _busy = true;
+        _error = null;
+        try
+        {
+            await JS.InvokeVoidAsync("passkeyLogin");
+            Nav.NavigateTo("/", forceLoad: true);
+        }
+        catch (Exception ex)
+        {
+            _error = ex.Message;
+        }
+        finally
+        {
+            _busy = false;
+        }
+    }
+
+    private async Task Enroll()
+    {
+        _busy = true;
+        _error = null;
+        try
+        {
+            await JS.InvokeVoidAsync("passkeyEnroll");
+            Nav.NavigateTo("/", forceLoad: true);
+        }
+        catch (Exception ex)
+        {
+            _error = ex.Message;
+        }
+        finally
+        {
+            _busy = false;
+        }
+    }
+
+    private record StatusResponse(bool Enrolled, bool Authenticated);
+}
@@ -0,0 +1,29 @@
+.login-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: var(--bs-body-bg, #f8f9fa);
+}
+
+.login-card {
+    background: #fff;
+    border-radius: 12px;
+    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
+    padding: 2.5rem 2rem;
+    width: 100%;
+    max-width: 380px;
+    text-align: center;
+}
+
+.login-title {
+    font-size: 1.75rem;
+    font-weight: 700;
+    margin-bottom: 1.5rem;
+}
+
+.login-hint {
+    color: #6c757d;
+    margin-bottom: 1.25rem;
+    font-size: 0.95rem;
+}
@@ -0,0 +1,8 @@
+@inject NavigationManager Nav
+
+@code {
+    protected override void OnInitialized()
+    {
+        Nav.NavigateTo("/login", forceLoad: true);
+    }
+}
@@ -1,6 +1,10 @@
 <Router AppAssembly="@typeof(Program).Assembly" AdditionalAssemblies="new[] { typeof(Home).Assembly }">
    <Found Context="routeData">
-        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)"/>
+        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
+            <NotAuthorized>
+                <RedirectToLogin/>
+            </NotAuthorized>
+        </AuthorizeRouteView>
        <FocusOnNavigate RouteData="@routeData" Selector="h1"/>
    </Found>
 </Router>
@@ -1,5 +1,7 @@
@using System.Net.Http
@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Authorization
+@using Microsoft.AspNetCore.Components.Authorization
@using Chrono.Model
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@@ -0,0 +1,219 @@
+using System.Security.Claims;
+using Fido2NetLib;
+using Fido2NetLib.Objects;
+using Microsoft.AspNetCore.Authentication;
+using Microsoft.AspNetCore.Authentication.Cookies;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.EntityFrameworkCore;
+using Server.Models;
+
+namespace Server.Controllers;
+
+[AllowAnonymous]
+[ApiController]
+[Route("api/auth")]
+public class AuthController : ControllerBase
+{
+    private const string RegOptionsKey = "fido2.reg.options";
+    private const string AssertOptionsKey = "fido2.assert.options";
+
+    private readonly IFido2 _fido2;
+    private readonly AppDbContext _db;
+
+    public AuthController(IFido2 fido2, AppDbContext db)
+    {
+        _fido2 = fido2;
+        _db = db;
+    }
+
+    // ── Registration ──────────────────────────────────────────────────────────
+
+    [HttpPost("register/options")]
+    public async Task<IActionResult> RegisterOptions()
+    {
+        // Only allow registration when unenrolled or already authenticated
+        var hasCredentials = await _db.PasskeyCredentials.AnyAsync();
+        if (hasCredentials && !User.Identity!.IsAuthenticated)
+            return Forbid();
+
+        var user = new Fido2User
+        {
+            Id = Guid.NewGuid().ToByteArray(),
+            Name = "owner",
+            DisplayName = "Owner"
+        };
+
+        var existingKeys = await _db.PasskeyCredentials
+            .Select(c => new PublicKeyCredentialDescriptor(c.CredentialId))
+            .ToListAsync();
+
+        var options = _fido2.RequestNewCredential(new RequestNewCredentialParams
+        {
+            User = user,
+            ExcludeCredentials = existingKeys,
+            AuthenticatorSelection = new AuthenticatorSelection
+            {
+                ResidentKey = ResidentKeyRequirement.Required,
+                UserVerification = UserVerificationRequirement.Required,
+            },
+            AttestationPreference = AttestationConveyancePreference.None,
+        });
+
+        HttpContext.Session.SetString(RegOptionsKey, options.ToJson());
+        return Ok(options);
+    }
+
+    [HttpPost("register/complete")]
+    public async Task<IActionResult> RegisterComplete([FromBody] AuthenticatorAttestationRawResponse attestationResponse)
+    {
+        var json = HttpContext.Session.GetString(RegOptionsKey);
+        if (json is null) return BadRequest("Session expired. Please retry enrollment.");
+
+        var options = CredentialCreateOptions.FromJson(json);
+        HttpContext.Session.Remove(RegOptionsKey);
+
+        var hasCredentials = await _db.PasskeyCredentials.AnyAsync();
+        if (hasCredentials && !User.Identity!.IsAuthenticated)
+            return Forbid();
+
+        IsCredentialIdUniqueToUserAsyncDelegate isUnique = async (args, _) =>
+            !await _db.PasskeyCredentials.AnyAsync(c => c.CredentialId == args.CredentialId);
+
+        var result = await _fido2.MakeNewCredentialAsync(new MakeNewCredentialParams
+        {
+            AttestationResponse = attestationResponse,
+            OriginalOptions = options,
+            IsCredentialIdUniqueToUserCallback = isUnique,
+        });
+
+        var credential = new PasskeyCredential
+        {
+            CredentialId = result.Id,
+            PublicKey = result.PublicKey,
+            SignCount = result.SignCount,
+            UserHandle = result.User.Id,
+            AaGuid = result.AaGuid.ToString(),
+        };
+        _db.PasskeyCredentials.Add(credential);
+        await _db.SaveChangesAsync();
+
+        var claims = new[] { new Claim(ClaimTypes.Name, "owner") };
+        var identity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
+        await HttpContext.SignInAsync(
+            CookieAuthenticationDefaults.AuthenticationScheme,
+            new ClaimsPrincipal(identity),
+            new AuthenticationProperties { IsPersistent = true });
+
+        return Ok(new { message = "Passkey enrolled and authenticated." });
+    }
+
+    // ── Authentication ────────────────────────────────────────────────────────
+
+    [HttpPost("login/options")]
+    public async Task<IActionResult> LoginOptions()
+    {
+        var existingKeys = await _db.PasskeyCredentials
+            .Select(c => new PublicKeyCredentialDescriptor(c.CredentialId))
+            .ToListAsync();
+
+        var options = _fido2.GetAssertionOptions(new GetAssertionOptionsParams
+        {
+            AllowedCredentials = existingKeys,
+            UserVerification = UserVerificationRequirement.Required,
+        });
+
+        HttpContext.Session.SetString(AssertOptionsKey, options.ToJson());
+        return Ok(options);
+    }
+
+    [HttpPost("login/complete")]
+    public async Task<IActionResult> LoginComplete([FromBody] AuthenticatorAssertionRawResponse assertionResponse)
+    {
+        var json = HttpContext.Session.GetString(AssertOptionsKey);
+        if (json is null) return BadRequest("Session expired. Please retry sign-in.");
+
+        var options = AssertionOptions.FromJson(json);
+        HttpContext.Session.Remove(AssertOptionsKey);
+
+        // assertionResponse.RawId contains the credential ID as raw bytes
+        var credentialId = assertionResponse.RawId;
+        var allCredentials = await _db.PasskeyCredentials.ToListAsync();
+        var stored = allCredentials.FirstOrDefault(c => c.CredentialId.SequenceEqual(credentialId));
+
+        if (stored is null) return Unauthorized("Credential not recognized.");
+
+        IsUserHandleOwnerOfCredentialIdAsync isOwner = (args, _) =>
+            Task.FromResult(args.UserHandle.SequenceEqual(stored.UserHandle));
+
+        var result = await _fido2.MakeAssertionAsync(new MakeAssertionParams
+        {
+            AssertionResponse = assertionResponse,
+            OriginalOptions = options,
+            StoredPublicKey = stored.PublicKey,
+            StoredSignatureCounter = (uint)stored.SignCount,
+            IsUserHandleOwnerOfCredentialIdCallback = isOwner,
+        });
+
+        stored.SignCount = result.SignCount;
+        await _db.SaveChangesAsync();
+
+        var claims = new[] { new Claim(ClaimTypes.Name, "owner") };
+        var identity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
+        await HttpContext.SignInAsync(
+            CookieAuthenticationDefaults.AuthenticationScheme,
+            new ClaimsPrincipal(identity),
+            new AuthenticationProperties { IsPersistent = true });
+
+        return Ok(new { message = "Authenticated." });
+    }
+
+    // ── Logout ────────────────────────────────────────────────────────────────
+
+    [HttpPost("logout")]
+    public async Task<IActionResult> Logout()
+    {
+        await HttpContext.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
+        return Ok();
+    }
+
+    // ── Status ────────────────────────────────────────────────────────────────
+
+    [HttpGet("status")]
+    public async Task<IActionResult> Status()
+    {
+        var hasCredentials = await _db.PasskeyCredentials.AnyAsync();
+        return Ok(new
+        {
+            enrolled = hasCredentials,
+            authenticated = User.Identity?.IsAuthenticated ?? false,
+        });
+    }
+
+    // ── Dev-only test helpers (Development environment only) ──────────────────
+
+    [HttpPost("dev-login")]
+    public async Task<IActionResult> DevLogin([FromServices] IWebHostEnvironment env)
+    {
+        if (!env.IsDevelopment()) return NotFound();
+
+        var claims = new[] { new Claim(ClaimTypes.Name, "owner") };
+        var identity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
+        await HttpContext.SignInAsync(
+            CookieAuthenticationDefaults.AuthenticationScheme,
+            new ClaimsPrincipal(identity),
+            new AuthenticationProperties { IsPersistent = false });
+
+        return Ok(new { message = "Dev login successful." });
+    }
+
+    [HttpDelete("credentials")]
+    public async Task<IActionResult> DeleteAllCredentials([FromServices] IWebHostEnvironment env)
+    {
+        if (!env.IsDevelopment()) return NotFound();
+
+        _db.PasskeyCredentials.RemoveRange(_db.PasskeyCredentials);
+        await _db.SaveChangesAsync();
+        return Ok(new { message = "All credentials deleted." });
+    }
+}
@@ -1,9 +1,11 @@
+using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.EntityFrameworkCore;
 using Server.Models;

 namespace Server.Controllers;

+[Authorize]
 [ApiController]
 [Route("api/[controller]")]
 public class DecksController : ControllerBase
@@ -1,8 +1,10 @@
 using Chrono.Model;
+using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;

 namespace Server.Controllers;

+[Authorize]
 [ApiController]
 [Route("api/[controller]")]
 public class NotesController : ControllerBase
@@ -0,0 +1,110 @@
+// <auto-generated />
+using System;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+using Server;
+
+#nullable disable
+
+namespace Server.Migrations
+{
+    [DbContext(typeof(AppDbContext))]
+    [Migration("20260703120000_AddPasskeyCredentials")]
+    partial class AddPasskeyCredentials
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "10.0.9")
+                .HasAnnotation("Relational:MaxIdentifierLength", 63);
+
+            NpgsqlModelBuilderExtensions.UseIdentityByDefaultColumns(modelBuilder);
+
+            modelBuilder.Entity("Chrono.Model.CardNote", b =>
+                {
+                    b.Property<string>("CardName")
+                        .HasColumnType("text");
+
+                    b.Property<string>("Note")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.HasKey("CardName");
+
+                    b.ToTable("CardNotes");
+                });
+
+            modelBuilder.Entity("Server.Models.PasskeyCredential", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer")
+                        .HasAnnotation("Npgsql:ValueGenerationStrategy", NpgsqlValueGenerationStrategy.IdentityByDefaultColumn);
+
+                    b.Property<string>("AaGuid")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<byte[]>("CredentialId")
+                        .IsRequired()
+                        .HasColumnType("bytea");
+
+                    b.Property<byte[]>("PublicKey")
+                        .IsRequired()
+                        .HasColumnType("bytea");
+
+                    b.Property<long>("SignCount")
+                        .HasColumnType("bigint");
+
+                    b.Property<byte[]>("UserHandle")
+                        .IsRequired()
+                        .HasColumnType("bytea");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("PasskeyCredentials");
+                });
+
+            modelBuilder.Entity("Server.Models.UserDeck", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("uuid");
+
+                    b.PrimitiveCollection<string>("Cards")
+                        .IsRequired()
+                        .HasColumnType("jsonb");
+
+                    b.PrimitiveCollection<string>("Divers")
+                        .IsRequired()
+                        .HasColumnType("jsonb");
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<string>("Notes")
+                        .HasColumnType("text");
+
+                    b.Property<string>("Season")
+                        .HasColumnType("text");
+
+                    b.Property<DateTime>("UpdatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("UserDecks");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}
@@ -0,0 +1,41 @@
+using System;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Npgsql.EntityFrameworkCore.PostgreSQL.Metadata;
+
+#nullable disable
+
+namespace Server.Migrations
+{
+    /// <inheritdoc />
+    public partial class AddPasskeyCredentials : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.CreateTable(
+                name: "PasskeyCredentials",
+                columns: table => new
+                {
+                    Id = table.Column<int>(type: "integer", nullable: false)
+                        .Annotation("Npgsql:ValueGenerationStrategy", NpgsqlValueGenerationStrategy.IdentityByDefaultColumn),
+                    CredentialId = table.Column<byte[]>(type: "bytea", nullable: false),
+                    PublicKey = table.Column<byte[]>(type: "bytea", nullable: false),
+                    SignCount = table.Column<long>(type: "bigint", nullable: false),
+                    UserHandle = table.Column<byte[]>(type: "bytea", nullable: false),
+                    AaGuid = table.Column<string>(type: "text", nullable: false),
+                    CreatedAt = table.Column<DateTime>(type: "timestamp with time zone", nullable: false)
+                },
+                constraints: table =>
+                {
+                    table.PrimaryKey("PK_PasskeyCredentials", x => x.Id);
+                });
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropTable(
+                name: "PasskeyCredentials");
+        }
+    }
+}
@@ -36,6 +36,40 @@ namespace Server.Migrations
                    b.ToTable("CardNotes");
                });

+            modelBuilder.Entity("Server.Models.PasskeyCredential", b =>
+                {
+                    b.Property<int>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("integer")
+                        .HasAnnotation("Npgsql:ValueGenerationStrategy", NpgsqlValueGenerationStrategy.IdentityByDefaultColumn);
+
+                    b.Property<string>("AaGuid")
+                        .IsRequired()
+                        .HasColumnType("text");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("timestamp with time zone");
+
+                    b.Property<byte[]>("CredentialId")
+                        .IsRequired()
+                        .HasColumnType("bytea");
+
+                    b.Property<byte[]>("PublicKey")
+                        .IsRequired()
+                        .HasColumnType("bytea");
+
+                    b.Property<long>("SignCount")
+                        .HasColumnType("bigint");
+
+                    b.Property<byte[]>("UserHandle")
+                        .IsRequired()
+                        .HasColumnType("bytea");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("PasskeyCredentials");
+                });
+
            modelBuilder.Entity("Server.Models.UserDeck", b =>
                {
                    b.Property<Guid>("Id")
@@ -0,0 +1,12 @@
+namespace Server.Models;
+
+public class PasskeyCredential
+{
+    public int Id { get; set; }
+    public required byte[] CredentialId { get; set; }
+    public required byte[] PublicKey { get; set; }
+    public long SignCount { get; set; }
+    public required byte[] UserHandle { get; set; }
+    public string AaGuid { get; set; } = string.Empty;
+    public DateTime CreatedAt { get; set; } = DateTime.UtcNow;
+}
@@ -1,3 +1,5 @@
+using Fido2NetLib;
+using Microsoft.AspNetCore.Authentication.Cookies;
 using Microsoft.EntityFrameworkCore;
 using Server;
 using Server.Components;
@@ -14,6 +16,35 @@ builder.Services.AddSingleton<CardRenderingService>();
 builder.Services.AddScoped<AnalyticsService>();
 builder.Services.AddHttpClient();

+builder.Services.AddDistributedMemoryCache();
+builder.Services.AddSession(options =>
+{
+    options.IdleTimeout = TimeSpan.FromMinutes(5);
+    options.Cookie.HttpOnly = true;
+    options.Cookie.IsEssential = true;
+    options.Cookie.SecurePolicy = CookieSecurePolicy.SameAsRequest;
+});
+
+builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
+    .AddCookie(options =>
+    {
+        options.LoginPath = "/login";
+        options.LogoutPath = "/logout";
+        options.ExpireTimeSpan = TimeSpan.FromDays(30);
+        options.SlidingExpiration = true;
+        options.Cookie.HttpOnly = true;
+        options.Cookie.SecurePolicy = CookieSecurePolicy.SameAsRequest;
+        options.Cookie.SameSite = SameSiteMode.Strict;
+    });
+builder.Services.AddAuthorization();
+
+builder.Services.AddFido2(options =>
+{
+    options.ServerDomain = builder.Configuration["Fido2:ServerDomain"]!;
+    options.ServerName = builder.Configuration["Fido2:ServerName"]!;
+    options.Origins = builder.Configuration.GetSection("Fido2:Origins").Get<HashSet<string>>()!;
+    options.TimestampDriftTolerance = 300_000;
+});

 var connectionString = builder.Configuration.GetConnectionString("DefaultConnection");
 builder.Services.AddDbContext<AppDbContext>(options =>
@@ -23,7 +54,6 @@ builder.Services.AddDbContext<AppDbContext>(options =>

 var app = builder.Build();

-// Apply migrations
 using (var scope = app.Services.CreateScope())
 {
    try
@@ -41,6 +71,9 @@ using (var scope = app.Services.CreateScope())
 if (!app.Environment.IsDevelopment()) app.UseExceptionHandler("/Error");

 app.UseStaticFiles();
+app.UseSession();
+app.UseAuthentication();
+app.UseAuthorization();
 app.UseAntiforgery();

 app.MapControllers();
@@ -6,6 +6,8 @@
    </ItemGroup>

    <ItemGroup>
+        <PackageReference Include="Fido2" Version="4.0.1"/>
+        <PackageReference Include="Fido2.AspNet" Version="4.0.1"/>
        <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="10.0.9">
            <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
            <PrivateAssets>all</PrivateAssets>
@@ -5,5 +5,10 @@
      "Microsoft.AspNetCore": "Warning"
    }
  },
-  "AllowedHosts": "*"
+  "AllowedHosts": "*",
+  "Fido2": {
+    "ServerDomain": "localhost",
+    "ServerName": "Chrono CCG",
+    "Origins": [ "https://localhost:7001", "http://localhost:5000" ]
+  }
 }
@@ -0,0 +1,99 @@
+// WebAuthn helpers — base64url encoding compatible with Fido2NetLib
+
+function base64urlToBuffer(base64url) {
+    const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
+    const binary = atob(base64);
+    return Uint8Array.from(binary, c => c.charCodeAt(0)).buffer;
+}
+
+function bufferToBase64url(buffer) {
+    const bytes = new Uint8Array(buffer);
+    let binary = '';
+    for (const b of bytes) binary += String.fromCharCode(b);
+    return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+}
+
+function prepareCreationOptions(options) {
+    options.challenge = base64urlToBuffer(options.challenge);
+    options.user.id = base64urlToBuffer(options.user.id);
+    if (options.excludeCredentials) {
+        options.excludeCredentials = options.excludeCredentials.map(c => ({
+            ...c,
+            id: base64urlToBuffer(c.id),
+        }));
+    }
+    return options;
+}
+
+function prepareRequestOptions(options) {
+    options.challenge = base64urlToBuffer(options.challenge);
+    if (options.allowCredentials) {
+        options.allowCredentials = options.allowCredentials.map(c => ({
+            ...c,
+            id: base64urlToBuffer(c.id),
+        }));
+    }
+    return options;
+}
+
+function serializeAttestation(credential) {
+    return {
+        id: credential.id,
+        rawId: bufferToBase64url(credential.rawId),
+        type: credential.type,
+        response: {
+            attestationObject: bufferToBase64url(credential.response.attestationObject),
+            clientDataJSON: bufferToBase64url(credential.response.clientDataJSON),
+        },
+        extensions: credential.getClientExtensionResults(),
+    };
+}
+
+function serializeAssertion(credential) {
+    return {
+        id: credential.id,
+        rawId: bufferToBase64url(credential.rawId),
+        type: credential.type,
+        response: {
+            authenticatorData: bufferToBase64url(credential.response.authenticatorData),
+            clientDataJSON: bufferToBase64url(credential.response.clientDataJSON),
+            signature: bufferToBase64url(credential.response.signature),
+            userHandle: credential.response.userHandle
+                ? bufferToBase64url(credential.response.userHandle)
+                : null,
+        },
+        extensions: credential.getClientExtensionResults(),
+    };
+}
+
+window.passkeyEnroll = async function () {
+    const optRes = await fetch('/api/auth/register/options', { method: 'POST' });
+    if (!optRes.ok) throw new Error(await optRes.text());
+    const options = prepareCreationOptions(await optRes.json());
+
+    const credential = await navigator.credentials.create({ publicKey: options });
+
+    const completeRes = await fetch('/api/auth/register/complete', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(serializeAttestation(credential)),
+    });
+    if (!completeRes.ok) throw new Error(await completeRes.text());
+    return await completeRes.json();
+};
+
+window.passkeyLogin = async function () {
+    const optRes = await fetch('/api/auth/login/options', { method: 'POST' });
+    if (!optRes.ok) throw new Error(await optRes.text());
+    const options = prepareRequestOptions(await optRes.json());
+
+    const credential = await navigator.credentials.get({ publicKey: options });
+
+    const completeRes = await fetch('/api/auth/login/complete', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(serializeAssertion(credential)),
+    });
+    if (!completeRes.ok) throw new Error(await completeRes.text());
+    return await completeRes.json();
+};
@@ -0,0 +1,20 @@
+using Microsoft.Playwright.NUnit;
+
+namespace Tests;
+
+/// <summary>
+/// Base class for Playwright tests that require an authenticated session.
+/// Signs in via the dev-only bypass endpoint before each test.
+/// </summary>
+public abstract class AuthenticatedPageTest : PageTest
+{
+    protected const string BaseUrl = "http://localhost:5256";
+
+    [SetUp]
+    public async Task SignIn()
+    {
+        var response = await Page.APIRequestContext.PostAsync($"{BaseUrl}/api/auth/dev-login");
+        if (!response.Ok)
+            throw new Exception($"Dev login failed with status {response.Status}. Ensure the server is running in Development mode.");
+    }
+}
@@ -1,16 +1,14 @@
 using System.Text.RegularExpressions;
 using Microsoft.Playwright;
-using Microsoft.Playwright.NUnit;
 using Tests.PageObjects;

 namespace Tests;

 [Parallelizable(ParallelScope.Self)]
 [TestFixture]
-public class DeckBuilderTests : PageTest
+public class DeckBuilderTests : AuthenticatedPageTest
 {
    private DeckBuilderPage _builderPage = null!;
-    private const string BaseUrl = "http://localhost:5256";
    private Guid _savedDeckId = Guid.Empty;

    [SetUp]
@@ -1,11 +1,10 @@
-using Microsoft.Playwright.NUnit;
-using Tests.PageObjects;
+using Tests.PageObjects;

 namespace Tests;

 [Parallelizable(ParallelScope.Self)]
 [TestFixture]
-public class FeatureTests : PageTest
+public class FeatureTests : AuthenticatedPageTest
 {
    [SetUp]
    public void Setup()
@@ -0,0 +1,21 @@
+using Microsoft.Playwright;
+
+namespace Tests.PageObjects;
+
+public class LoginPage : BasePage
+{
+    public LoginPage(IPage page) : base(page) { }
+
+    public ILocator EnrollButton => Page.GetByRole(AriaRole.Button, new() { Name = "Enroll Passkey" });
+    public ILocator SignInButton => Page.GetByRole(AriaRole.Button, new() { Name = "Sign in with Passkey" });
+    public ILocator ErrorMessage => Page.Locator(".alert-danger");
+
+    public async Task GotoAsync() => await NavigateToAsync("/login");
+
+    public async Task WaitForInteractiveAsync()
+    {
+        await Page.WaitForLoadStateAsync(LoadState.NetworkIdle);
+        // Wait for Blazor circuit: either button must be visible
+        await Page.WaitForSelectorAsync("button", new PageWaitForSelectorOptions { Timeout = 10_000 });
+    }
+}
@@ -0,0 +1,142 @@
+using System.Text.RegularExpressions;
+using Microsoft.Playwright;
+using Microsoft.Playwright.NUnit;
+using Tests.PageObjects;
+
+namespace Tests;
+
+[Parallelizable(ParallelScope.Self)]
+[TestFixture]
+public class PasskeyTests : PageTest
+{
+    private const string BaseUrl = "http://localhost:5256";
+    private LoginPage _loginPage = null!;
+
+    [SetUp]
+    public async Task SetUp()
+    {
+        _loginPage = new LoginPage(Page);
+        // Clear any auth cookies and wipe all stored credentials for a clean slate
+        await Page.Context.ClearCookiesAsync();
+        using var http = new HttpClient();
+        await http.DeleteAsync($"{BaseUrl}/api/auth/credentials");
+    }
+
+    [TearDown]
+    public async Task TearDown()
+    {
+        using var http = new HttpClient();
+        await http.DeleteAsync($"{BaseUrl}/api/auth/credentials");
+        await Page.Context.ClearCookiesAsync();
+    }
+
+    [Test]
+    public async Task LoginPage_WhenNoCredentials_ShowsEnrollButton()
+    {
+        await _loginPage.GotoAsync();
+        await _loginPage.WaitForInteractiveAsync();
+
+        await Expect(_loginPage.EnrollButton).ToBeVisibleAsync(new() { Timeout = 10_000 });
+        await Expect(_loginPage.SignInButton).Not.ToBeVisibleAsync();
+    }
+
+    [Test]
+    public async Task EnrollPasskey_CompletesSuccessfully_AndRedirectsHome()
+    {
+        var authenticatorId = await Page.Context.AddVirtualAuthenticatorAsync(new VirtualAuthenticatorOptions
+        {
+            Protocol = "ctap2",
+            Transport = "internal",
+            HasResidentKey = true,
+            HasUserVerification = true,
+            IsUserVerified = true,
+        });
+
+        try
+        {
+            await _loginPage.GotoAsync();
+            await _loginPage.WaitForInteractiveAsync();
+
+            await Expect(_loginPage.EnrollButton).ToBeVisibleAsync(new() { Timeout = 10_000 });
+            await _loginPage.EnrollButton.ClickAsync();
+
+            // After enrollment + auto sign-in, redirects away from /login
+            await Page.WaitForURLAsync(new Regex(@"^http://localhost:5256(?!/login)"), new() { Timeout = 20_000 });
+        }
+        finally
+        {
+            await Page.Context.RemoveVirtualAuthenticatorAsync(authenticatorId);
+        }
+    }
+
+    [Test]
+    public async Task LoginPage_AfterEnrollment_ShowsSignInButton()
+    {
+        var authenticatorId = await Page.Context.AddVirtualAuthenticatorAsync(new VirtualAuthenticatorOptions
+        {
+            Protocol = "ctap2",
+            Transport = "internal",
+            HasResidentKey = true,
+            HasUserVerification = true,
+            IsUserVerified = true,
+        });
+
+        try
+        {
+            // Enroll first
+            await _loginPage.GotoAsync();
+            await _loginPage.WaitForInteractiveAsync();
+            await _loginPage.EnrollButton.ClickAsync();
+            await Page.WaitForURLAsync(new Regex(@"^http://localhost:5256(?!/login)"), new() { Timeout = 20_000 });
+
+            // Clear the auth cookie and navigate back to /login
+            await Page.Context.ClearCookiesAsync();
+            await _loginPage.GotoAsync();
+            await _loginPage.WaitForInteractiveAsync();
+
+            // Should show Sign In button (credential is enrolled)
+            await Expect(_loginPage.SignInButton).ToBeVisibleAsync(new() { Timeout = 10_000 });
+        }
+        finally
+        {
+            await Page.Context.RemoveVirtualAuthenticatorAsync(authenticatorId);
+        }
+    }
+
+    [Test]
+    public async Task SignInWithPasskey_AfterEnrollment_AuthenticatesSuccessfully()
+    {
+        var authenticatorId = await Page.Context.AddVirtualAuthenticatorAsync(new VirtualAuthenticatorOptions
+        {
+            Protocol = "ctap2",
+            Transport = "internal",
+            HasResidentKey = true,
+            HasUserVerification = true,
+            IsUserVerified = true,
+        });
+
+        try
+        {
+            // Enroll
+            await _loginPage.GotoAsync();
+            await _loginPage.WaitForInteractiveAsync();
+            await _loginPage.EnrollButton.ClickAsync();
+            await Page.WaitForURLAsync(new Regex(@"^http://localhost:5256(?!/login)"), new() { Timeout = 20_000 });
+
+            // Sign out (clear cookie) and return to login
+            await Page.Context.ClearCookiesAsync();
+            await _loginPage.GotoAsync();
+            await _loginPage.WaitForInteractiveAsync();
+
+            await Expect(_loginPage.SignInButton).ToBeVisibleAsync(new() { Timeout = 10_000 });
+            await _loginPage.SignInButton.ClickAsync();
+
+            // After sign-in, redirects away from /login
+            await Page.WaitForURLAsync(new Regex(@"^http://localhost:5256(?!/login)"), new() { Timeout = 20_000 });
+        }
+        finally
+        {
+            await Page.Context.RemoveVirtualAuthenticatorAsync(authenticatorId);
+        }
+    }
+}
@@ -1,14 +1,12 @@
 using System.Text.RegularExpressions;
 using Microsoft.Playwright;
-using Microsoft.Playwright.NUnit;

 namespace Tests;

 [Parallelizable(ParallelScope.Self)]
 [TestFixture]
-public class PlaywrightTests : PageTest
+public class PlaywrightTests : AuthenticatedPageTest
 {
-    private const string BaseUrl = "http://localhost:5256";

    [Test]
    public async Task HomePage_ShouldLoad()
Author	SHA1	Message	Date
6d486f49	ed95535e0a	Vibe passkey	2026-07-03 14:31:40 -04:00
6d486f49	e1cb1a81a3	...	2026-07-03 13:48:14 -04:00
6d486f49	b17f7e12db	...	2026-07-03 13:41:30 -04:00