@seamless-auth/svelte 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @seamless-auth/svelte
 
+## 0.2.0
+
+### Minor Changes
+
+- 59802e2: Add a confirmation step for magic links opened on another device.
+
+  A magic link opened on a device other than the one that asked for it now waits for the reader to approve it (auth API 0.19.0 and later). The bundled verify screens show which kind of device asked and when, and offer "Yes, sign in that device" or "No, this wasn't me". Approving signs in the requesting device and tells the reader to return to it; declining changes nothing.
+
+  `@seamless-auth/client` adds `client.confirmMagicLink(token)`, the `getMagicLinkConfirmation`, `isMagicLinkConfirmationRequired`, `describeMagicLinkDevice`, `magicLinkConfirmationPrompt` and `confirmMagicLinkSignIn` helpers, and the `MagicLinkConfirmation` and `MagicLinkDeviceClass` types. In bearer mode the verify call now sends the sign-in's ephemeral token when one is held. A custom verify screen that treats every failure as an invalid link should check `getMagicLinkConfirmation(error)` first.
+
+  The React Native README describes the new step for apps that handle magic links.
+
+### Patch Changes
+
+- Updated dependencies [59802e2]
+  - @seamless-auth/client@0.6.0
+
 ## 0.1.0
 
 ### Minor Changes

package/README.md

