Added OAuth login flow

Herve Tribouilloy · Herve Tribouilloy · commit c46338e66d81 · 2026-02-02T11:10:56.000Z
diff --git a/.gitignore b/.gitignore
@@ -7,4 +7,5 @@ www
 widget.local.crt
 widget.local.key
 test-results
-README-dev.md
+README-dev.md
+*.html
diff --git a/README.md b/README.md
@@ -79,4 +79,13 @@ Planned work includes:
 - Step-up authentication after repeated login failure
 - Turnstile token reuse across booking flow
 - Expanded Playwright coverage on abuse scenarios
-- Playwright tests focused on core flow integrity  
+- Playwright tests focused on core flow integrity  
+
+## Hosts examples
+| Host                           | Test to check it works                                                                                                       | Notes on the component                                                                                                                                                                                                                            |
+| ------------------------------ | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **booking-api.local**          | Open `https://booking-api.local/api/graphql` in browser → expect GraphQL JSON (or GraphiQL), then run `query { __typename }` | Keystone persistence + GraphQL. Must be bound to `0.0.0.0`, HTTPS cert trusted, CORS must allow `https://southerndemo.com` **with credentials**. Auth logic must accept JWT (not rely on `context.session`).                                      |
+| **oauth-api.local**            | `POST https://oauth-api.local/auth/login` → expect `200` + token in JSON                                                     | Token issuer only. No cookies here unless explicitly designed. Verify token format (JWT vs opaque) and expiry. HTTPS required but CORS usually not (server-to-server or same origin).                                                             |
+| **auth-bridge.local**          | Hit login/refresh endpoint → DevTools → Application → Cookies → verify cookie appears                                        | Most fragile component. Must set cookie with `Secure; SameSite=None; Domain=.southerndemo.com; Path=/`. Must return `Access-Control-Allow-Origin: https://southerndemo.com` **and** `Allow-Credentials: true`. Any mismatch silently breaks auth. |
+| **southerndemo.com**           | Load page → Network tab shows widget JS `200`, no CSP/CORS errors                                                            | Host page. Must be HTTPS. Must not block third-party scripts or credentials. CSP must allow widget domain and auth-bridge. Cookies should be visible under this domain after auth.                                                                |
+| **widget.bookingsystem.co.uk** | Widget loads, then triggers calls to auth-bridge and booking-api with `credentials: include`                                 | Execution layer only. Should not read cookies manually. Should rely on browser cookie attachment. Any auth failure here usually originates upstream (cookies or CORS).                                                                            |
diff --git a/vite_project/index.html b/vite_project/index.html
diff --git a/vite_project/package-lock.json b/vite_project/package-lock.json
diff --git a/vite_project/package.json b/vite_project/package.json
@@ -1,7 +1,7 @@
 {
   "name": "widget-booking",
   "private": true,
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/vite_project/src/BookingSystemConfig.tsx b/vite_project/src/BookingSystemConfig.tsx
@@ -9,6 +9,7 @@ interface BookingSystemConfig {
     widgets: {
         booking?: {
             api: string;
+            auth: string;
         };
     };
     integrations?: {
@@ -40,6 +41,10 @@ export function readBookingSystemConfig(): BookingSystemConfig {
         throw new Error('BookingWidget: booking.api missing in global config');
     }
 
+    if (!config.widgets?.booking?.auth) {
+        throw new Error('BookingWidget: booking.auth missing in global config');
+    }
+
     return config;
 }
 
diff --git a/vite_project/src/BookingSystemWidget.tsx b/vite_project/src/BookingSystemWidget.tsx
@@ -9,7 +9,7 @@ type Props = {
 };
 
 export function BookingSystemWidget({ host }: Props) {
-    const { booking } = useWidgetConfig(host);
+    const { booking, user } = useWidgetConfig(host);
 
     if (!booking) {
         activity('bootstrap', '[ContactUs] Widget is not correctly configured', null, 'warn');
@@ -18,7 +18,7 @@ export function BookingSystemWidget({ host }: Props) {
 
     return (
         <SystemStateProvider config={booking}>
-            <UserStateProvider>
+            <UserStateProvider config={user}>
                 <BookingSystemWrapper venueId={booking.venueId} />
             </UserStateProvider>
         </SystemStateProvider>
diff --git a/vite_project/src/components/BookingSystemWrapper.tsx b/vite_project/src/components/BookingSystemWrapper.tsx
@@ -27,7 +27,7 @@ export function BookingSystemWrapper({venueId}: Props) {
     } = useEventTypeGroups(venue?.id);
 
     if (venueError || hostsError || eventTypeGroupError) {
-        activity('bootstrap', 'Keystone data cannot be returned', null, 'error');
+        activity('bootstrap', 'Keystone data cannot be returned', {venue, hostsError, eventTypeGroupError}, 'error');
         return <ErrorState />;
     }
 
diff --git a/vite_project/src/components/event/Dashboard/DayEvent/AddToCart.tsx b/vite_project/src/components/event/Dashboard/DayEvent/AddToCart.tsx
@@ -60,7 +60,7 @@ export function AddToCart({onRequireAuth}: AddToCartProps) {
                 eventId: eventState.activeEventId,
                 eventTypeId: visitIntent.eventTypeId,
                 shampoo: eventState.shampoo ? 1 : 0,
-                userId: user?.id,
+                userId: user?.id || '',
                 turnstileToken,
             });
 
diff --git a/vite_project/src/components/user-authentication/Sign.tsx b/vite_project/src/components/user-authentication/Sign.tsx
@@ -1,4 +1,3 @@
-import {useLoginUser} from "../../hooks/domain/useLoginUser.tsx";
 import {useState} from "react";
 import {useUserState} from "../../state/User/useUserState.ts";
 import {loginWithCredentials} from "../../domain/user/authentication.ts";
@@ -8,15 +7,15 @@ export const Sign: React.FC = () => {
     const [password, setPassword] = useState('');
     const [submitting, setSubmitting] = useState(false);
     const [errorMessage, setErrorMessage] = useState<string | null>(null);
-    const { refreshUser} = useUserState()
+    const { refreshUser, config} = useUserState()
 
     const handleSubmit = async (e: React.FormEvent) => {
         e.preventDefault();
         setErrorMessage(null);
 
         try {
             setSubmitting(true);
-            await loginWithCredentials(email, password);
+            await loginWithCredentials(email, password, config);
             await refreshUser();
         } catch {
             setErrorMessage('Incorrect email or password');
diff --git a/vite_project/src/components/user-authentication/SignInOrRegister.tsx b/vite_project/src/components/user-authentication/SignInOrRegister.tsx
@@ -1,13 +1,13 @@
 import {Sign} from "./Sign.tsx";
 import {useUserState} from "../../state/User/useUserState.ts";
 import {Spinner} from "../global/Spinner.tsx";
-import {ErrorState} from "../global/ErrorState.tsx";
+//import {ErrorState} from "../global/ErrorState.tsx";
 
 export const SignInOrRegister: React.FC = () => {
-    const {loading, error} = useUserState();
+    const {loading} = useUserState();
 
     if (loading) return <Spinner />
-    if (error) return <ErrorState />
+    //if (error) return <ErrorState />
 
     return (
         <div className="drawer-auth">
diff --git a/vite_project/src/domain/user/authentication.ts b/vite_project/src/domain/user/authentication.ts
@@ -1,8 +1,9 @@
 import type {AuthenticatedUser} from "../../types/domain/user.type.ts";
 import {activity} from "../../../activity";
+import type {UserConfig} from "../../state/User/type.ts";
 
-export async function fetchUserFromBridge(): Promise<AuthenticatedUser | undefined> {
-    const res = await fetch(`/auth/refresh-session`, {
+export async function fetchUserFromBridge(config: UserConfig): Promise<AuthenticatedUser | undefined> {
+    const res = await fetch(`${config.auth}/auth/refresh-session`, {
         method: 'POST',
         credentials: 'include',
     });
@@ -19,8 +20,8 @@ export async function fetchUserFromBridge(): Promise<AuthenticatedUser | undefin
 }
 
 // auth.api.ts
-export async function loginWithCredentials(email: string, password: string) {
-    const res = await fetch('/auth/login', {
+export async function loginWithCredentials(email: string, password: string, config: UserConfig) {
+    const res = await fetch(`${config.auth}/auth/login`, {
         method: 'POST',
         credentials: 'include',
         headers: { 'Content-Type': 'application/json' },
diff --git a/vite_project/src/hooks/domain/useLoginUser.tsx b/vite_project/src/hooks/domain/useLoginUser.tsx
diff --git a/vite_project/src/hooks/useWidgetConfig.ts b/vite_project/src/hooks/useWidgetConfig.ts
@@ -2,9 +2,11 @@ import {useMemo} from "react";
 import {
     type BookingWidgetConfig, readBookingHostConfig, readBookingSystemConfig,
 } from "../BookingSystemConfig.tsx";
+import type {UserConfig} from "../state/User/type.ts";
 
 export function useWidgetConfig(host: HTMLElement): {
     booking: BookingWidgetConfig;
+    user: UserConfig
 } {
     return useMemo(() => {
         const system = readBookingSystemConfig();
@@ -15,6 +17,9 @@ export function useWidgetConfig(host: HTMLElement): {
                 api: system.widgets.booking!.api,
                 venueId: hostConfig.venueId,
                 cloudflareKey: system.integrations?.cloudflare?.siteKey,
+            },
+            user: {
+                auth: system.widgets.booking!.auth,
             }
         });
     }, [host]);
diff --git a/vite_project/src/state/User/UserStateProvider.tsx b/vite_project/src/state/User/UserStateProvider.tsx
@@ -1,36 +1,43 @@
 import {type ReactNode, useEffect} from "react";
 import {LocalUserStateContext} from "./UserState.tsx";
 import {useImmer} from "use-immer";
-import type { UserState} from "./type.ts";
+import type {UserConfig, UserInfoState} from "./type.ts";
 import type {AuthenticatedUser} from "../../types/domain/user.type.ts";
 import {fetchUserFromBridge} from "../../domain/user/authentication.ts";
 
 const LocalStateProvider = LocalUserStateContext.Provider;
 
-
-
 interface UserStateProviderProps {
     children: ReactNode;
+    config: UserConfig
+}
+
+const intialState: UserInfoState = {
+    user: undefined,
+    loading: false,
+    error: null
 }
 
-export const UserStateProvider: React.FC<UserStateProviderProps> = ({ children}) => {
-    const [state, setState] = useImmer<UserState>({
-        user: undefined,
-        loading: true,
-        error: null
-    });
+export const UserStateProvider: React.FC<UserStateProviderProps> = ({ children, config}) => {
+    const [state, setState] = useImmer<UserInfoState>(intialState);
+
+    if (!config?.auth?.startsWith('https://')) {
+        throw new Error(
+            'UserStateProvider: authBaseUrl must be a valid https URL'
+        );
+    }
 
-    const startLoading = (draft: UserState) => {
+    const startLoading = (draft: UserInfoState) => {
         draft.loading = true;
         draft.error = null;
     };
 
-    const setSuccess = (draft: UserState, user: AuthenticatedUser | undefined) => {
+    const setSuccess = (draft: UserInfoState, user: AuthenticatedUser | undefined) => {
         draft.user = user;
         draft.loading = false;
     };
 
-    const setFailure = (draft: UserState, err: Error) => {
+    const setFailure = (draft: UserInfoState, err: Error) => {
         draft.user = undefined;
         draft.loading = false;
         draft.error = err;
@@ -40,7 +47,7 @@ export const UserStateProvider: React.FC<UserStateProviderProps> = ({ children})
         try {
             setState(startLoading);
 
-            const user = await fetchUserFromBridge();
+            const user = await fetchUserFromBridge(config);
 
             setState(draft => setSuccess(draft, user));
         } catch (err) {
@@ -49,13 +56,15 @@ export const UserStateProvider: React.FC<UserStateProviderProps> = ({ children})
     };
 
     useEffect(() => {
+        if (!config?.auth) return;
+
         let alive = true;
 
         const safeRefresh = async () => {
             try {
                 setState(startLoading);
 
-                const user = await fetchUserFromBridge();
+                const user = await fetchUserFromBridge(config);
                 if (!alive) return;
 
                 setState(draft => setSuccess(draft, user));
@@ -79,6 +88,7 @@ export const UserStateProvider: React.FC<UserStateProviderProps> = ({ children})
                 user: state.user,
                 loading: state.loading,
                 error: state.error,
+                config,
                 refreshUser: refresh,
             }}
         >
diff --git a/vite_project/src/state/User/type.ts b/vite_project/src/state/User/type.ts
@@ -1,8 +1,19 @@
 import type {AuthenticatedUser} from "../../types/domain/user.type.ts";
 
+export interface UserInfoState {
+    user?: AuthenticatedUser;
+    loading: boolean;
+    error?: Error | null;
+}
+
 export interface UserState {
-    user: AuthenticatedUser | undefined;
+    user?: AuthenticatedUser;
     loading: boolean;
     error?: Error | null;
     refreshUser: () => Promise<void>;
+    config: UserConfig
+}
+
+export interface UserConfig {
+    auth: string;
 }

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "widget-booking",`
`3`	`3`	`"private": true,`
`4`		`- "version": "0.2.0",`
	`4`	`+ "version": "0.2.1",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"scripts": {`
`7`	`7`	`"dev": "vite",`
Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ export function BookingSystemWrapper({venueId}: Props) {`
`27`	`27`	`} = useEventTypeGroups(venue?.id);`
`28`	`28`
`29`	`29`	`if (venueError \|\| hostsError \|\| eventTypeGroupError) {`
`30`		`- activity('bootstrap', 'Keystone data cannot be returned', null, 'error');`
	`30`	`+ activity('bootstrap', 'Keystone data cannot be returned', {venue, hostsError, eventTypeGroupError}, 'error');`
`31`	`31`	`return <ErrorState />;`
`32`	`32`	`}`
`33`	`33`