@tribe-nest/forge 3.17.0 → 3.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tribe-nest/forge",
-  "version": "3.17.0",
+  "version": "3.20.0",
   "publishConfig": {
     "access": "public"
   },

package/src/data/queries/useCoachingAvailability.ts

@@ -20,6 +20,13 @@ export function useCoachingAvailability(productId?: string, fromDate?: string, t
 
 export type ReserveCoachingBookingResult = {
   bookingId: string;
+  /**
+   * The per-booking credential, returned EXACTLY ONCE and never re-readable.
+   * Every later call on this booking (`booking/update`, `start-payment`,
+   * `finalize`) must present it. Persist it immediately — see
+   * `utils/bookingSecret`. Absent for bookings the backend grandfathered.
+   */
+  bookingSecret?: string;
   totalAmount?: number;
   /**
    * The cancellation terms SNAPSHOTTED onto this booking (S.6). Authoritative
@@ -45,6 +52,12 @@ export function useReserveCoachingBooking(productId?: string) {
 
 export type UpdateCoachingBookingInput = {
   bookingId: string | null;
+  /**
+   * The per-booking credential from `useReserveCoachingBooking`. Required by the
+   * backend for every call on a booking it minted one for — without it the call
+   * 404s (a 403 would confirm the id exists). See `utils/bookingSecret`.
+   */
+  bookingSecret?: string;
   email: string;
   firstName: string;
   lastName: string;

package/src/data/queries/useCourseAccess.ts

@@ -2,6 +2,75 @@ import type { CourseAccessData } from "../../types/models";
 import { useForge } from "../../provider/ForgeProvider";
 import { useMutation, useQuery } from "@tanstack/react-query";
 
+/**
+ * Why a course grant refused to open.
+ *
+ * `course_access.account_id` decides this PER ROW. A NULL binds to nobody — the
+ * emailed `/i/course-access/:accessId` link is the whole credential, and every
+ * one of those links must keep working, so a legacy grant still answers 200 to
+ * an anonymous caller. A grant with `account_id` set answers only to that
+ * account, and the API splits the refusal in two on purpose:
+ *
+ *   - **401 `account_required`** — nobody is signed in. Overwhelmingly the
+ *     LEGITIMATE owner following an old email on a new device. Needs a sign-in
+ *     that comes back to this page.
+ *   - **403 `wrong_account`** — signed in, but as somebody else. Telling this
+ *     person to "sign in" is a loop with no exit; they need to be told whose
+ *     enrolment it is and offered a way to switch.
+ *
+ * Collapsing the two into one "error" strands one of the two groups, which is
+ * exactly why the API bothers to distinguish them.
+ */
+export type CourseAccessDenialReason = "account_required" | "wrong_account";
+
+export type CourseAccessDenial = {
+  reason: CourseAccessDenialReason;
+  /** 401 for `account_required`, 403 for `wrong_account`. */
+  status: 401 | 403;
+  /** The API's own already-translated sentence, when it sent one. */
+  message: string | null;
+};
+
+/** Status off an axios-ish rejection, without importing axios or trusting its shape. */
+const errorStatus = (error: unknown): number | null => {
+  const status = (error as { response?: { status?: unknown } } | null | undefined)?.response?.status;
+  return typeof status === "number" ? status : null;
+};
+
+const errorMessage = (error: unknown): string | null => {
+  const message = (error as { response?: { data?: { message?: unknown } } } | null | undefined)?.response?.data
+    ?.message;
+  return typeof message === "string" && message.trim() ? message : null;
+};
+
+/**
+ * The account-binding refusal behind a failed course-access read, or `null` when
+ * the failure was something else (404 for a revoked/unknown grant, a 500, an
+ * offline browser).
+ *
+ * A total function over `unknown` so a caller cannot forget to narrow first, and
+ * the one place the status→meaning mapping is written down.
+ */
+export const courseAccessDenial = (error: unknown): CourseAccessDenial | null => {
+  const status = errorStatus(error);
+  if (status !== 401 && status !== 403) return null;
+  return {
+    reason: status === 401 ? "account_required" : "wrong_account",
+    status,
+    message: errorMessage(error),
+  };
+};
+
+/**
+ * Is this grant still open to anyone holding the link?
+ *
+ * `access.accountId === null` is the legacy shape. Worth surfacing on a
+ * SUCCESSFUL load too: the student can be nudged to put the course behind their
+ * account before the link is forwarded, screenshotted or indexed.
+ */
+export const isLegacyCourseAccess = (data?: CourseAccessData | null): boolean =>
+  !!data && (data.access.accountId ?? null) === null;
+
 /** A purchased course-access record (course content + progress) by access id. */
 export function useCourseAccess(accessId?: string) {
   const { client, profileId } = useForge();
@@ -15,6 +84,18 @@ export function useCourseAccess(accessId?: string) {
       return res.data;
     },
     enabled: !!client && !!accessId,
+    // Every failure here is an ANSWER, not a fault: 401 means "sign in", 403
+    // means "wrong account", 404 means the grant is revoked or unknown. Retrying
+    // three times (the react-query default) only makes the owner of an old email
+    // link watch a spinner before being shown the sign-in button that was always
+    // the outcome.
+    //
+    // Callers MUST NOT fire this until `usePublicAuth().isInitialized` — a
+    // request sent before the session is restored goes out anonymous, and a
+    // bound grant would 401 a reader who is in fact signed in, which is the one
+    // dead end this whole split exists to prevent. `useCourseClassroom` handles
+    // that gate; a hand-rolled caller has to do it too.
+    retry: false,
   });
 }
 

