tf-checkout-react-native 2.0.0-beta.0 → 2.0.0-beta.5

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "tf-checkout-react-native",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-beta.5",
   "description": "TheTicketFairy ReactNative Checkout library",
-  "homepage": "https://github.com/theticketfairy/tf-checkout-react-native",
+  "homepage": "https://github.com/theticketfairy/tf-shared-libraries#readme",
   "author": "The Ticket Fairy",
   "license": "MIT",
   "main": "./dist/index.js",
@@ -18,6 +18,7 @@
   },
   "files": [
     "src",
+    "scripts",
     "dist",
     "android",
     "ios",
@@ -41,7 +42,7 @@
     "lint": "eslint \"**/*.{js,ts,tsx}\"",
     "lint:fix": "eslint \"**/*.{js,ts,tsx}\" --fix",
     "clean": "del-cli lib",
-    "build": "tsup",
+    "build": "pnpm --filter tf-checkout-shared build && node scripts/build-seat-map.mjs && tsup",
     "prepare": "npm run build",
     "release": "release-it",
     "release:current": "release-it --no-increment",
@@ -57,10 +58,11 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/theticketfairy/tf-checkout-react-native.git"
+    "url": "git+https://github.com/theticketfairy/tf-shared-libraries.git",
+    "directory": "packages/tf-checkout-react-native"
   },
   "bugs": {
-    "url": "https://github.com/theticketfairy/tf-checkout-react-native/issues"
+    "url": "https://github.com/theticketfairy/tf-shared-libraries/issues"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -82,6 +84,7 @@
     "@types/react-test-renderer": "^19.1.0",
     "commitlint": "^19.8.1",
     "del-cli": "^6.0.0",
+    "esbuild": "0.27.2",
     "eslint": "^9.36.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
@@ -92,10 +95,13 @@
     "jiti": "^2.6.0",
     "prettier": "3.6.2",
     "react": "19.1.0",
+    "react-dom": "19.1.0",
     "react-native": "0.81.4",
     "react-native-mmkv": "^3.3.1",
+    "react-native-webview": "13.15.0",
     "release-it": "^19.0.4",
     "tf-checkout-shared": "workspace:*",
+    "tf-seat-map-view": "9.4.7-beta.33",
     "tsup": "^8.5.1",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.45.0"
@@ -137,16 +143,22 @@
     "version": "0.54.3"
   },
   "dependencies": {
-    "axios": "^1.7.9"
+    "axios": "^1.7.9",
+    "entities": "^7.0.1",
+    "htmlparser2": "10.1.0"
   },
   "//peerDependencies": "Anything that MUST exist exactly once in the app: React contexts (react-query) and native modules (Stripe, MMKV, Clipboard). Shipping these as regular dependencies gives the consumer a second copy, which means a second React context (their <QueryClientProvider> becomes invisible to our hooks) or a duplicate native pod. As peers there is one copy, the consumer can use react-query in their own app alongside our hooks, and no Metro/bundler aliasing is ever needed. npm 7+/pnpm install peers automatically.",
   "peerDependencies": {
     "@react-native-clipboard/clipboard": ">=1.14.0",
     "@stripe/stripe-react-native": ">=0.45.0",
     "@tanstack/react-query": ">=5",
-    "react": "*",
-    "react-native": "*",
-    "react-native-mmkv": ">=3"
+    "react": ">=19.1",
+    "react-native": ">=0.81",
+    "react-native-mmkv": "^3.0.0",
+    "react-native-webview": ">=13.15.0"
   },
-  "//dependencies": "tf-checkout-shared is INLINED into this bundle (tsup noExternal), so its own runtime deps are ours too — axios must stay declared here or tsup bundles it (dragging Node's stream into a browser build) / the consumer never installs it."
+  "//dependencies": "tf-checkout-shared is INLINED into this bundle (tsup noExternal), so its own runtime deps are ours too \u2014 axios, entities and htmlparser2 must stay declared here or tsup bundles them (axios drags Node's stream into a browser build) / the consumer never installs them.",
+  "engines": {
+    "node": ">=20.19.4"
+  }
 }

