phase 7: auth flow UI (email-code login + session resume + revocation)
Implements ui/PLAN.md Phase 7 end-to-end: - /login two-step form (email -> code) over the gateway public REST surface; /lobby placeholder issues the first authenticated user.account.get and renders the decoded display name. - SessionStore (Svelte 5 runes) with loading / unsupported / anonymous / authenticated states; layout-level route guard, browser-not-supported blocker, and a minimal SubscribeEvents revocation watcher that closes the active client within 1s on a clean stream end or Unauthenticated. - VITE_GATEWAY_BASE_URL + VITE_GATEWAY_RESPONSE_PUBLIC_KEY config plus AuthError taxonomy in api/auth.ts. - Vitest (auth-api, session-store, login-page) and Playwright e2e (auth-flow.spec.ts) on the four configured projects, with a fixture Ed25519 keypair forging Connect-Web JSON responses. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Ilia Denisov
@@ -0,0 +1,225 @@
|
||||
// Login page component tests. The `auth` API and the navigation
|
||||
// helper are mocked at module level; the session singleton is wired
|
||||
// to a per-test `SessionStore`-backing IndexedDB so the keypair the
|
||||
// form passes to `confirmEmailCode` is a genuine 32-byte Ed25519
|
||||
// public key without polluting the production `dbConnection()`
|
||||
// cache.
|
||||
|
||||
import "fake-indexeddb/auto";
|
||||
import { fireEvent, render, waitFor } from "@testing-library/svelte";
|
||||
import {
|
||||
afterEach,
|
||||
beforeEach,
|
||||
describe,
|
||||
expect,
|
||||
test,
|
||||
vi,
|
||||
} from "vitest";
|
||||
import type { IDBPDatabase } from "idb";
|
||||
|
||||
import { AuthError } from "../src/api/auth";
|
||||
import { session } from "../src/lib/session-store.svelte";
|
||||
import { type GalaxyDB, openGalaxyDB } from "../src/platform/store/idb";
|
||||
import { IDBCache } from "../src/platform/store/idb-cache";
|
||||
import { WebCryptoKeyStore } from "../src/platform/store/webcrypto-keystore";
|
||||
|
||||
vi.mock("$app/navigation", () => ({
|
||||
goto: vi.fn(async () => {}),
|
||||
}));
|
||||
|
||||
const sendEmailCodeSpy = vi.fn();
|
||||
const confirmEmailCodeSpy = vi.fn();
|
||||
|
||||
vi.mock("../src/api/auth", async () => {
|
||||
const actual = await vi.importActual<typeof import("../src/api/auth")>(
|
||||
"../src/api/auth",
|
||||
);
|
||||
return {
|
||||
...actual,
|
||||
sendEmailCode: (...args: unknown[]) => sendEmailCodeSpy(...args),
|
||||
confirmEmailCode: (...args: unknown[]) => confirmEmailCodeSpy(...args),
|
||||
};
|
||||
});
|
||||
|
||||
let db: IDBPDatabase<GalaxyDB>;
|
||||
let dbName: string;
|
||||
|
||||
beforeEach(async () => {
|
||||
dbName = `galaxy-ui-test-${crypto.randomUUID()}`;
|
||||
db = await openGalaxyDB(dbName);
|
||||
const store = {
|
||||
keyStore: new WebCryptoKeyStore(db),
|
||||
cache: new IDBCache(db),
|
||||
};
|
||||
session.resetForTests();
|
||||
session.setStoreLoaderForTests(async () => store);
|
||||
await session.init();
|
||||
sendEmailCodeSpy.mockReset();
|
||||
confirmEmailCodeSpy.mockReset();
|
||||
});
|
||||
|
||||
afterEach(async () => {
|
||||
sendEmailCodeSpy.mockReset();
|
||||
confirmEmailCodeSpy.mockReset();
|
||||
session.resetForTests();
|
||||
db.close();
|
||||
await new Promise<void>((resolve) => {
|
||||
const req = indexedDB.deleteDatabase(dbName);
|
||||
req.onsuccess = () => resolve();
|
||||
req.onerror = () => resolve();
|
||||
req.onblocked = () => resolve();
|
||||
});
|
||||
});
|
||||
|
||||
async function importLoginPage(): Promise<typeof import("../src/routes/login/+page.svelte")> {
|
||||
return import("../src/routes/login/+page.svelte");
|
||||
}
|
||||
|
||||
describe("login page", () => {
|
||||
test("submitting the email step calls sendEmailCode and advances to step=code", async () => {
|
||||
sendEmailCodeSpy.mockResolvedValueOnce({ challengeId: "ch-1" });
|
||||
const Page = (await importLoginPage()).default;
|
||||
const ui = render(Page);
|
||||
|
||||
const emailInput = ui.getByTestId("login-email-input") as HTMLInputElement;
|
||||
await fireEvent.input(emailInput, {
|
||||
target: { value: "pilot@example.com" },
|
||||
});
|
||||
await fireEvent.click(ui.getByTestId("login-email-submit"));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(sendEmailCodeSpy).toHaveBeenCalledWith(
|
||||
expect.any(String),
|
||||
"pilot@example.com",
|
||||
);
|
||||
expect(ui.getByTestId("login-code-input")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
test("a send-email-code error stays on the email step and surfaces the message", async () => {
|
||||
sendEmailCodeSpy.mockRejectedValueOnce(
|
||||
new AuthError("service_unavailable", "auth service is unavailable", 503),
|
||||
);
|
||||
const Page = (await importLoginPage()).default;
|
||||
const ui = render(Page);
|
||||
|
||||
// Use a syntactically valid e-mail so JSDOM does not block form
|
||||
// submission via the `type="email"` constraint; the gateway is
|
||||
// expected to reject the request with `service_unavailable`
|
||||
// regardless of the address shape.
|
||||
await fireEvent.input(ui.getByTestId("login-email-input"), {
|
||||
target: { value: "pilot@example.com" },
|
||||
});
|
||||
await fireEvent.click(ui.getByTestId("login-email-submit"));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(ui.getByTestId("login-error")).toHaveTextContent(
|
||||
"auth service is unavailable",
|
||||
);
|
||||
});
|
||||
expect(ui.queryByTestId("login-code-input")).toBeNull();
|
||||
});
|
||||
|
||||
test("submitting the code step calls confirmEmailCode and signs the user in", async () => {
|
||||
sendEmailCodeSpy.mockResolvedValueOnce({ challengeId: "ch-1" });
|
||||
confirmEmailCodeSpy.mockResolvedValueOnce({ deviceSessionId: "dev-1" });
|
||||
const Page = (await importLoginPage()).default;
|
||||
const ui = render(Page);
|
||||
|
||||
await fireEvent.input(ui.getByTestId("login-email-input"), {
|
||||
target: { value: "pilot@example.com" },
|
||||
});
|
||||
await fireEvent.click(ui.getByTestId("login-email-submit"));
|
||||
await waitFor(() => ui.getByTestId("login-code-input"));
|
||||
|
||||
await fireEvent.input(ui.getByTestId("login-code-input"), {
|
||||
target: { value: "123456" },
|
||||
});
|
||||
await fireEvent.click(ui.getByTestId("login-code-submit"));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(confirmEmailCodeSpy).toHaveBeenCalledTimes(1);
|
||||
expect(session.deviceSessionId).toBe("dev-1");
|
||||
expect(session.status).toBe("authenticated");
|
||||
});
|
||||
const args = confirmEmailCodeSpy.mock.calls[0]![1]!;
|
||||
expect(args.challengeId).toBe("ch-1");
|
||||
expect(args.code).toBe("123456");
|
||||
expect(args.publicKey).toBeInstanceOf(Uint8Array);
|
||||
expect(args.publicKey.length).toBe(32);
|
||||
expect(typeof args.timeZone).toBe("string");
|
||||
});
|
||||
|
||||
test("a confirm-email-code invalid_request bounces back to step=email with an error", async () => {
|
||||
sendEmailCodeSpy.mockResolvedValueOnce({ challengeId: "ch-1" });
|
||||
confirmEmailCodeSpy.mockRejectedValueOnce(
|
||||
new AuthError("invalid_request", "code expired", 400),
|
||||
);
|
||||
const Page = (await importLoginPage()).default;
|
||||
const ui = render(Page);
|
||||
|
||||
await fireEvent.input(ui.getByTestId("login-email-input"), {
|
||||
target: { value: "pilot@example.com" },
|
||||
});
|
||||
await fireEvent.click(ui.getByTestId("login-email-submit"));
|
||||
await waitFor(() => ui.getByTestId("login-code-input"));
|
||||
|
||||
await fireEvent.input(ui.getByTestId("login-code-input"), {
|
||||
target: { value: "00000" },
|
||||
});
|
||||
await fireEvent.click(ui.getByTestId("login-code-submit"));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(ui.queryByTestId("login-code-input")).toBeNull();
|
||||
expect(ui.getByTestId("login-email-input")).toBeInTheDocument();
|
||||
expect(ui.getByTestId("login-error")).toHaveTextContent(
|
||||
/expired|already used/i,
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test("resend re-issues sendEmailCode and clears the code field", async () => {
|
||||
sendEmailCodeSpy
|
||||
.mockResolvedValueOnce({ challengeId: "ch-1" })
|
||||
.mockResolvedValueOnce({ challengeId: "ch-2" });
|
||||
const Page = (await importLoginPage()).default;
|
||||
const ui = render(Page);
|
||||
|
||||
await fireEvent.input(ui.getByTestId("login-email-input"), {
|
||||
target: { value: "pilot@example.com" },
|
||||
});
|
||||
await fireEvent.click(ui.getByTestId("login-email-submit"));
|
||||
await waitFor(() => ui.getByTestId("login-code-input"));
|
||||
|
||||
await fireEvent.input(ui.getByTestId("login-code-input"), {
|
||||
target: { value: "999999" },
|
||||
});
|
||||
await fireEvent.click(ui.getByTestId("login-resend"));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(sendEmailCodeSpy).toHaveBeenCalledTimes(2);
|
||||
expect(
|
||||
(ui.getByTestId("login-code-input") as HTMLInputElement).value,
|
||||
).toBe("");
|
||||
});
|
||||
});
|
||||
|
||||
test("change-email returns to the email step", async () => {
|
||||
sendEmailCodeSpy.mockResolvedValueOnce({ challengeId: "ch-1" });
|
||||
const Page = (await importLoginPage()).default;
|
||||
const ui = render(Page);
|
||||
|
||||
await fireEvent.input(ui.getByTestId("login-email-input"), {
|
||||
target: { value: "pilot@example.com" },
|
||||
});
|
||||
await fireEvent.click(ui.getByTestId("login-email-submit"));
|
||||
await waitFor(() => ui.getByTestId("login-code-input"));
|
||||
|
||||
await fireEvent.click(ui.getByTestId("login-change-email"));
|
||||
|
||||
await waitFor(() => {
|
||||
expect(ui.queryByTestId("login-code-input")).toBeNull();
|
||||
expect(ui.getByTestId("login-email-input")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user