Streamlined the login flow

Bekiboo · Bekiboo · commit f2e6e6189177 · 2026-06-02T09:06:28.000+03:00
diff --git a/infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte b/infrastructure/eid-wallet/src/lib/fragments/SplashScreen/SplashScreen.svelte
@@ -11,17 +11,13 @@ interface ISplashScreenProps {
     showDrawer?: boolean;
     oncreate?: () => void;
     onrestore?: () => void;
-    /** When provided, the drawer renders a single "Continue" button instead
-     *  of the Create / Restore pair (returning-user variant). */
-    oncontinue?: () => void;
 }
 
 const {
     open = false,
     showDrawer = false,
     oncreate,
     onrestore,
-    oncontinue,
 }: ISplashScreenProps = $props();
 
 // Roboto Condensed ships with font-display: swap, so without this gate the
@@ -97,52 +93,42 @@ onMount(async () => {
             class="absolute inset-x-0 bottom-0 bg-white rounded-t-3xl px-5 pt-5 flex flex-col gap-3"
             style="padding-bottom: max(20px, env(safe-area-inset-bottom));"
         >
-            {#if oncontinue}
-                <ButtonAction
-                    variant="solid"
-                    callback={oncontinue}
-                    class="w-full uppercase tracking-wide active:bg-primary-400"
-                >
-                    Continue
-                </ButtonAction>
-            {:else}
-                <ButtonAction
-                    variant="solid"
-                    callback={oncreate}
-                    class="w-full uppercase tracking-wide active:bg-primary-400"
-                >
-                    Create Digital Self
-                </ButtonAction>
-                <ButtonAction
-                    variant="soft"
-                    callback={onrestore}
-                    class="w-full uppercase tracking-wide text-black active:bg-primary-200"
+            <ButtonAction
+                variant="solid"
+                callback={oncreate}
+                class="w-full uppercase tracking-wide active:bg-primary-400"
+            >
+                Create Digital Self
+            </ButtonAction>
+            <ButtonAction
+                variant="soft"
+                callback={onrestore}
+                class="w-full uppercase tracking-wide text-black active:bg-primary-200"
+            >
+                Restore Digital Self
+            </ButtonAction>
+            <p
+                class="text-center font-medium text-md text-black-700/50 leading-normal"
+            >
+                By continuing you agree to our
+                <a
+                    href="https://metastate.foundation/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-primary"
                 >
-                    Restore Digital Self
-                </ButtonAction>
-                <p
-                    class="text-center font-medium text-md text-black-700/50 leading-normal"
+                    Terms &amp; Conditions
+                </a>
+                and
+                <a
+                    href="https://metastate.foundation/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="text-primary"
                 >
-                    By continuing you agree to our
-                    <a
-                        href="https://metastate.foundation/"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="text-primary"
-                    >
-                        Terms &amp; Conditions
-                    </a>
-                    and
-                    <a
-                        href="https://metastate.foundation/"
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        class="text-primary"
-                    >
-                        Privacy Policy
-                    </a>
-                </p>
-            {/if}
+                    Privacy Policy
+                </a>
+            </p>
         </div>
     {/if}
 </div>
diff --git a/infrastructure/eid-wallet/src/lib/ui/PinDots/PinDots.svelte b/infrastructure/eid-wallet/src/lib/ui/PinDots/PinDots.svelte
@@ -5,16 +5,18 @@ interface IPinDotsProps {
     pin: string;
     autofocus?: boolean;
     class?: string;
+    /** Bind a reference to the underlying hidden input so the parent can
+     *  trigger focus from elsewhere (e.g. a background tap on /login). */
+    inputEl?: HTMLInputElement | undefined;
 }
 
 let {
     pin = $bindable(""),
     autofocus = true,
     class: classes = "",
+    inputEl = $bindable<HTMLInputElement | undefined>(undefined),
 }: IPinDotsProps = $props();
 
-let inputEl: HTMLInputElement | undefined = $state();
-
 // Android WebView only attaches its IME input connection after first paint;
 // focus before that is a no-op for the soft keyboard.
 onMount(async () => {
diff --git a/infrastructure/eid-wallet/src/lib/utils/postLogin.ts b/infrastructure/eid-wallet/src/lib/utils/postLogin.ts
@@ -0,0 +1,69 @@
+import { goto } from "$app/navigation";
+import type { GlobalState } from "$lib/global";
+
+/**
+ * Shared post-authentication routine: fires the background eVault chores
+ * (health check, public-key sync, push registration) and routes the user
+ * either to the deep-link target waiting in sessionStorage or to /main.
+ *
+ * Called from both the splash (when biometric auth succeeds over the
+ * splash screen) and from /login (after PIN or fallback biometric).
+ * Keeping the logic here means we don't have to flash the user through
+ * /login on biometric success.
+ */
+export async function continueAfterSuccessfulAuth(
+    gs: GlobalState,
+): Promise<void> {
+    // Fire-and-forget post-login chores. They hit the network with no client
+    // timeout, so awaiting them here can strand the user on a spinner — the
+    // app pages will retry as needed.
+    try {
+        const vault = await gs.vaultController.vault;
+        if (vault?.ename) {
+            const ename = vault.ename;
+            void gs.vaultController
+                .checkHealth(ename)
+                .then((health) => {
+                    if (!health.healthy) {
+                        console.warn(
+                            "eVault health check failed:",
+                            health.error,
+                        );
+                    }
+                })
+                .catch((error) =>
+                    console.error("eVault health check error:", error),
+                );
+            void gs.vaultController
+                .syncPublicKey(ename)
+                .catch((error) =>
+                    console.error("Error syncing public key:", error),
+                );
+            void gs.notificationService
+                .registerDevice(ename)
+                .catch((error) =>
+                    console.error(
+                        "Error registering device for notifications:",
+                        error,
+                    ),
+                );
+        }
+    } catch (error) {
+        console.error("Error reading vault during login:", error);
+    }
+
+    const pendingDeepLink = sessionStorage.getItem("pendingDeepLink");
+    if (pendingDeepLink) {
+        try {
+            sessionStorage.setItem("deepLinkData", pendingDeepLink);
+            sessionStorage.removeItem("pendingDeepLink");
+            await goto("/scan-qr");
+            return;
+        } catch (error) {
+            console.error("Error processing pending deep link:", error);
+            sessionStorage.removeItem("pendingDeepLink");
+        }
+    }
+
+    await goto("/main");
+}
diff --git a/infrastructure/eid-wallet/src/routes/(auth)/login/+page.svelte b/infrastructure/eid-wallet/src/routes/(auth)/login/+page.svelte
@@ -4,6 +4,7 @@ import { keyboardInset } from "$lib/actions/keyboardInset";
 import type { GlobalState } from "$lib/global";
 import { LoadingSheet, PinDots } from "$lib/ui";
 import * as Button from "$lib/ui/Button";
+import { continueAfterSuccessfulAuth } from "$lib/utils/postLogin";
 import {
     type AuthOptions,
     authenticate,
@@ -12,10 +13,25 @@ import {
 import { getContext, onMount } from "svelte";
 import StepHeader from "../onboarding/steps/StepHeader.svelte";
 
+// Splash sets this when it has already tried biometric over its own screen.
+// /login then skips re-prompting and just shows the PIN UI.
+const BIOMETRIC_ATTEMPTED_KEY = "biometricAttemptedOnSplash";
+
 let pin = $state("");
 let isError = $state(false);
 let isPostAuthLoading = $state(false);
 let hasPendingDeepLink = $state(false);
+let pinInput = $state<HTMLInputElement | undefined>(undefined);
+
+// Refocus the hidden PIN input on background taps so the user doesn't have
+// to aim for the dots themselves to summon the keyboard. We skip taps that
+// land on interactive elements so their own click handlers (Clear PIN, back
+// chevron, etc.) still behave normally.
+function handleBackgroundClick(e: MouseEvent) {
+    const target = e.target as HTMLElement | null;
+    if (target?.closest('button, a, [role="button"]')) return;
+    pinInput?.focus({ preventScroll: true });
+}
 
 const getGlobalState = getContext<() => GlobalState | undefined>("globalState");
 let globalState: GlobalState | undefined = $state(undefined);
@@ -37,61 +53,6 @@ async function clearPin() {
     isError = false;
 }
 
-async function continueAfterSuccessfulAuth(gs: GlobalState) {
-    // Fire-and-forget post-login chores. These hit the network with no client
-    // timeout, so awaiting them here can strand the user on the "Logging you
-    // in…" spinner indefinitely. The app pages will retry as needed.
-    try {
-        const vault = await gs.vaultController.vault;
-        if (vault?.ename) {
-            const ename = vault.ename;
-            void gs.vaultController
-                .checkHealth(ename)
-                .then((health) => {
-                    if (!health.healthy) {
-                        console.warn(
-                            "eVault health check failed:",
-                            health.error,
-                        );
-                    }
-                })
-                .catch((error) =>
-                    console.error("eVault health check error:", error),
-                );
-            void gs.vaultController
-                .syncPublicKey(ename)
-                .catch((error) =>
-                    console.error("Error syncing public key:", error),
-                );
-            void gs.notificationService
-                .registerDevice(ename)
-                .catch((error) =>
-                    console.error(
-                        "Error registering device for notifications:",
-                        error,
-                    ),
-                );
-        }
-    } catch (error) {
-        console.error("Error reading vault during login:", error);
-    }
-
-    const pendingDeepLink = sessionStorage.getItem("pendingDeepLink");
-    if (pendingDeepLink) {
-        try {
-            sessionStorage.setItem("deepLinkData", pendingDeepLink);
-            sessionStorage.removeItem("pendingDeepLink");
-            await goto("/scan-qr");
-            return;
-        } catch (error) {
-            console.error("Error processing pending deep link:", error);
-            sessionStorage.removeItem("pendingDeepLink");
-        }
-    }
-
-    await goto("/main");
-}
-
 async function verifyAndAdvance(currentPin: string) {
     if (isPostAuthLoading) return;
     if (!globalState) return;
@@ -135,6 +96,16 @@ onMount(async () => {
     const pendingDeepLink = sessionStorage.getItem("pendingDeepLink");
     hasPendingDeepLink = !!pendingDeepLink;
 
+    // If the splash already prompted biometric over its own screen, skip the
+    // retry here and let the user enter their PIN. The flag survives the
+    // route transition but is single-use.
+    const biometricHandledBySplash =
+        sessionStorage.getItem(BIOMETRIC_ATTEMPTED_KEY) === "true";
+    if (biometricHandledBySplash) {
+        sessionStorage.removeItem(BIOMETRIC_ATTEMPTED_KEY);
+        return;
+    }
+
     // Try biometric first if available.
     if (
         (await gs.securityController.biometricSupport) &&
@@ -155,8 +126,15 @@ onMount(async () => {
 });
 </script>
 
+<!-- The PIN input is the only meaningful interaction here; keyboard users
+     focus it directly via tab. The pointer-only listener just refocuses the
+     same input when sighted users tap the background, so there's no
+     keyboard interaction worth mirroring. -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <main
     use:keyboardInset
+    onclick={handleBackgroundClick}
     class="h-dvh overflow-hidden px-[5vw] flex flex-col bg-white"
     style="padding-top: max(2svh, env(safe-area-inset-top)); padding-bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--kb-inset, 0px));"
 >
@@ -173,7 +151,7 @@ onMount(async () => {
     {/if}
 
     <section class="flex-1 flex flex-col items-center justify-center gap-6">
-        <PinDots bind:pin />
+        <PinDots bind:pin bind:inputEl={pinInput} />
 
         {#if isError}
             <p class="text-danger text-sm font-medium" role="alert">
diff --git a/infrastructure/eid-wallet/src/routes/+page.svelte b/infrastructure/eid-wallet/src/routes/+page.svelte
