@nauticana/sail 1.1.31 → 1.1.33

package/README.md

@@ -2,7 +2,7 @@
 
 A shared Angular component library for building CRUD-based admin frontends. Provides table management, form handling, navigation, authentication, two-factor authentication, and trusted device management — all driven by metadata from a [keel](https://github.com/nauticana/keel) Go backend.
 
-> **Compatibility:** sail and keel are versioned in lock-step. The current line is **sail v1.1.x ↔ keel v1.2.x**; sail v1.1.31 adopts keel v1.2.100 (tenant single sign-on, DNS and HTTP-file domain verification), sail v1.1.30 adopts keel v1.2.99 (password routes; a password change signs out), sail v1.1.29 adopts keel v1.2.94 (signup: confirmation signs in, partner setup, sign-in hand-off code), sail v1.1.28 adopts keel v1.2.93 (absolute `return` for the OAuth hand-off), sail v1.1.18 adopts keel v1.2.58 (refresh-token rotation, `/public/logout`, setup intents, the realtime hub), the agency components in sail v1.1.14 require keel v1.2.41 (sail v1.1.9 needs keel v1.2.16 for the OAuth-connect layer). Earlier lines: **sail v0.5.x ↔ keel v0.5.x**, **sail v0.6.x / v0.7.x ↔ keel v0.7.x**, **sail v0.8.x ↔ keel v0.8.x**, **sail v0.9.x ↔ keel v0.9.x**. Newer sail releases extend the contract — older keel servers reject unknown endpoints with HTTP 404 / 400. The v0.8.x line additionally ships the `table_action` framework (per-table custom buttons surfaced in `TableList` / `TableSearch` / `TableEdit` / `TableDetail`); see the [Migrating to v0.7.0 §5 — TableAction](#migrating-to-v070--payout-user-payment-methods-table-actions) section for the seed shape (basis `table_action` + `authorization_object` + `authorization_object_action` rows) and the [keel/README Table Actions](https://github.com/nauticana/keel#table-actions) section for backend wiring via `handler.WrapTableAction`.
+> **Compatibility:** sail and keel are versioned in lock-step. The current line is **sail v1.1.x ↔ keel v1.2.x**; sail v1.1.33 adopts keel v1.2.106 (`prompt` on the login page, new-device step-up, sign-in sessions), sail v1.1.32 adopts keel v1.2.101 (the OAuth connect callback ticket), sail v1.1.31 adopts keel v1.2.100 (tenant single sign-on, DNS and HTTP-file domain verification), sail v1.1.30 adopts keel v1.2.99 (password routes; a password change signs out), sail v1.1.29 adopts keel v1.2.94 (signup: confirmation signs in, partner setup, sign-in hand-off code), sail v1.1.28 adopts keel v1.2.93 (absolute `return` for the OAuth hand-off), sail v1.1.18 adopts keel v1.2.58 (refresh-token rotation, `/public/logout`, setup intents, the realtime hub), the agency components in sail v1.1.14 require keel v1.2.41 (sail v1.1.9 needs keel v1.2.16 for the OAuth-connect layer). Earlier lines: **sail v0.5.x ↔ keel v0.5.x**, **sail v0.6.x / v0.7.x ↔ keel v0.7.x**, **sail v0.8.x ↔ keel v0.8.x**, **sail v0.9.x ↔ keel v0.9.x**. Newer sail releases extend the contract — older keel servers reject unknown endpoints with HTTP 404 / 400. The v0.8.x line additionally ships the `table_action` framework (per-table custom buttons surfaced in `TableList` / `TableSearch` / `TableEdit` / `TableDetail`); see the [Migrating to v0.7.0 §5 — TableAction](#migrating-to-v070--payout-user-payment-methods-table-actions) section for the seed shape (basis `table_action` + `authorization_object` + `authorization_object_action` rows) and the [keel/README Table Actions](https://github.com/nauticana/keel#table-actions) section for backend wiring via `handler.WrapTableAction`.
 
 **Recent additions:** `BaseAuthService.acceptToken(jwt)` — adopt an externally-minted JWT (registration / SSO-handoff flows) and run the full post-login sequence (store under the canonical `jwt` key, load appdata, init routes); apps must use this instead of writing `localStorage` directly. `BaseRestService.analytic<T>(endpoint, params?)` — GET a keel `analytic/<endpoint>` report and return its rows. `passwordPolicyValidator` + `BaseAuthService.ensurePasswordPolicy()` — validate passwords against keel's policy (via `SailGuiConfig.passwordPolicyUrl`); see Configuration reference.
 
@@ -16,7 +16,7 @@ A shared Angular component library for building CRUD-based admin frontends. Prov
 | **Form components** | `DynamicField`, `RecordForm`, `TableForm` |
 | **Navigation** | `Navigation` (sidenav + toolbar with menu, responsive) |
 | **Login** | `LoginComponent`, `RegisterComponent`, `ChpassComponent`, `ConfirmRegisterComponent`, `ConfirmChpassComponent` |
-| **Security** | `TwoFactorSetupComponent`, `TwoFactorVerifyComponent`, `TrustedDevicesComponent`, `AccountDeletionComponent` |
+| **Security** | `TwoFactorSetupComponent`, `TwoFactorVerifyComponent`, `TrustedDevicesComponent`, `SessionsComponent`, `AccountDeletionComponent` |
 | **Account** | `MyAccountComponent` (self-service hub), `ProfileEditorComponent` (name/locale immediate; email/phone verify-before-apply) |
 | **Auth** | `ConsentGateComponent`, `OtpInputComponent`, `SocialLoginComponent`, `SsoLoginComponent`, `SsoReturnComponent` |
 | **Billing** | `PlanSelectorComponent`, `PriceSelectorComponent`, `CheckoutButtonComponent`, `PaymentMethodsComponent`, `PortalButtonComponent`, `UsageMeterComponent`, `StatusChipComponent`, `TrialBannerComponent`, `SeatSelectorComponent`, `DunningBannerComponent` |
@@ -221,7 +221,7 @@ Key CSS classes used by components:
 
 /* Security */
 .twofactor-qr, .twofactor-backup, .backup-code-list,
-.trusted-devices-table
+.trusted-devices-table, .sessions-table
 ```
 
 ## How it works
@@ -331,6 +331,11 @@ origin, is not followed. Failures set `BaseAuthService.sessionHandoffError` (ren
 `<sail-login>`) and never redirect: 400 means keel rejected the return URL, 401 means the user
 signs in again to retry. The authorization server must allow the SPA origin by CORS.
 
+With `prompt=login` or `prompt=select_account`, `<sail-login>` holds back the stored session and
+offers sign-out (`isLoggedIn` stays false); account selection also offers `continueSession()`. A
+fresh sign-in, including its 2FA step, keeps the hand-off query. Any sign-in revokes the refresh
+token it replaces.
+
 Set `passwordPolicyUrl` to the app's public route for keel's `PublicHandler.GetPasswordPolicy`
 (e.g. `'/public/v1/auth/password/policy'`). `BaseAuthService.ensurePasswordPolicy()` fetches it
 once into the `passwordRules` signal, and `passwordPolicyValidator(() => auth.passwordRules())`
@@ -348,7 +353,7 @@ Omit the URL to skip client-side policy checks. The server stays the authoritati
 | `POST /public/otp/send` | Send OTP code to phone or email; returns opaque `otpToken` |
 | `POST /public/otp/verify` | Verify OTP code with `otpToken`, returns JWT |
 | `POST /public/otp/resend` | Re-issue OTP for an existing `otpToken` |
-| `POST /public/2fa/verify` | Login-time TOTP verification (uses `loginToken`) |
+| `POST /public/2fa/verify` | Login-time TOTP or emailed step-up code verification (uses `loginToken`) |
 | `POST /public/2fa/backup-verify` | Login-time backup-code verification |
 | `POST /public/register` | Start a signup from a `PartnerRegistration`; emails the confirmation code |
 | `POST /public/register/confirm` | Confirm `?email=&code=`; answers session tokens and the partner result (`confirmRegister`) |
@@ -367,6 +372,8 @@ Omit the URL to skip client-side policy checks. The server stays the authoritati
 | `POST /api/user/2fa/disable` | Disable 2FA — **requires password + current TOTP code** |
 | `GET /api/user/trusted-device/list` | List trusted devices |
 | `POST /api/user/trusted-device/revoke` | Revoke a trusted device |
+| `GET /api/user/sessions` | The caller's live sign-in sessions (`getSessions`) |
+| `POST /api/user/sessions/revoke` | Sign out one session `{id}` (`revokeSession`); 404 `session_not_found` |
 | `POST /api/user/logout-everywhere` | Sign out of all devices — **requires re-auth** |
 | `DELETE /api/user/account` | Soft-delete the caller's account — **requires re-auth** |
 | `GET /api/notifications` | Notification inbox page — `?before=<id>&limit=<n>`, newest first (keel v1.2.71) |
@@ -382,13 +389,13 @@ Omit the URL to skip client-side policy checks. The server stays the authoritati
 | `GET /api/billing/invoices` | Invoice history |
 | `GET /api/billing/payment-methods` | Saved payment methods |
 
-Device registration happens within `/public/2fa/verify` when `trustDevice=true`. Since **keel v0.9 / sail v0.9.0**, the trusted-device credential is a server-minted `keel_td` cookie (HttpOnly + Secure + SameSite=Strict) — not a client-supplied fingerprint. sail sets `withCredentials: true` on the login and 2FA-verify calls so the cookie round-trips; see [Enabling 2FA → Cross-origin cookie requirement](#cross-origin-cookie-requirement) below.
+Device registration happens within `/public/2fa/verify` when `trustDevice=true`. Since **keel v0.9 / sail v0.9.0**, the trusted-device credential is a server-minted `keel_td` cookie (HttpOnly + Secure + SameSite=Strict) — not a client-supplied fingerprint. sail sets `withCredentials: true` on every session-minting call (password, Google, social, OTP, 2FA and backup verify, registration confirm and exchange) so this cookie and keel's `keel_device` cookie (keel v1.2.106: a recognized device gets no new-device notice or step-up) round-trip; see [Enabling 2FA → Cross-origin cookie requirement](#cross-origin-cookie-requirement) below.
 
 ## Enabling 2FA in your project
 
 Add the 2FA verification route to your `publicRoutes` config:
 ```typescript
-import { TwoFactorVerifyComponent, TwoFactorSetupComponent, TrustedDevicesComponent } from '@nauticana/sail';
+import { SessionsComponent, TrustedDevicesComponent, TwoFactorSetupComponent, TwoFactorVerifyComponent } from '@nauticana/sail';
 
 // In publicRoutes:
 { path: 'login/2fa', component: TwoFactorVerifyComponent }
@@ -396,9 +403,12 @@ import { TwoFactorVerifyComponent, TwoFactorSetupComponent, TrustedDevicesCompon
 // In extraRoutes or authenticated routes (optional — for user self-service):
 { path: 'security/2fa', component: TwoFactorSetupComponent }
 { path: 'security/devices', component: TrustedDevicesComponent }
+{ path: 'security/sessions', component: SessionsComponent }
 ```
 
-The login flow handles 2FA automatically: when the backend returns `twoFactorRequired: true`, sail redirects to `/login/2fa`. No other code changes needed.
+The login flow redirects `twoFactorRequired` responses to `/login/2fa`. With `twoFactorMethod: 'email'`, the page explains the new-device check and hides device trust and backup codes. Sign-in refusals `signin_network` and `stepup_unavailable` have user-facing messages.
+
+`SessionsComponent` (`<sail-sessions>`) lists the sessions with their `sign_in_method` captions, marks the current one, and signs out any other.
 
 ### Cross-origin cookie requirement
 
@@ -407,7 +417,7 @@ The "trust this device" feature (keel v0.9+) is backed by a server-set HttpOnly
 1. On `POST /public/2fa/verify` with `trustDevice: true`, keel mints a 32-byte secret, stores its SHA-256, and returns the raw secret to the browser **only** as a `Set-Cookie: keel_td=…` header (never in the JSON body).
 2. On the next `POST /public/login/local` (or `/public/login/gmail`), the browser sends the `keel_td` cookie back, keel hashes it, finds the matching row, and **skips the 2FA prompt**.
 
-For the browser to store and resend that cookie, the requests must be credentialed. sail already sets `withCredentials: true` on `login()`, `loginWithGoogle()`, `verify2FALogin()`, and `verifyBackupCode()` — **you do not add this in your app code**. But the keel backend must permit credentialed CORS, or the browser drops the cookie and every login re-prompts for 2FA:
+For the browser to store and resend that cookie, the requests must be credentialed. sail already sets `withCredentials: true` on these calls — **you do not add this in your app code**. But the keel backend must permit credentialed CORS, or the browser drops the cookie and every login re-prompts for 2FA:
 
 - **Same-origin** deployments (SPA served from the same host as the API) work with no extra config — credentialed same-origin requests are always allowed.
 - **Cross-origin** deployments (SPA on a different host/port than the API) require the keel `HttpBackend` to set:
@@ -1242,8 +1252,19 @@ catalog and any routing via the outputs.
 - Each `OAuthProviderField` has a **`role`**: `credential` (sealed secret), `endpoint` (stored
   as `api_endpoint`), or `param` (OAuth authorize query param) — so field order is
   irrelevant. `icon` is a Material name or an image URL.
+- **Connect flow (keel v1.2.101).** `startOAuth` sends the signed-in user to provider consent.
+  keel's callback validates the response, parks it under a single-use ticket and redirects the
+  browser to its `FrontendReturnURL` with `?connect=<provider>&ticket=<ticket>`. The panel on
+  that page strips both parameters from the URL (hash preserved, so a reload never re-posts a
+  spent ticket), posts the ticket with the user's bearer token to `/api/oauth/<provider>/complete`,
+  then reloads and emits `connected` once the row is visible. A `connect` value that is not a
+  configured provider is ignored. keel binds the connection to the user who started the flow
+  (RFC 6749 §10.12): a 403 ("started by another user") and a 400 (expired or already used
+  ticket) show distinct messages asking the user to start again. **The page at
+  `FrontendReturnURL` must require sign-in before the panel runs.**
 - **`OAuthConnectionService`** — `startOAuth(provider, extra)` → consent URL,
-  `testConnection`, `list(entityId)` / `disconnect` (generic `partner_credential` REST), and
+  `completeOAuth(provider, ticket)` → `{status, provider}`, `testConnection`,
+  `list(entityId)` / `disconnect` (generic `partner_credential` REST), and
   `saveApiKey` (POSTs the sealed `/api/oauth/apikey`).
 
 ```html

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nauticana/sail",
-  "version": "1.1.31",
+  "version": "1.1.33",
   "description": "Metadata-driven Angular component library for CRUD admin frontends backed by the keel Go backend. Tables, forms, navigation, OTP/2FA/social auth, billing, payout onboarding.",
   "main": "src/index.ts",
   "exports": {

package/src/component/login/login_component.html

@@ -15,6 +15,17 @@
     @if (sessionHandoffError()) {
       <p class="auth-error" role="alert">{{ sessionHandoffError() }}</p>
     }
+    @if (signInPrompt(); as prompt) {
+      <p class="auth-message" role="status">
+        {{ prompt === 'login' ? 'Sign in again to continue.' : 'Choose the account to continue with.' }}
+      </p>
+      <div class="auth-actions">
+        @if (prompt === 'select_account') {
+          <button matButton="elevated" class="primary" type="button" (click)="auth.continueSession()">Continue with the signed-in account</button>
+        }
+        <button matButton type="button" (click)="auth.signOutHere()">Sign out of the current account</button>
+      </div>
+    }
     <form [formGroup]="loginForm" (ngSubmit)="login()" class="auth-form">
       <mat-form-field appearance="outline">
         <mat-label>Username</mat-label>

package/src/component/login/login_component.ts

@@ -27,7 +27,7 @@ import { SsoLoginComponent } from '../sso/sso_login';
   ],
 })
 export class LoginComponent extends BaseAsync {
-  private auth = inject(BaseAuthService);
+  protected readonly auth = inject(BaseAuthService);
   protected fb = inject(FormBuilder);
   protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
   private readonly queryParams = inject(ActivatedRoute).snapshot.queryParamMap;
@@ -35,6 +35,7 @@ export class LoginComponent extends BaseAsync {
   protected readonly passwordChanged = this.queryParams.get('passwordChanged') === 'true';
   /** OAuth session hand-off failure from BaseAuthService, shown below. */
   protected readonly sessionHandoffError = this.auth.sessionHandoffError;
+  protected readonly signInPrompt = this.auth.signInPrompt;
 
   /**
    * Auto-show the embedded SocialLoginComponent whenever at least one

package/src/component/oauth_connection/oauth_connection_panel.ts

@@ -62,21 +62,38 @@ export class OAuthConnectionPanelComponent implements OnInit {
     });
   }
 
-  // After an OAuth round-trip keel redirects back with ?<provider>=success. Record
-  // the codes (configured providers only), strip them — preserving the hash — and
-  // emit `connected` once the reload confirms the row exists (confirmSuccess).
+  // After the provider callback keel redirects back with ?connect=<provider>&ticket=…
+  // The ticket is single-use, so strip it (hash preserved) before redeeming it for
+  // the signed-in user; the reload then confirms the row exists (confirmSuccess).
   ngOnInit(): void {
     const q = new URLSearchParams(window.location.search);
-    const known = new Set(this.providers().map((p) => p.code));
-    const succeeded = new Set<string>();
-    q.forEach((value, key) => {
-      if (value === 'success' && known.has(key)) succeeded.add(key);
-    });
-    if (!succeeded.size) return;
-    this.pendingSuccess.set(succeeded);
-    for (const code of succeeded) q.delete(code);
+    const provider = q.get('connect') ?? '';
+    const ticket = q.get('ticket') ?? '';
+    if (!provider && !ticket) return;
+    q.delete('connect');
+    q.delete('ticket');
     const qs = q.toString();
     window.history.replaceState({}, '', window.location.pathname + (qs ? '?' + qs : '') + window.location.hash);
+    if (!ticket || !this.providers().some((p) => p.code === provider)) return;
+    this.busy.set(provider);
+    this.svc.completeOAuth(provider, ticket).subscribe({
+      next: () => {
+        this.busy.set('');
+        this.pendingSuccess.set(new Set([provider]));
+        this.reload(this.entityId());
+      },
+      error: (e) => {
+        this.busy.set('');
+        this.error.set(this.completeMsg(e));
+      },
+    });
+  }
+
+  private completeMsg(e: unknown): string {
+    const status = (e as { status?: number })?.status;
+    if (status === 403) return 'This connection was started by another user — start again from this account.';
+    if (status === 400) return 'The connection link expired — start again.';
+    return this.msg(e, 'Could not complete the connection.');
   }
 
   private reload(entityId: number): void {

package/src/component/security/sessions.html

@@ -0,0 +1,46 @@
+<div class="auth-container">
+  <div class="auth-card">
+    <h2 class="auth-title">Sessions</h2>
+    <p class="auth-instructions">Where your account is signed in.</p>
+
+    @if (sessions().length > 0) {
+      <table class="sessions-table">
+        <thead>
+          <tr>
+            <th>Device</th>
+            <th>Address</th>
+            <th>Signed In</th>
+            <th>Last Active</th>
+            <th><span class="cdk-visually-hidden">Actions</span></th>
+          </tr>
+        </thead>
+        <tbody>
+          @for (session of sessions(); track session.id) {
+            <tr>
+              <td>{{ session.userAgent || 'Unknown device' }} ({{ methodCaption(session.signInMethod) }})</td>
+              <td>{{ session.clientIp }}</td>
+              <td>{{ session.createdAt | date: 'short' }}</td>
+              <td>{{ session.lastSeenAt | date: 'short' }}</td>
+              <td>
+                @if (session.current) {
+                  This device
+                } @else {
+                  <button matButton type="button" (click)="revoke(session)" [disabled]="loading()">Sign out</button>
+                }
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    } @else if (!loading()) {
+      <p class="empty-state">No active sessions.</p>
+    }
+
+    @if (errorMessage()) {
+      <div class="auth-error" role="alert">{{ errorMessage() }}</div>
+    }
+    @if (successMessage()) {
+      <div class="auth-success" role="status">{{ successMessage() }}</div>
+    }
+  </div>
+</div>

package/src/component/security/sessions.ts

@@ -0,0 +1,45 @@
+import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, inject, signal } from '@angular/core';
+import { DatePipe } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { BaseAsync } from '../abstract/base_async';
+import { BaseAuthService } from '../../service/auth.service';
+import { ActiveSession } from '../../model/appdata';
+
+@Component({
+  selector: 'sail-sessions',
+  templateUrl: './sessions.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  imports: [DatePipe, MatButtonModule],
+})
+export class SessionsComponent extends BaseAsync implements OnInit {
+  private readonly auth = inject(BaseAuthService);
+
+  readonly sessions = signal<ActiveSession[]>([]);
+  private readonly methods = new Map(
+    (this.auth.getDomainValues('sign_in_method') ?? []).map((v) => [v.Value, v.Caption]));
+
+  ngOnInit() {
+    this.loadSessions();
+  }
+
+  loadSessions() {
+    this.run(this.auth.getSessions(), (sessions) => this.sessions.set(sessions), 'Failed to load sessions.');
+  }
+
+  methodCaption(code: string): string {
+    return this.methods.get(code) ?? code;
+  }
+
+  revoke(session: ActiveSession) {
+    if (!confirm(`Sign out the session on ${session.userAgent || 'an unknown device'}?`)) return;
+    this.run(
+      this.auth.revokeSession(session.id),
+      () => {
+        this.loadSessions();
+        this.successMessage.set('Session signed out.');
+      },
+      'Failed to sign out the session.',
+    );
+  }
+}

package/src/component/security/twofactor_verify.html

@@ -5,9 +5,11 @@
     </div>
   }
   <div class="auth-card">
-    <h2 class="auth-title">Two-Factor Verification</h2>
+    <h2 class="auth-title">{{ emailed ? 'Confirm Sign-In' : 'Two-Factor Verification' }}</h2>
     <p class="auth-instructions">
-      @if (useBackupCode()) {
+      @if (emailed) {
+        We emailed you a sign-in code because this device is new. Enter it to continue.
+      } @else if (useBackupCode()) {
         Enter one of your backup codes.
       } @else {
         Enter the 6-digit code from your authenticator app.
@@ -19,7 +21,7 @@
         <input matInput type="text" formControlName="code" autocomplete="one-time-code" required>
       </mat-form-field>
 
-      @if (!useBackupCode()) {
+      @if (!useBackupCode() && !emailed) {
         <div class="auth-checkbox">
           <mat-checkbox formControlName="trustDevice">
             Trust this device for 30 days
@@ -36,11 +38,13 @@
       </button>
     </form>
     <div class="auth-actions">
-      <a tabindex="0" role="button" (click)="toggleBackupCode()" (keydown.enter)="toggleBackupCode()"
-         (keydown.space)="$event.preventDefault(); toggleBackupCode()">
-        {{ useBackupCode() ? 'Use authenticator code' : 'Use a backup code instead' }}
-      </a>
-      <a routerLink="/login/local">Back to Login</a>
+      @if (!emailed) {
+        <a tabindex="0" role="button" (click)="toggleBackupCode()" (keydown.enter)="toggleBackupCode()"
+           (keydown.space)="$event.preventDefault(); toggleBackupCode()">
+          {{ useBackupCode() ? 'Use authenticator code' : 'Use a backup code instead' }}
+        </a>
+      }
+      <a routerLink="/login/local" queryParamsHandling="preserve">Back to Login</a>
     </div>
   </div>
 </div>

package/src/component/security/twofactor_verify.ts

@@ -29,6 +29,7 @@ export class TwoFactorVerifyComponent extends BaseAsync {
   protected readonly guiConfig: SailGuiConfig = inject(SAIL_GUI_CONFIG, {optional: true}) ?? DEFAULT_CONFIG;
 
   readonly useBackupCode = signal(false);
+  readonly emailed = this.auth.pendingTwoFactorMethod() === 'email';
 
   readonly verifyForm = this.fb.group({
     code: ['', [Validators.required, Validators.minLength(6)]],
@@ -58,7 +59,7 @@ export class TwoFactorVerifyComponent extends BaseAsync {
       );
     } else {
       this.run(
-        this.auth.verify2FALogin(code!, trustDevice ?? false, this.getDeviceName()),
+        this.auth.verify2FALogin(code!, !this.emailed && !!trustDevice, this.getDeviceName()),
         (res) => {
           if (!res.valid || !res.token) {
             this.errorMessage.set('Invalid authentication code.');

package/src/index.ts

@@ -52,6 +52,7 @@ export * from './component/account/my_account';
 export * from './component/security/twofactor_setup';
 export * from './component/security/twofactor_verify';
 export * from './component/security/trusted_devices';
+export * from './component/security/sessions';
 export * from './component/billing/plan_selector';
 export * from './component/billing/price_selector';
 export * from './component/billing/checkout_button';

package/src/model/appdata.ts

@@ -164,6 +164,8 @@ export interface LoginResponse2FA {
   refreshToken?: string;
   twoFactorRequired: boolean;
   loginToken?: string;
+  /** 'email': a new-device step-up code was emailed; absent: the authenticator app. */
+  twoFactorMethod?: 'email';
   userId?: number;
   partnerId?: number;
   // Populated for users with the single-device session policy enabled.
@@ -198,6 +200,16 @@ export interface TrustedDevice {
   created_at:   string;
 }
 
+export interface ActiveSession {
+  id:           number;
+  userAgent:    string;
+  clientIp:     string;
+  signInMethod: string;
+  createdAt:    string;
+  lastSeenAt:   string;
+  current:      boolean;
+}
+
 // Mirrors keel `user.AccountRegistration`.
 export interface AccountRegistration {
 	firstName: string;

package/src/service/auth.service.ts

@@ -2,7 +2,7 @@ import { Injectable, WritableSignal, inject, signal } from '@angular/core';
 import { HttpErrorResponse, HttpParams } from '@angular/common/http';
 import { filter, finalize, map, mergeMap, shareReplay, take, tap } from 'rxjs/operators';
 import { PasswordRules } from '../util/password_policy';
-import { ApplicationData, ConfirmRegisterResponse, DictionaryPath, LoginResponse2FA, PartnerCreated, PartnerRegistration, PartnerSetup, RestReport, TableDefinition, TokenPair, TrustedDevice, TwoFactorSetupResponse, TwoFactorVerifyRequest, TwoFactorVerifyResponse } from '../model/appdata';
+import { ActiveSession, ApplicationData, ConfirmRegisterResponse, DictionaryPath, LoginResponse2FA, PartnerCreated, PartnerRegistration, PartnerSetup, RestReport, TableDefinition, TokenPair, TrustedDevice, TwoFactorSetupResponse, TwoFactorVerifyRequest, TwoFactorVerifyResponse } from '../model/appdata';
 import {
   LoginResponseSocial,
   OtpRequest, OtpResendRequest, OtpResponse, OtpVerifyRequest, OtpVerifyResponse,
@@ -104,6 +104,8 @@ export abstract class BaseAuthService extends BaseRestService {
   protected get trustedDeviceListUrl()     { return this.url(RestURL.trustedDeviceListURL); }
   protected get trustedDeviceRegisterUrl() { return this.url(RestURL.trustedDeviceRegisterURL); }
   protected get trustedDeviceRevokeUrl()   { return this.url(RestURL.trustedDeviceRevokeURL); }
+  protected get sessionListUrl()           { return this.url(RestURL.sessionListURL); }
+  protected get sessionRevokeUrl()         { return this.url(RestURL.sessionRevokeURL); }
   protected get otpSendUrl()               { return this.url(RestURL.otpSendURL); }
   protected get otpVerifyUrl()             { return this.url(RestURL.otpVerifyURL); }
   protected get otpResendUrl()             { return this.url(RestURL.otpResendURL); }
@@ -146,6 +148,8 @@ export abstract class BaseAuthService extends BaseRestService {
    *  signs in again to retry instead of being redirected without a session. */
   readonly sessionHandoffError = signal<string | null>(null);
 
+  readonly signInPrompt = signal<'login' | 'select_account' | null>(null);
+
   /**
    * Multi-role app support. Consumers that distinguish rider/driver/admin
    * (or any equivalent split) call setRole() after login, then
@@ -219,9 +223,14 @@ export abstract class BaseAuthService extends BaseRestService {
   private completeLogin(token: string, refreshToken?: string) {
     this.refreshInFlight = null;         // a rotation started under the previous session must not land
     this.sessionGeneration++;
+    const replaced = localStorage.getItem('refreshToken');
+    if (replaced && replaced !== refreshToken) this.revokeRefreshToken(replaced).subscribe();
     this.storeTokens(token, refreshToken);
+    localStorage.removeItem('loginToken');
+    localStorage.removeItem('twoFactorMethod');
     this.isLoggedIn.set(true);
     this.sessionHandoffError.set(null);
+    this.signInPrompt.set(null);
     resetAuthCircuit(); // a new session must not inherit a prior session's open circuit
     if (this.startHandoff()) return;
     this.loadAppData();
@@ -231,13 +240,27 @@ export abstract class BaseAuthService extends BaseRestService {
   /** Hands the session to the OAuth authorization server when the page carries an
    * allowed `?return=` and oauthServerUrl is set; false when there is nothing to hand off. */
   private startHandoff(): boolean {
-    const ret = this.validatedReturnUrl();
-    const oauthServer = this.oauthServerBase();
-    if (!ret || !oauthServer) return false;
-    this.handOffSession(oauthServer, ret);
+    if (!this.handoffPending()) return false;
+    this.handOffSession(this.oauthServerBase(), this.validatedReturnUrl());
     return true;
   }
 
+  private handoffPending(): boolean {
+    return !!this.validatedReturnUrl() && !!this.oauthServerBase();
+  }
+
+  continueSession(): void {
+    if (this.signInPrompt() !== 'select_account') return;
+    this.signInPrompt.set(null);
+    this.adoptStoredToken();
+    this.startHandoff();
+  }
+
+  private adoptStoredToken(): void {
+    this.token = localStorage.getItem('jwt');
+    this.isLoggedIn.set(!!this.token);
+  }
+
   /** Exchange the bearer session for the authorization server's own cookie session
    * (keel POST /oauth/session/handoff), then leave the SPA for the URL it returns.
    * A 401 rotates the refresh token once and retries. Any failure stays on the
@@ -297,7 +320,10 @@ export abstract class BaseAuthService extends BaseRestService {
   private handleLoginResponse(res: LoginResponse2FA): void {
     if (res.twoFactorRequired && res.loginToken) {
         localStorage.setItem('loginToken', res.loginToken);
-        this.router.navigate(['/login/2fa']);
+        if (res.twoFactorMethod) localStorage.setItem('twoFactorMethod', res.twoFactorMethod);
+        else localStorage.removeItem('twoFactorMethod');
+        // Preserve ?return= so the login still hands off after the second factor.
+        this.router.navigate(['/login/2fa'], { queryParamsHandling: 'preserve' });
     } else {
         this.completeLogin(res.token, res.refreshToken);
     }
@@ -330,7 +356,8 @@ export abstract class BaseAuthService extends BaseRestService {
   /**
    * POST credentials; success completes the login (or routes to 2FA). Callers
    * subscribe and handle the error channel to surface failures in the UI.
-   * withCredentials sends keel's `keel_td` trusted-device cookie (skips 2FA).
+   * withCredentials sends keel's `keel_td` trusted-device cookie (skips 2FA)
+   * and `keel_device` cookie (a recognized device), as every session-minting call does.
    */
   login(username: string, password: string): Observable<LoginResponse2FA> {
     return this.http.post<LoginResponse2FA>(this.loginUrl, { username, password }, { withCredentials: true }).pipe(
@@ -362,40 +389,29 @@ export abstract class BaseAuthService extends BaseRestService {
     return this.http.post<TwoFactorVerifyResponse>(this.twoFactorVerifyUrl, request);
   }
 
+  pendingTwoFactorMethod(): LoginResponse2FA['twoFactorMethod'] {
+    return localStorage.getItem('twoFactorMethod') === 'email' ? 'email' : undefined;
+  }
+
   /**
-   * Verify a TOTP code during the LOGIN flow (public endpoint, `/public/2fa/verify`).
-   * Returns the response so callers can drive loading / invalid-code UI; on a
-   * valid code the login is completed (token stored, app data + routes loaded).
+   * Verify the login-time code (`/public/2fa/verify`): a TOTP code, or the
+   * emailed code of a new-device step-up. A valid code completes the login.
    * withCredentials so the browser stores the `keel_td` cookie keel sets on a
    * `trustDevice:true` verify — that cookie is what skips 2FA next login.
    */
   verify2FALogin(code: string, trustDevice = false, deviceName?: string): Observable<TwoFactorVerifyResponse> {
-    const request: TwoFactorVerifyRequest = {
-        code,
-        loginToken: localStorage.getItem('loginToken') ?? '',
-        trustDevice,
-        deviceName,
-    };
-    return this.http.post<TwoFactorVerifyResponse>(this.twoFactorLoginVerifyUrl, request, { withCredentials: true }).pipe(
-        tap((res) => {
-            if (res.valid && res.token) {
-                localStorage.removeItem('loginToken');
-                this.completeLogin(res.token, res.refreshToken);
-            }
-        }),
-    );
+    return this.verifyLogin(this.twoFactorLoginVerifyUrl, { code, trustDevice, deviceName });
   }
 
-  /** Verify a login-flow backup code; a valid code completes the login (same contract as verify2FALogin). */
+  /** Verify a login-flow backup code; same contract as verify2FALogin. */
   verifyBackupCode(code: string): Observable<TwoFactorVerifyResponse> {
-    const loginToken = localStorage.getItem('loginToken');
-    return this.http.post<TwoFactorVerifyResponse>(this.twoFactorBackupVerifyUrl, { code, loginToken }, { withCredentials: true }).pipe(
-        tap((res) => {
-            if (res.valid && res.token) {
-                localStorage.removeItem('loginToken');
-                this.completeLogin(res.token, res.refreshToken);
-            }
-        }),
+    return this.verifyLogin(this.twoFactorBackupVerifyUrl, { code });
+  }
+
+  private verifyLogin(url: string, body: object): Observable<TwoFactorVerifyResponse> {
+    const request = { ...body, loginToken: localStorage.getItem('loginToken') ?? '' };
+    return this.http.post<TwoFactorVerifyResponse>(url, request, { withCredentials: true }).pipe(
+        tap((res) => { if (res.valid && res.token) this.completeLogin(res.token, res.refreshToken); }),
     );
   }
 
@@ -417,6 +433,14 @@ export abstract class BaseAuthService extends BaseRestService {
     return this.http.post<{ message: string }>(this.trustedDeviceRevokeUrl, { deviceId });
   }
 
+  getSessions() {
+    return this.http.get<ActiveSession[]>(this.sessionListUrl);
+  }
+
+  revokeSession(id: number) {
+    return this.http.post<void>(this.sessionRevokeUrl, { id });
+  }
+
   chpass(username: string, new_password: string, old_password: string) {
     return this.http.post<{ status: string }>(this.chpassUrl, { username, old_password, new_password })
       .pipe(tap(() => this.passwordChanged()));
@@ -458,7 +482,7 @@ export abstract class BaseAuthService extends BaseRestService {
    *  answers. A registration without partner fields leaves `partnerId` 0. */
   confirmRegister(email: string, code: string): Observable<ConfirmRegisterResponse> {
     const params = new HttpParams().set('email', email).set('code', code);
-    return this.http.post<ConfirmRegisterResponse>(this.confirmRegisterUrl, null, { params }).pipe(
+    return this.http.post<ConfirmRegisterResponse>(this.confirmRegisterUrl, null, { params, withCredentials: true }).pipe(
         tap((res) => this.completeLogin(res.token, res.refreshToken)),
     );
   }
@@ -488,11 +512,20 @@ export abstract class BaseAuthService extends BaseRestService {
   }
 
   loadStoredSession() {
-    this.token = localStorage.getItem('jwt');
-    if (!this.token) return;
-    this.isLoggedIn.set(true);
-    // A signed-in user sent to the login page by the authorization server is handed off without signing in again.
-    if (window.location.pathname.startsWith('/login') && this.startHandoff()) return;
+    if (!localStorage.getItem('jwt')) return;
+    // A signed-in user sent to the login page by the authorization server is handed
+    // off without signing in again, unless the server asks for a sign-in.
+    const handoff = window.location.pathname.startsWith('/login') && this.handoffPending();
+    const prompt = handoff ? new URLSearchParams(window.location.search).get('prompt') : null;
+    if (prompt === 'login' || prompt === 'select_account') {
+      this.signInPrompt.set(prompt);
+      return;
+    }
+    this.adoptStoredToken();
+    if (handoff) {
+      this.startHandoff();
+      return;
+    }
     this.loadAppData();
     this.initRoutes();
   }
@@ -500,13 +533,17 @@ export abstract class BaseAuthService extends BaseRestService {
   /** Revoke the refresh token server-side (best effort: the local session is
    *  cleared regardless), then land on the login screen. */
   logout() {
+    this.signOutHere();
+    this.router.navigate(['/login/local'], { queryParams: { loggedOut: 'true' } });
+  }
+
+  /** logout() without navigating, so the login page keeps its `?return=`. */
+  signOutHere() {
     this.revokeRefreshToken().subscribe();
     this.clearSession();
-    this.router.navigate(['/login/local'], { queryParams: { loggedOut: 'true' } });
   }
 
-  private revokeRefreshToken(): Observable<unknown> {
-    const refreshToken = localStorage.getItem('refreshToken');
+  private revokeRefreshToken(refreshToken = localStorage.getItem('refreshToken')): Observable<unknown> {
     if (!refreshToken) return EMPTY;
     return this.http.post(this.logoutUrl, { refreshToken }).pipe(
       catchError((err) => { console.warn('refresh token revocation failed:', err); return EMPTY; }),
@@ -549,7 +586,7 @@ export abstract class BaseAuthService extends BaseRestService {
    * omitted (single-role apps), the role stays unchanged.
    */
   verifyOtp(req: OtpVerifyRequest, role?: string): Observable<OtpVerifyResponse> {
-    return this.http.post<OtpVerifyResponse>(this.otpVerifyUrl, req).pipe(
+    return this.http.post<OtpVerifyResponse>(this.otpVerifyUrl, req, { withCredentials: true }).pipe(
       tap((res) => {
         if (res?.token) {
           this.completeLogin(res.token, res.refreshToken);
@@ -569,7 +606,7 @@ export abstract class BaseAuthService extends BaseRestService {
     consent?: SignupConsent,
   ): Observable<LoginResponseSocial> {
     const payload: SocialLoginRequest = { provider, token: idToken, ...consent };
-    return this.http.post<LoginResponseSocial>(this.loginSocialUrl, payload).pipe(
+    return this.http.post<LoginResponseSocial>(this.loginSocialUrl, payload, { withCredentials: true }).pipe(
       tap((res) => { if (res?.token) this.completeLogin(res.token, res.refreshToken); }),
     );
   }
@@ -635,11 +672,13 @@ export abstract class BaseAuthService extends BaseRestService {
     localStorage.removeItem('refreshToken');
     localStorage.removeItem('menu');
     localStorage.removeItem('loginToken');
+    localStorage.removeItem('twoFactorMethod');
     this.clearRole();
     this.cache = undefined;
     this.authIndex.clear();
     this.appDataError.set(null);
     this.sessionHandoffError.set(null);
+    this.signInPrompt.set(null);
     this.refreshInFlight = null;
     this.landing = null;
     this.sessionGeneration++;           // in-flight loads and refreshes from this session are ignored

package/src/service/oauth_connection.service.ts

@@ -24,6 +24,16 @@ export class OAuthConnectionService extends BaseRestService {
     return this.http.get<{ url: string }>(this.url(path)).pipe(map((r) => r.url));
   }
 
+  /** Finish an OAuth connect flow: redeem the single-use callback ticket keel put
+   * in `?connect=<provider>&ticket=...` for the signed-in user who started it.
+   * 400 = expired or spent ticket; 403 = started by another user or partner. */
+  completeOAuth(provider: string, ticket: string): Observable<{ status: string; provider: string }> {
+    return this.http.post<{ status: string; provider: string }>(
+      this.url(`/api/oauth/${encodeURIComponent(provider)}/complete`),
+      { ticket },
+    );
+  }
+
   /** Re-validate a stored connection (POST — it makes an outbound call and updates
    * status). entityId selects which one (0 = tenant-wide). */
   testConnection(provider: string, entityId = 0): Observable<{ status: string; message?: string }> {

package/src/service/rest_url.ts

@@ -23,6 +23,8 @@ export const RestURL = {
   trustedDeviceListURL: '/api/user/trusted-device/list',
   trustedDeviceRegisterURL: '/api/user/trusted-device/register',
   trustedDeviceRevokeURL: '/api/user/trusted-device/revoke',
+  sessionListURL: '/api/user/sessions',
+  sessionRevokeURL: '/api/user/sessions/revoke',
   checkoutURL:       '/api/billing/checkout',
   subscriptionURL:   '/api/billing/subscription',
   cancelSubURL:      '/api/billing/subscription/cancel',

package/src/util/errors.ts

@@ -11,6 +11,12 @@ function problemOf(err: unknown): ProblemShape | undefined {
   return body && typeof body === 'object' ? (body as ProblemShape) : undefined;
 }
 
+const codeMessages = new Map([
+  ['signin_network', 'Sign-in is not allowed from this network.'],
+  ['signin_network_lockout', 'The allowed networks must include your current address.'],
+  ['stepup_unavailable', 'A sign-in code cannot be sent right now. Please try again later.'],
+]);
+
 function asString(value: unknown): string | undefined {
   return typeof value === 'string' && value ? value : undefined;
 }
@@ -58,7 +64,7 @@ export function errorDetail(err: unknown, fallback: string, statuses?: readonly
   }
   const problem = problemOf(err);
   if (problem) {
-    const message = asString(problem.detail) ?? asString(problem.title) ?? asString(problem.message);
+    const message = codeMessages.get(asString(problem.code) ?? '') ?? asString(problem.detail) ?? asString(problem.title) ?? asString(problem.message);
     if (message) return message;
   }
   if (err instanceof Error && err.message) {