package/scripts/build-seat-map.mjs

@@ -0,0 +1,31 @@
+import { build } from 'esbuild'
+import { readFile, mkdir, writeFile } from 'node:fs/promises'
+import { createRequire } from 'node:module'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
+const require = createRequire(path.join(root, 'package.json'))
+const result = await build({
+  entryPoints: [path.join(root, 'scripts/seat-map-entry.jsx')],
+  bundle: true,
+  minify: true,
+  write: false,
+  format: 'iife',
+  platform: 'browser',
+  target: 'es2020',
+  define: { 'process.env.NODE_ENV': '"production"' },
+  alias: {
+    react: path.dirname(require.resolve('react/package.json')),
+    'react-dom': path.dirname(require.resolve('react-dom/package.json')),
+  },
+})
+const css = await readFile(require.resolve('tf-seat-map-view/dist/index.css'), 'utf8')
+await mkdir(path.join(root, 'src/generated'), { recursive: true })
+await writeFile(
+  path.join(root, 'src/generated/seatMapWidget.ts'),
+  '// Generated by scripts/build-seat-map.mjs from pinned package sources.\n' +
+    `export const SEAT_MAP_SCRIPT = ${JSON.stringify(result.outputFiles[0].text)}\n` +
+    `export const SEAT_MAP_CSS = ${JSON.stringify(css)}\n`
+)
+console.log(`Built native seat renderer: ${result.outputFiles[0].text.length} bytes`)

package/scripts/seat-map-entry.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import SeatMap from 'tf-seat-map-view'
+
+const root = createRoot(document.getElementById('seat-map'))
+window.__tfSeatMapUpdate = (properties) => {
+  window.tierPrices = properties.tierPrices
+  const size = window.innerWidth
+  root.render(
+    <SeatMap
+      {...properties}
+      width={size}
+      height={size}
+      events={{
+        onSeatClick: (event) =>
+          window.ReactNativeWebView?.postMessage(
+            JSON.stringify({ type: 'seatClick', seat: event.seat })
+          ),
+      }}
+    />
+  )
+}

package/src/CardInput.tsx

@@ -9,21 +9,82 @@
  * (`confirmer.init` → `initStripe`), which always runs before the payment step
  * is reached.
  */
-import React, { type FC } from 'react'
-import { StyleSheet } from 'react-native'
+import React, { useEffect, useRef, useState, type FC } from 'react'
+import { Platform, StyleSheet } from 'react-native'
 import { CardField } from '@stripe/stripe-react-native'
+import {
+  cardClaimStep,
+  createCardFieldRegistry,
+  type CardClaimStep,
+  type CardFieldClaim,
+  type CardFieldHandle,
+} from 'tf-checkout-shared'
 
 import { useTheme } from './ui/CheckoutProvider'
 
 export interface CardInputProps {
   /** Fires with the field's completeness so the payment CTA can enable/disable. */
   onComplete?: (complete: boolean) => void
+  /** The flow this field pays for (`claimCardField(owner)`). Default `checkout`. */
+  owner?: string
+  /** False while the flow is hidden: the field is then never used. */
+  visible?: boolean
 }
 