package/src/data/queries/useCourses.ts

@@ -12,6 +12,12 @@ export type CreateCourseBookingInput = {
 
 export type UpdateCourseBookingInput = {
   bookingId: string;
+  /**
+   * The per-booking credential from `useCreateCourseBooking`. Required by the
+   * backend for every call on a booking it minted one for — without it the call
+   * 404s (a 403 would confirm the id exists). See `utils/bookingSecret`.
+   */
+  bookingSecret?: string;
   email: string;
   firstName: string;
   lastName: string;
@@ -51,11 +57,23 @@ export function useUpdateCourseBooking(courseId?: string) {
   });
 }
 
+export type CreateCourseBookingResult = {
+  bookingId: string;
+  /**
+   * The per-booking credential, returned EXACTLY ONCE and never re-readable.
+   * Every later call on this booking (`booking/update`, `start-payment`,
+   * `finalize`) must present it. Persist it immediately — see
+   * `utils/bookingSecret`. Absent for bookings the backend grandfathered.
+   */
+  bookingSecret?: string;
+  isFree?: boolean;
+};
+
 /** Create a course booking (buyer details → bookingId; free courses skip payment). */
 export function useCreateCourseBooking(courseId?: string) {
   const { client, profileId } = useForge();
 
-  return useMutation<{ bookingId: string; isFree?: boolean }, unknown, CreateCourseBookingInput>({
+  return useMutation<CreateCourseBookingResult, unknown, CreateCourseBookingInput>({
     mutationFn: async (body) => {
       const res = await client.post(`/public/courses/${courseId}/bookings`, {
         courseId,

package/src/data/queries/useFinalize.ts

@@ -59,8 +59,17 @@ export function useEventOrderFinalize(eventId?: string, orderId?: string) {
   });
 }
 
-/** Finalize a coaching booking (`/public/coaching/products/:productId/finalize`). */
-export function useCoachingBookingFinalize(productId?: string, orderId?: string) {
+/**
+ * Finalize a coaching booking (`/public/coaching/products/:productId/finalize`).
+ *
+ * `bookingSecret` is the per-booking credential minted at reserve — the id alone
+ * no longer resolves a booking that has one, and the call 404s without it. The
+ * confirmation page is reached via a provider redirect, so the caller reads it
+ * back out of `utils/bookingSecret` rather than off in-memory state. Optional
+ * because bookings created before the secret existed have no stored hash and
+ * still finalize on the id.
+ */
+export function useCoachingBookingFinalize(productId?: string, orderId?: string, bookingSecret?: string) {
   const { client, profileId } = useForge();
 
   return useQuery<CoachingBooking>({
@@ -69,6 +78,7 @@ export function useCoachingBookingFinalize(productId?: string, orderId?: string)
       const res = await client.post(`/public/coaching/products/${productId}/finalize`, {
         profileId,
         orderId,
+        bookingSecret,
       });
       return res.data;
     },
@@ -91,8 +101,17 @@ export function useDonationFinalize() {
   });
 }
 
-/** Finalize a course booking (`/public/courses/:courseId/finalize`). */
-export function useCourseBookingFinalize(courseId?: string, bookingId?: string) {
+/**
+ * Finalize a course booking (`/public/courses/:courseId/finalize`).
+ *
+ * `bookingSecret` is the per-booking credential minted at create — the id alone
+ * no longer resolves a booking that has one, and the call 404s without it. The
+ * confirmation page is reached via a provider redirect, so the caller reads it
+ * back out of `utils/bookingSecret` rather than off in-memory state. Optional
+ * because bookings created before the secret existed have no stored hash and
+ * still finalize on the id.
+ */
+export function useCourseBookingFinalize(courseId?: string, bookingId?: string, bookingSecret?: string) {
   const { client, profileId } = useForge();
 
   return useQuery<CourseBooking>({
@@ -101,6 +120,7 @@ export function useCourseBookingFinalize(courseId?: string, bookingId?: string)
       const res = await client.post(`/public/courses/${courseId}/finalize`, {
         profileId,
         bookingId,
+        bookingSecret,
       });
       return res.data;
     },

package/src/index.ts

@@ -127,6 +127,10 @@ export * from "./utils/landing";
 export * from "./utils/metaPixel";
 export * from "./utils/cookieConsent";
 export * from "./utils/structuredData";
+// The per-booking checkout credential + where it is kept across the payment
+// redirect. Exported so a host that drives the booking endpoints itself can
+// hold the secret the same way the built-in flows do.
+export * from "./utils/bookingSecret";
 // Shared by BOTH starters. Kept here rather than in a starter's `/i/-lib` so an
 // app can use them without inheriting the fan-site route tree, and so a fix
 // reaches existing sites through the normal Forge publish.

package/src/types/models.ts

@@ -1448,6 +1448,13 @@ export type CourseAccessRecord = {
   firstName: string | null;
   lastName: string | null;
   currentLessonId: string | null;
+  /**
+   * The account this grant is bound to, or `null` for a LEGACY grant that any
+   * holder of the access id can open. Optional on the type because sites built
+   * against an older API still get payloads without the field — treat a missing
+   * value as legacy (see `isLegacyCourseAccess`).
+   */
+  accountId?: string | null;
 };
 
 export type CourseLessonProgress = {

package/src/ui/headless/booking/useBookingSecret.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+import { readBookingSecret } from "../../../utils/bookingSecret";
+
+export interface BookingSecretLookup {
+  /** The stored credential, or null when nothing is held for this booking. */
+  secret: string | null;
+  /** False until storage has actually been consulted (first client effect). */
+  resolved: boolean;
+  /** Storage was consulted and held nothing. Only meaningful once `resolved`. */
+  isMissing: boolean;
+}
+
+/**
+ * Read back the per-booking credential a checkout stashed before handing the
+ * buyer to the payment provider. Used by the confirmation pages, which are
+ * reached by a redirect and therefore start with no in-memory state at all.
+ *
+ * The read happens in an EFFECT rather than during render on purpose: these
+ * pages are server-rendered, `sessionStorage` does not exist on the server, and
+ * reading it inline would make the server and the first client render disagree.
+ * `resolved` lets the caller hold the finalise call until the real answer is in,
+ * so a booking is never finalised without a secret it actually has.
+ *
+ * A `null` secret is NOT proof the call will fail: bookings created before the
+ * credential existed have no stored hash server-side and still finalise on the
+ * id alone. So callers should attempt the finalise regardless and use
+ * `isMissing` only to EXPLAIN a failure — see `CourseConfirmation` /
+ * `CoachingConfirmation`.
+ */
+export function useBookingSecret(bookingId?: string | null): BookingSecretLookup {
+  const [state, setState] = useState<{ secret: string | null; resolved: boolean }>({
+    secret: null,
+    resolved: false,
+  });
+
+  useEffect(() => {
+    setState({ secret: readBookingSecret(bookingId), resolved: true });
+  }, [bookingId]);
+
+  return { ...state, isMissing: state.resolved && !state.secret };
+}

package/src/ui/headless/coaching/useCoachingBooking.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { usePublicAuth } from "../../../contexts/PublicAuthContext";
 import { useGetCoachingProduct } from "../../../data/queries/useCoachingProducts";
 import {
@@ -11,6 +11,7 @@ import { usePaymentFlow } from "../../../data/queries/usePaymentFlow";
 import { useCouponField, type CouponQuoteFn } from "../coupon/useCouponField";
 import { readAttributionRef } from "../../../utils/attribution";
 import { readLanding } from "../../../utils/landing";
+import { forgetBookingSecret, rememberBookingSecret } from "../../../utils/bookingSecret";
 import type { CancellationTermsView } from "../../../types/models";
 
 export type CoachingBookingStep = "slot" | "details" | "payment";
@@ -82,6 +83,13 @@ export function useCoachingBooking(slug?: string, opts: UseCoachingBookingOption
 
   const [step, setStep] = useState<CoachingBookingStep>("slot");
   const [bookingId, setBookingId] = useState<string | null>(null);
+  /**
+   * The per-booking credential returned by `reserve`. Held in a ref (not state)
+   * so it never triggers a render and never lands in a dependency array, and
+   * mirrored into sessionStorage for the leg after the payment redirect. The
+   * backend returns it once and cannot reissue it.
+   */
+  const bookingSecretRef = useRef<string | undefined>(undefined);
   const [selectedSlotId, setSelectedSlotId] = useState<string | null>(null);
   const [firstName, setFirstName] = useState(user?.firstName ?? "");
   const [lastName, setLastName] = useState(user?.lastName ?? "");
@@ -119,6 +127,7 @@ export function useCoachingBooking(slug?: string, opts: UseCoachingBookingOption
       }
       return update.mutateAsync({
         bookingId,
+        bookingSecret: bookingSecretRef.current,
         email,
         firstName,
         lastName,
@@ -158,9 +167,17 @@ export function useCoachingBooking(slug?: string, opts: UseCoachingBookingOption
     }
     try {
       // Release any previously-held slot before reserving a new one.
-      if (bookingId) await unreserve.mutateAsync({ bookingId }).catch(() => undefined);
+      if (bookingId) {
+        await unreserve.mutateAsync({ bookingId }).catch(() => undefined);
+        forgetBookingSecret(bookingId);
+      }
       const data = await reserve.mutateAsync({ slotId: selectedSlotId });
       setBookingId(data.bookingId);
+      bookingSecretRef.current = data.bookingSecret;
+      // Written the instant it arrives: this is the only time the server will
+      // ever hand it over, and the finalise page (post-redirect) has no other
+      // way to get it.
+      rememberBookingSecret(data.bookingId, data.bookingSecret);
       setAgreedCancellation(data.cancellation ?? null);
       setReservationExpiresAt(Date.now() + RESERVATION_HOLD_MS);
       setStep("details");
@@ -177,6 +194,11 @@ export function useCoachingBooking(slug?: string, opts: UseCoachingBookingOption
    */
   const releaseReservation = useCallback(async () => {
     if (bookingId) await unreserve.mutateAsync({ bookingId }).catch(() => undefined);
+    // The credential belonged to a booking that no longer exists — leaving it
+    // in storage would strand a dead secret in the tab for the rest of the
+    // session.
+    forgetBookingSecret(bookingId);
+    bookingSecretRef.current = undefined;
     setBookingId(null);
     setSelectedSlotId(null);
     setReservationExpiresAt(null);
@@ -206,6 +228,7 @@ export function useCoachingBooking(slug?: string, opts: UseCoachingBookingOption
     try {
       const updated = await update.mutateAsync({
         bookingId,
+        bookingSecret: bookingSecretRef.current,
         email,
         firstName,
         lastName,
@@ -227,7 +250,7 @@ export function useCoachingBooking(slug?: string, opts: UseCoachingBookingOption
         else if (typeof window !== "undefined") window.location.href = ru;
         return;
       }
-      const result = await flow.start({ bookingId, returnUrl: ru });
+      const result = await flow.start({ bookingId, bookingSecret: bookingSecretRef.current, returnUrl: ru });
       if (result.provider && result.provider !== "stripe") return;
       setStep("payment");
     } catch (e) {

package/src/ui/headless/course/_tests/courseAccessGate.spec.ts

@@ -0,0 +1,135 @@
+import { describe, expect, it } from "vitest";
+import { courseAccessDenial, isLegacyCourseAccess } from "../../../../data/queries/useCourseAccess";
+import { buildCourseAccessGate, buildCourseAccessSecurePrompt, courseSignInHref } from "../useCourseClassroom";
+import type { CourseAccessData } from "../../../../types/models";
+
+/**
+ * Account-bound course access — the decisions, without a DOM or a session.
+ *
+ * The whole feature is a two-way branch on a status code, and BOTH wrong
+ * answers strand a real person: a 403 drawn as "sign in" loops someone who is
+ * already signed in, and a 401 drawn as "wrong account" tells a buyer with no
+ * session that their own enrolment is somebody else's. So the mapping is
+ * pinned here rather than left to the component.
+ */
+
+const err = (status: number, message?: string) => ({
+  response: { status, ...(message ? { data: { message } } : {}) },
+});
+
+const accessData = (accountId: string | null, email = "buyer@example.com"): CourseAccessData =>
+  ({
+    access: { id: "a1", courseId: "c1", email, firstName: null, lastName: null, currentLessonId: null, accountId },
+    course: { id: "c1", title: "Course", description: "", modules: [] },
+    progress: [],
+  }) as unknown as CourseAccessData;
+
+describe("courseAccessDenial", () => {
+  it("splits the two account-binding refusals and nothing else", () => {
+    expect(courseAccessDenial(err(401))).toMatchObject({ reason: "account_required", status: 401 });
+    expect(courseAccessDenial(err(403))).toMatchObject({ reason: "wrong_account", status: 403 });
+  });
+
+  it("carries the API's own sentence when it sent one", () => {
+    expect(courseAccessDenial(err(401, "Sign in to open this course"))?.message).toBe("Sign in to open this course");
+    expect(courseAccessDenial(err(403))?.message).toBeNull();
+  });
+
+  it("is null for every failure that is NOT about account binding", () => {
+    // A 404 must keep its old rendering; a network error has no `response` at
+    // all. Total over unknown so no caller has to narrow first.
+    for (const other of [err(404), err(500), new Error("offline"), undefined, null, "nope", {}]) {
+      expect(courseAccessDenial(other)).toBeNull();
+    }
+  });
+});
+
+describe("isLegacyCourseAccess", () => {
+  it("is true only for a grant bound to nobody", () => {
+    expect(isLegacyCourseAccess(accessData(null))).toBe(true);
+    expect(isLegacyCourseAccess(accessData("acc_1"))).toBe(false);
+  });
+
+  it("treats an absent field as legacy — an older API sends no accountId at all", () => {
+    const stale = { access: { email: "x@y.com" }, course: {}, progress: [] } as unknown as CourseAccessData;
+    expect(isLegacyCourseAccess(stale)).toBe(true);
+    expect(isLegacyCourseAccess(undefined)).toBe(false);
+    expect(isLegacyCourseAccess(null)).toBe(false);
+  });
+});
+
+describe("buildCourseAccessGate", () => {
+  it("401 offers a sign-in that returns to this exact page", () => {
+    const gate = buildCourseAccessGate({
+      denial: courseAccessDenial(err(401)),
+      isError: true,
+      loginPath: "/i/login",
+      currentPath: "/i/course-access/abc?x=1",
+    });
+    expect(gate?.kind).toBe("sign_in_required");
+    expect(gate?.actionHref).toBe(`/i/login?redirect=${encodeURIComponent("/i/course-access/abc?x=1")}`);
+  });
+
+  it("403 never says 'sign in', and its action is a sign-OUT, not a link", () => {
+    const gate = buildCourseAccessGate({ denial: courseAccessDenial(err(403)), isError: true });
+    expect(gate?.kind).toBe("wrong_account");
+    // The failure this guards: a signed-in reader told to do the one thing they
+    // have already done.
+    expect(`${gate?.title} ${gate?.body} ${gate?.actionLabel}`.toLowerCase()).not.toContain("sign in ");
+    expect(gate?.actionHref).toBeNull();
+    expect(gate?.actionLabel).toBeTruthy();
+  });
+
+  it("falls back to the old not-found panel for any other failure", () => {
+    expect(buildCourseAccessGate({ denial: null, isError: true })?.kind).toBe("not_found");
+  });
+
+  it("is null when the course loaded — the player draws instead", () => {
+    expect(buildCourseAccessGate({ denial: null, isError: false })).toBeNull();
+  });
+
+  it("drops a redirect that is not a same-origin path", () => {
+    // safeRedirectPath's job, asserted here because this is the call site that
+    // feeds it a value straight off window.location.
+    const gate = buildCourseAccessGate({
+      denial: courseAccessDenial(err(401)),
+      isError: true,
+      loginPath: "/i/login",
+      currentPath: "//evil.example/steal",
+    });
+    expect(gate?.actionHref).toBe("/i/login");
+  });
+});
+
+describe("buildCourseAccessSecurePrompt", () => {
+  it("offers to secure a legacy grant that opened fine, for a signed-out reader", () => {
+    const prompt = buildCourseAccessSecurePrompt({
+      data: accessData(null),
+      isAuthenticated: false,
+      signupPath: "/i/signup",
+      currentPath: "/i/course-access/abc",
+    });
+    expect(prompt).toEqual({
+      email: "buyer@example.com",
+      href: `/i/signup?redirect=${encodeURIComponent("/i/course-access/abc")}`,
+    });
+  });
+
+  it("says nothing on a grant that is already bound", () => {
+    expect(buildCourseAccessSecurePrompt({ data: accessData("acc_1"), isAuthenticated: false })).toBeNull();
+  });
+
+  it("says nothing to a signed-in reader — there is no binding we can perform for them", () => {
+    expect(buildCourseAccessSecurePrompt({ data: accessData(null), isAuthenticated: true })).toBeNull();
+  });
+
+  it("says nothing before the course loads", () => {
+    expect(buildCourseAccessSecurePrompt({ data: null, isAuthenticated: false })).toBeNull();
+  });
+});
+
+describe("courseSignInHref", () => {
+  it("returns the bare path when there is nowhere safe to come back to (SSR, empty)", () => {
+    expect(courseSignInHref("/i/login", "")).toBe("/i/login");
+  });
+});

package/src/ui/headless/course/useCourseCheckout.ts

@@ -5,6 +5,7 @@ import { usePaymentFlow } from "../../../data/queries/usePaymentFlow";
 import { useCouponField, type CouponQuoteFn } from "../coupon/useCouponField";
 import { readAttributionRef } from "../../../utils/attribution";
 import { readLanding } from "../../../utils/landing";
+import { rememberBookingSecret } from "../../../utils/bookingSecret";
 
 export type CourseCheckoutStep = "details" | "payment";
 
@@ -50,6 +51,13 @@ export function useCourseCheckout(slug?: string, opts: UseCourseCheckoutOptions
   const [error, setError] = useState<string | null>(null);
   /** The booking created for quoting, reused so a code never mints a second one. */
   const bookingIdRef = useRef<string | null>(null);
+  /**
+   * The per-booking credential returned by `createBooking`. Held in a ref (not
+   * state) so it never triggers a render and never lands in a dependency array,
+   * and mirrored into sessionStorage for the leg after the payment redirect.
+   * The backend returns it once and cannot reissue it.
+   */
+  const bookingSecretRef = useRef<string | undefined>(undefined);
 
   const finalisePath =
     opts.finalisePath ?? ((s, bookingId) => `/i/courses/${s}/finalise?bookingId=${bookingId}`);
@@ -72,6 +80,11 @@ export function useCourseCheckout(slug?: string, opts: UseCourseCheckoutOptions
       ...(readLanding() ?? {}),
     });
     bookingIdRef.current = created.bookingId;
+    bookingSecretRef.current = created.bookingSecret;
+    // Written the instant it arrives: this is the only time the server will
+    // ever hand it over, and the finalise page (post-redirect) has no other
+    // way to get it.
+    rememberBookingSecret(created.bookingId, created.bookingSecret);
     return created.bookingId;
   };
 
@@ -86,6 +99,7 @@ export function useCourseCheckout(slug?: string, opts: UseCourseCheckoutOptions
       const bookingId = await ensureBooking();
       return updateBooking.mutateAsync({
         bookingId,
+        bookingSecret: bookingSecretRef.current,
         email,
         firstName,
         lastName,
@@ -119,6 +133,7 @@ export function useCourseCheckout(slug?: string, opts: UseCourseCheckoutOptions
         bookingId = await ensureBooking();
         const updated = await updateBooking.mutateAsync({
           bookingId,
+          bookingSecret: bookingSecretRef.current,
           email,
           firstName,
           lastName,
@@ -138,6 +153,8 @@ export function useCourseCheckout(slug?: string, opts: UseCourseCheckoutOptions
           ...(readLanding() ?? {}),
         });
         bookingIdRef.current = data.bookingId;
+        bookingSecretRef.current = data.bookingSecret;
+        rememberBookingSecret(data.bookingId, data.bookingSecret);
         bookingId = data.bookingId;
         isFree = !!data.isFree;
       }
@@ -150,7 +167,7 @@ export function useCourseCheckout(slug?: string, opts: UseCourseCheckoutOptions
         else if (typeof window !== "undefined") window.location.href = ru;
         return;
       }
-      const result = await flow.start({ bookingId, returnUrl: ru });
+      const result = await flow.start({ bookingId, bookingSecret: bookingSecretRef.current, returnUrl: ru });
       if (result.provider && result.provider !== "stripe") return;
       setStep("payment");
     } catch (e) {