@@ -203,8 +203,8 @@ The screens never import a router. They navigate through an `AuthNavigator` set
 ## Headless use
 
 Every screen is a thin view over a flow in `@seamless-auth/client` (`beginSignIn`,
-`registerWithEmail`, `verifyOtp`, `watchMagicLink`, `finishMagicLinkSignIn`, `startOAuthSignIn`,
-`completeOAuthCallback`, `enrollPasskey`, and helpers). A custom screen calls the same flows with the
+`registerWithEmail`, `verifyOtp`, `watchMagicLink`, `finishMagicLinkSignIn`,
+`confirmMagicLinkSignIn`, `startOAuthSignIn`, `completeOAuthCallback`, `enrollPasskey`, and helpers). A custom screen calls the same flows with the
 session as its actions:
 
 ```ts

package/dist/screens/VerifyMagicLink.svelte

@@ -6,7 +6,8 @@
 <!--
   Where an emailed magic link lands. Verifies the link once, tells the tab that
   asked for it, and signs this tab in too when the link was opened in the same
-  browser.
+  browser. Opened on another device, the link is held and the screen asks
+  whether to sign the requesting device in.
 -->
 <script module lang="ts">
   // Tokens this page has already spent. A link can be used once, and a screen
@@ -16,7 +17,13 @@
 </script>
 
 <script lang="ts">
-  import { finishMagicLinkSignIn, type MagicLinkOutcome } from '@seamless-auth/client';
+  import {
+    confirmMagicLinkSignIn,
+    finishMagicLinkSignIn,
+    getMagicLinkConfirmation,
+    magicLinkConfirmationPrompt,
+    type MagicLinkOutcome,
+  } from '@seamless-auth/client';
   import { onMount } from 'svelte';
 
   import { getAuthNavigator, getSeamlessAuth } from '../context.js';
@@ -26,11 +33,37 @@
   const navigator = getAuthNavigator();
   let outcome = $state<MagicLinkOutcome | null>(null);
   let error = $state('');
+  let prompt = $state('');
+  let decision = $state<'pending' | 'confirming' | 'confirmed' | 'declined'>('pending');
+  let confirmError = $state('');
+  let heldToken: string | null = null;
+  let active = true;
+
+  async function confirm() {
+    if (!heldToken || decision === 'confirming') return;
+
+    decision = 'confirming';
+    confirmError = '';
+
+    const result = await confirmMagicLinkSignIn({ client: auth.client, token: heldToken });
+
+    if (!active) return;
+
+    if (result.error) {
+      decision = 'pending';
+      confirmError =
+        'We could not confirm this sign-in. The link may have expired or already been used.';
+      return;
+    }
+
+    spent.add(heldToken);
+    decision = 'confirmed';
+  }
 
   // Browser only. A server render would spend the single-use link in a request
   // that carries none of this browser's cookies.
   onMount(() => {
-    let active = true;
+    active = true;
     let redirect: ReturnType<typeof setTimeout> | undefined;
 
     void (async () => {
@@ -56,6 +89,15 @@
       if (!active) return;
 
       if (result.error) {
+        const held = getMagicLinkConfirmation(result.error);
+        if (held) {
+          // Held, not used: a remount may ask again.
+          spent.delete(token);
+          heldToken = token;
+          prompt = magicLinkConfirmationPrompt(held);
+          return;
+        }
+
         error = 'Failed to verify token';
         return;
       }
@@ -82,23 +124,72 @@
 </script>
 
 <AuthLayout>
-  <div class="sa-center">
-    <h1 class="sa-heading">Verifying your login</h1>
-
-    {#if !outcome && !error}
-      <div class="sa-spinner" aria-hidden="true"></div>
-      <p class="sa-helper-text">Please wait while we securely verify your sign-in link.</p>
-    {/if}
-    {#if outcome === 'signed-in'}
-      <p class="sa-success" role="status">Login verified. Redirecting...</p>
-    {/if}
-    {#if outcome === 'elsewhere'}
-      <p class="sa-success" role="status">
-        Login verified. Return to the device where you requested this link to continue.
-      </p>
-    {/if}
-    {#if error}
-      <p class="sa-error" role="alert">{error}</p>
+  {#if prompt}
+    {@const asking = decision === 'pending' || decision === 'confirming'}
+    <div class="sa-center">
+      <h1 class="sa-heading">Confirm this sign-in</h1>
+
+      {#if asking}
+        <p class="sa-description">{prompt}</p>
+        <p class="sa-helper-text">
+          This link was opened on a different device from the one that asked for it. Only
+          continue if you made that request.
+        </p>
+      {/if}
+      {#if decision === 'confirmed'}
+        <p class="sa-success" role="status">
+          Sign-in approved. You can return to your other device to continue.
+        </p>
+      {/if}
+      {#if decision === 'declined'}
+        <p class="sa-helper-text" role="status">
+          No one has been signed in. You can ignore the email and close this page.
+        </p>
+      {/if}
+    </div>
+
+    {#if asking}
+      <div class="sa-actions">
+        <button
+          type="button"
+          class="sa-button"
+          disabled={decision === 'confirming'}
+          onclick={() => void confirm()}
+        >
+          Yes, sign in that device
+        </button>
+        <button
+          type="button"
+          class="sa-secondary"
+          disabled={decision === 'confirming'}
+          onclick={() => (decision = 'declined')}
+        >
+          No, this wasn't me
+        </button>
+      </div>
+      {#if confirmError}
+        <p class="sa-error" role="alert">{confirmError}</p>
+      {/if}
     {/if}
-  </div>
+  {:else}
+    <div class="sa-center">
+      <h1 class="sa-heading">Verifying your login</h1>
+
+      {#if !outcome && !error}
+        <div class="sa-spinner" aria-hidden="true"></div>
+        <p class="sa-helper-text">Please wait while we securely verify your sign-in link.</p>
+      {/if}
+      {#if outcome === 'signed-in'}
+        <p class="sa-success" role="status">Login verified. Redirecting...</p>
+      {/if}
+      {#if outcome === 'elsewhere'}
+        <p class="sa-success" role="status">
+          Login verified. Return to the device where you requested this link to continue.
+        </p>
+      {/if}
+      {#if error}
+        <p class="sa-error" role="alert">{error}</p>
+      {/if}
+    </div>
+  {/if}
 </AuthLayout>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamless-auth/svelte",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Svelte bindings for Seamless Auth: a rune-based session, SvelteKit guards, and optional sign-in screens.",
   "type": "module",
   "svelte": "./dist/index.js",
@@ -70,7 +70,7 @@
     }
   },
   "dependencies": {
-    "@seamless-auth/client": "^0.5.0"
+    "@seamless-auth/client": "^0.6.0"
   },
   "sideEffects": [
     "*.css"