-export const CardInput: FC<CardInputProps> = ({ onComplete }) => {
+// The native SDK holds one card field. Android clears it when any field is
+// dropped; iOS only when the newest one goes. The field left is remounted so
+// the SDK attaches it again; the buyer re-enters the card there.
+// Each field has an owner (its flow) and a visibility; a hidden field is never
+// used. Attaching a field again remounts it, so the card is entered again.
+const cardFields = createCardFieldRegistry(
+  Platform.OS === 'android' ? 'any-removed' : 'active-removed',
+  false
+)
+
+/**
+ * Call before a flow confirms a card payment: attaches the flow's own visible
+ * field. `reattached` means the field was remounted empty: ask for the card
+ * again. `unavailable` when the flow has no visible field.
+ */
+export const claimCardField = (owner: string): CardFieldClaim => cardFields.claim(owner)
+
+/**
+ * The claim `placeOrder` uses when its caller passes no `claimCard` (a host's
+ * own Pay): the default ticket field, owner `checkout`. A confirm then never
+ * uses a bundle's field, and with no ticket field it refuses.
+ */
+export const claimDefaultCardField: CardClaimStep = cardClaimStep('nativeCard', () =>
+  claimCardField('checkout')
+)
+
+export const CardInput: FC<CardInputProps> = ({
+  onComplete,
+  owner = 'checkout',
+  visible = true,
+}) => {
   const theme = useTheme()
+  const [attachment, setAttachment] = useState(0)
+  const handleRef = useRef<CardFieldHandle | null>(null)
+  const visibleRef = useRef(visible)
+  visibleRef.current = visible
+  useEffect(() => {
+    const handle = cardFields.mount(
+      owner,
+      () => setAttachment((n) => n + 1),
+      visibleRef.current
+    )
+    handleRef.current = handle
+    return () => {
+      handle.unmount()
+      handleRef.current = null
+    }
+  }, [owner])
+  useEffect(() => {
+    handleRef.current?.setVisible(visible)
+  }, [visible])
   return (
     <CardField
+      key={attachment}
       postalCodeEnabled={false}
       // Set explicitly and neutrally: stripe-react-native's own default number
       // placeholder is a Stripe TEST PAN, which reads to a real buyer as an

package/src/EmbeddedCheckout.tsx

@@ -11,30 +11,39 @@
  *
  * Native adaptations vs web (commented at each site): no smooth `scrollIntoView`
  * (RN `ScrollView`); no URL attribution (`readAttributionFromUrl` accepted for
- * parity); the seat-map view is a placeholder until the native seat picker
- * (WebView + seats.io) lands.
+ * parity); the shared seat-selection controller drives the native chart WebView.
  */
-import React, { useEffect, useRef, useState, type FC } from 'react'
+import React, { useEffect, useRef, useState, type FC, type ReactNode } from 'react'
 import { Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'
 
-import type {
-  CheckoutBilling,
-  CheckoutConsent,
-  CheckoutHolder,
-  EventCondition,
-  PlaceOrderResult,
-  TfProfile,
+import {
+  canLeavePayment,
+  createTranslator,
+  embeddedCheckoutEvent,
+  embeddedCheckoutProps,
+  embeddedCheckoutView,
+  heldOrderNotice,
+  hooks,
+  type CheckoutBilling,
+  type CheckoutConsent,
+  type CheckoutHolder,
+  type EventCondition,
+  type PlaceOrderResult,
+  type TfProfile,
 } from 'tf-checkout-shared'
 
 import { AuthModal } from './auth/AuthModal'
 import { AddOns } from './sections/AddOns'
 import { BillingInfo, type CheckoutPrivacyPolicy } from './sections/BillingInfo'
+import { Bundles } from './sections/Bundles'
 import { Confirmation } from './sections/Confirmation'
 import { IDVerification } from './sections/IDVerification'
 import { Payment } from './sections/Payment'
 import { Tickets } from './sections/Tickets'
+import { SeatMap } from './sections/SeatMap'
+import { WaiverSigning } from './sections/WaiverSigning'
 import { CheckoutProvider, useCheckoutContext, useTheme } from './ui/CheckoutProvider'
-import { Card, BodyText, MutedText, Button } from './ui/primitives'
+import { Button } from './ui/primitives'
 import { TimerBanner } from './ui/TimerBanner'
 import type { CheckoutTheme } from './ui/theme'
 
@@ -42,6 +51,7 @@ type SelectionView = 'tickets' | 'seats'
 export type CheckoutView = SelectionView | 'checkout'
 
 export interface EmbeddedCheckoutAuthOptions {
+  onCheckoutAuthenticated?: (profile: import('tf-checkout-shared').CheckoutBuyerProfile) => void
   allowRegistration?: boolean
   allowPasswordReset?: boolean
   requireRegistrationAddress?: boolean
@@ -59,6 +69,9 @@ export interface EmbeddedCheckoutProps {
    * leaves completion routing to `onComplete` and keeps the checkout mounted.
    */
   confirmationMode?: 'inline' | 'redirect'
+  /** Rendered inside the receipt, below the order details — the seam for the
+   *  `<Rewards/>` block or a host's own post-purchase content. */
+  confirmationChildren?: ReactNode
   /** Initial screen. `seats` preserves an existing seat-map entry point. */
   initialView?: SelectionView
   /** Reports the visible flow view so hosts can coordinate their own UI. */
@@ -104,6 +117,7 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
   eventId,
   onComplete,
   confirmationMode = 'inline',
+  confirmationChildren,
   initialView = 'tickets',
   onViewChange,
   requireEmailConfirmation = true,
@@ -136,17 +150,24 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
   const requestLogin = onLogin ?? (auth !== false ? openBuiltInAuth : undefined)
 
   // Never let state from another event/run select this component's UI view.
+  // While the order is placed or charged, Payment stays on screen: it holds
+  // the only retry that finalizes a charged order (`embeddedCheckoutView`).
   const checkoutBelongsToEvent = checkout.eventId === eventId
-  const checkoutAvailable = checkoutBelongsToEvent && checkout.status !== 'expired'
-  const visibleView: CheckoutView =
-    view === 'checkout' && !checkoutAvailable ? 'tickets' : view
+  const visibleView: CheckoutView = embeddedCheckoutView(view, {
+    belongsToEvent: checkoutBelongsToEvent,
+    status: checkout.status,
+    orderFixed: checkout.orderFixed,
+  })
+  const leaveAllowed = canLeavePayment(checkout)
 
   useEffect(() => {
-    if (view === 'checkout' && !checkoutAvailable) {
+    if (visibleView === view) return
+    if (visibleView === 'checkout') setView('checkout')
+    else {
       setView('tickets')
       setSelectionView('tickets')
     }
-  }, [checkoutAvailable, view])
+  }, [view, visibleView])
 
   useEffect(() => {
     onViewChange?.(visibleView)
@@ -165,6 +186,7 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
   }
 
   const editSelection = () => {
+    if (!canLeavePayment(checkout)) return
     editedDetailsRef.current = {
       billing: checkout.billing,
       holders: checkout.holders,
@@ -196,7 +218,7 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
     return (
       <ScrollView contentContainerStyle={styles.content}>
         <IDVerification />
-        <Confirmation />
+        <Confirmation>{confirmationChildren}</Confirmation>
       </ScrollView>
     )
   }
@@ -206,15 +228,27 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
       contentContainerStyle={styles.content}
       keyboardShouldPersistTaps="handled"
     >
-      {visibleView === 'tickets' && (
-        <Tickets
+      {/* Bundles stay mounted while hidden, as on web, so a purchase in
+          progress keeps its order and key when the buyer goes to checkout. */}
+      <View style={visibleView === 'tickets' ? styles.stack : styles.hidden}>
+        <Bundles
           eventId={eventId}
-          onContinue={() => enterCheckout('tickets')}
-          onSelectSeats={() => setView('seats')}
-          initialPromoCode={initialPromoCode}
-          referrer={referrer}
-          readAttributionFromUrl={readAttributionFromUrl}
+          visible={visibleView === 'tickets'}
+          onComplete={onComplete}
+          confirmationMode={confirmationMode}
         />
+      </View>
+      {visibleView === 'tickets' && (
+        <View style={styles.stack}>
+          <Tickets
+            eventId={eventId}
+            onContinue={() => enterCheckout('tickets')}
+            onSelectSeats={() => setView('seats')}
+            initialPromoCode={initialPromoCode}
+            referrer={referrer}
+            readAttributionFromUrl={readAttributionFromUrl}
+          />
+        </View>
       )}
 
       {visibleView === 'seats' && (
@@ -224,15 +258,7 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
               ← Back to tickets
             </Text>
           </Pressable>
-          {/* Native seat picker (WebView + seats.io) is a follow-up; the web
-              `<SeatMap/>` has no RN analogue yet. */}
-          <Card>
-            <BodyText>Seat selection isn’t available in the app yet.</BodyText>
-            <MutedText>
-              Please pick general-admission tickets, or use the web checkout to choose
-              seats.
-            </MutedText>
-          </Card>
+          <SeatMap eventId={eventId} onContinue={() => enterCheckout('seats')} />
         </View>
       )}
 
@@ -244,8 +270,21 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
               {selectedCount} {selectedCount === 1 ? 'ticket' : 'tickets'} selected
               {formattedTotal ? ` · ${formattedTotal}` : ''}
             </Text>
-            <Pressable onPress={editSelection} accessibilityRole="button">
-              <Text style={[styles.editText, { color: theme.accent }]}>Edit</Text>
+            <Pressable
+              onPress={editSelection}
+              disabled={!leaveAllowed}
+              accessibilityRole="button"
+              accessibilityState={{ disabled: !leaveAllowed }}
+            >
+              <Text
+                style={[
+                  styles.editText,
+                  { color: theme.accent },
+                  !leaveAllowed && styles.editTextDisabled,
+                ]}
+              >
+                Edit
+              </Text>
             </Pressable>
           </View>
 
@@ -262,6 +301,7 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
             privacyPolicy={privacyPolicy}
             showPrivacyError={privacyAttempted}
           />
+          <WaiverSigning eventId={eventId} />
           <Payment
             onComplete={onComplete}
             eventId={eventId}
@@ -278,6 +318,7 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
 
       {authRequest && auth !== false && !onLogin && (
         <AuthModal
+          checkoutEventId={eventId}
           key={authRequest.key}
           open
           initialEmail={authRequest.email}
@@ -291,6 +332,7 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
           requireRegistrationAddress={auth?.requireRegistrationAddress}
           logoUrl={auth?.logoUrl}
           onAuthenticated={auth?.onAuthenticated}
+          onCheckoutAuthenticated={auth?.onCheckoutAuthenticated}
           onClose={() => setAuthRequest(null)}
         />
       )}
@@ -298,14 +340,55 @@ const Flow: FC<Omit<EmbeddedCheckoutProps, 'theme'>> = ({
   )
 }
 
+type FlowProps = Omit<EmbeddedCheckoutProps, 'theme'>
+
+// The native flow's own copy is English, as the rest of this screen.
+const translate = createTranslator()
+
+/**
+ * Keeps the checkout on the event whose order is being paid, is charged, or
+ * is kept after a payment step that may have moved money, while the host
+ * asks for another event: that event's Payment is the only way to finish
+ * the order, and the engine starts no other cart until it settles or resets
+ * (`embeddedCheckoutEvent`). It keeps the props it had for that event, even
+ * across a remount, so nothing the new event adds blocks the retry
+ * (`embeddedCheckoutProps`). The
+ * buyer reads why.
+ */
+const EventFlow: FC<FlowProps> = (flow) => {
+  const checkout = useCheckoutContext()
+  const theme = useTheme()
+  const shown = embeddedCheckoutEvent(flow.eventId, checkout)
+  // A held order keeps the props it was shown with, kept with the store.
+  const flowProps = embeddedCheckoutProps(checkout.store, flow)
+  const heldEvent = hooks.useEvent(shown.waitingFor ? shown.eventId : undefined).data
+  const notice = shown.waitingFor ? heldOrderNotice(heldEvent?.name) : null
+  return (
+    <>
+      {notice && (
+        <View
+          accessibilityLiveRegion="polite"
+          style={[styles.notice, { borderColor: theme.accent }]}
+        >
+          <Text style={[styles.noticeText, { color: theme.text }]}>
+            {translate(notice.key, notice.params)}
+          </Text>
+        </View>
+      )}
+      <Flow key={flowProps.eventId} {...flowProps} />
+    </>
+  )
+}
+
 export const EmbeddedCheckout: FC<EmbeddedCheckoutProps> = ({ theme, ...flow }) => (
   <CheckoutProvider theme={theme}>
-    <Flow key={flow.eventId} {...flow} />
+    <EventFlow {...flow} />
   </CheckoutProvider>
 )
 
 const styles = StyleSheet.create({
   content: { padding: 16, gap: 12 },
+  hidden: { display: 'none' },
   stack: { gap: 12 },
   back: { paddingVertical: 4 },
   backText: { fontSize: 15, fontWeight: '600' },
@@ -320,4 +403,14 @@ const styles = StyleSheet.create({
   },
   selectionText: { fontSize: 14, flex: 1 },
   editText: { fontSize: 14, fontWeight: '600' },
+  editTextDisabled: { opacity: 0.4 },
+  notice: {
+    marginHorizontal: 16,
+    marginTop: 16,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+  },
+  noticeText: { fontSize: 14, lineHeight: 20 },
 })

package/src/auth/AuthModal.tsx

@@ -24,8 +24,14 @@ import { useTheme } from '../ui/CheckoutProvider'
 import { ForgotPasswordForm } from './ForgotPasswordForm'
 import { LoginForm } from './LoginForm'
 import { RegisterForm } from './RegisterForm'
+import { TwoFactorForm } from './TwoFactorForm'
+import { EmailCodeForm } from './EmailCodeForm'
 
 export interface AuthModalProps {
+  checkoutEventId?: string
+  onCheckoutAuthenticated?: (
+    profile: import('tf-checkout-shared').CheckoutBuyerProfile
+  ) => void
   open: boolean
   onClose: () => void
   allowRegistration?: boolean
@@ -68,6 +74,8 @@ export const AuthModal: FC<AuthModalProps> = ({
   requireRegistrationAddress = true,
   logoUrl,
   onAuthenticated,
+  checkoutEventId,
+  onCheckoutAuthenticated,
   initialEmail,
   message,
 }) => {
@@ -80,16 +88,27 @@ export const AuthModal: FC<AuthModalProps> = ({
     [onAuthenticated, onClose]
   )
   const auth = hooks.useAuthFlow({
+    checkoutEventId,
+    onCheckoutAuthenticated: (profile) => {
+      onCheckoutAuthenticated?.(profile)
+      onClose()
+    },
     initialEmail,
     requireRegistrationAddress,
     onAuthenticated: closeAfterAuth,
   })
 
   const isPasswordReset = auth.view === 'forgot-password'
-  const showTabs = allowRegistration && !isPasswordReset
+  const showTabs =
+    allowRegistration &&
+    !isPasswordReset &&
+    auth.view !== 'two-factor' &&
+    auth.view !== 'email-code'
   // Don't let a backdrop / back-button dismiss interrupt an in-flight submit.
-  const requestClose = () => {
-    if (!auth.isSubmitting) onClose()
+  const requestClose = async () => {
+    if (auth.isSubmitting) return
+    if (auth.twoFactorChallenge) await auth.cancelTwoFactor()
+    onClose()
   }
 
   return (
@@ -102,13 +121,17 @@ export const AuthModal: FC<AuthModalProps> = ({
         >
           <View style={styles.header}>
             <Text style={[styles.title, { color: theme.text }]}>
-              {isPasswordReset ? 'Password reset' : 'Ticket Fairy account'}
+              {isPasswordReset
+                ? 'Password reset'
+                : auth.view === 'two-factor'
+                  ? 'Verify your sign in'
+                  : 'Ticket Fairy account'}
             </Text>
             <Pressable
               accessibilityRole="button"
               accessibilityLabel="Close"
               disabled={auth.isSubmitting}
-              onPress={onClose}
+              onPress={() => void requestClose()}
               hitSlop={12}
             >
               <Text style={[styles.close, { color: theme.muted }]}>✕</Text>
@@ -145,6 +168,33 @@ export const AuthModal: FC<AuthModalProps> = ({
 
             {message && !isPasswordReset ? <MutedText>{message}</MutedText> : null}
 
+            {auth.view === 'email-code' ? (
+              <EmailCodeForm
+                initialEmail={auth.suggestedEmail}
+                sent={auth.emailCodeSent}
+                target={auth.emailCodeTarget}
+                retryAfter={auth.emailRetryAfter}
+                loading={auth.isSubmitting}
+                error={auth.error}
+                successMessage={auth.successMessage}
+                onRequest={auth.requestEmailCode}
+                onVerify={auth.submitEmailCode}
+                onBack={() => auth.showLogin(auth.suggestedEmail)}
+              />
+            ) : null}
+            {auth.view === 'two-factor' && auth.twoFactorChallenge ? (
+              <TwoFactorForm
+                loading={auth.isSubmitting}
+                error={auth.error}
+                successMessage={auth.successMessage}
+                smsAvailable={auth.twoFactorChallenge.smsAvailable}
+                smsRetryAfter={auth.smsRetryAfter}
+                onSubmit={auth.submitTwoFactor}
+                onSendSms={auth.sendTwoFactorSms}
+                onCancel={auth.cancelTwoFactor}
+              />
+            ) : null}
+
             {auth.view === 'login' ? (
               <LoginForm
                 initialEmail={auth.suggestedEmail}
@@ -158,13 +208,47 @@ export const AuthModal: FC<AuthModalProps> = ({
               />
             ) : null}
 
+            {auth.view === 'login' && auth.browserSignInAvailable ? (
+              <View style={{ gap: 12 }}>
+                {(['google', 'apple', 'facebook', 'passkey'] as const).map((provider) => (
+                  <Pressable
+                    key={provider}
+                    accessibilityRole="button"
+                    disabled={auth.isSubmitting}
+                    onPress={() => void auth.submitBrowserSignIn(provider)}
+                  >
+                    <Text style={{ color: theme.accent }}>
+                      {provider === 'passkey'
+                        ? 'Sign in with a passkey'
+                        : `Sign in with ${provider === 'google' ? 'Google' : provider === 'apple' ? 'Apple' : 'Facebook'}`}
+                    </Text>
+                  </Pressable>
+                ))}
+              </View>
+            ) : null}
+            {auth.view === 'login' && auth.emailCodeAvailable ? (
+              <Pressable onPress={() => auth.showEmailCode(auth.suggestedEmail)}>
+                <Text style={{ color: theme.accent }}>Sign in with an email code</Text>
+              </Pressable>
+            ) : null}
             {auth.view === 'register' && allowRegistration ? (
               <RegisterForm
                 initialEmail={auth.suggestedEmail}
                 errors={auth.fieldErrors}
                 error={auth.error}
                 loading={auth.isSubmitting}
-                requireAddress={requireRegistrationAddress}
+                requireAddress={auth.requireRegistrationAddress}
+                requireTerms={Boolean(auth.accountCompletion)}
+                completionRefresh={
+                  auth.accountCompletion
+                    ? {
+                        retryAfter: auth.emailRetryAfter,
+                        onRequest: () =>
+                          auth.requestEmailCode(auth.accountCompletion!.email),
+                        onVerify: auth.submitEmailCode,
+                      }
+                    : undefined
+                }
                 onSubmit={auth.submitRegistration}
                 onFieldChange={auth.clearFieldError}
               />