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

package/src/auth/AuthModal.tsx

@@ -14,18 +14,26 @@
  *
  * Render inside `<CheckoutProvider>` so it inherits the theme + query client.
  */
-import React, { useCallback, type FC } from 'react'
+import React, { useCallback, useEffect, useRef, type FC } from 'react'
 import { Image, Modal, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native'
 
-import { hooks, type TfProfile } from 'tf-checkout-shared'
+import { getConfig, hooks, type TfProfile } from 'tf-checkout-shared'
 
 import { MutedText } from '../ui/primitives'
 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'
+import { PhoneAuthentication } from '../sections/PhoneAuthentication'
+import { useAccountT } from '../ui/useAccountT'
 
 export interface AuthModalProps {
+  checkoutEventId?: string
+  onCheckoutAuthenticated?: (
+    profile: import('tf-checkout-shared').CheckoutBuyerProfile
+  ) => void
   open: boolean
   onClose: () => void
   allowRegistration?: boolean
@@ -60,7 +68,7 @@ const Tab: FC<{ label: string; active: boolean; onPress: () => void }> = ({
   )
 }
 
-export const AuthModal: FC<AuthModalProps> = ({
+const CredentialAuthModal: FC<AuthModalProps> = ({
   open,
   onClose,
   allowRegistration = true,
@@ -68,10 +76,13 @@ export const AuthModal: FC<AuthModalProps> = ({
   requireRegistrationAddress = true,
   logoUrl,
   onAuthenticated,
+  checkoutEventId,
+  onCheckoutAuthenticated,
   initialEmail,
   message,
 }) => {
   const theme = useTheme()
+  const t = useAccountT()
   const closeAfterAuth = useCallback(
     (profile: TfProfile) => {
       onAuthenticated?.(profile)
@@ -80,16 +91,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 +124,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 +171,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 +211,52 @@ export const AuthModal: FC<AuthModalProps> = ({
               />
             ) : null}
 
+            {auth.view === 'login' && auth.browserSignInAvailable ? (
+              <View style={{ gap: 12 }}>
+                {auth.checkoutPhoneSignInAvailable ? (
+                  <Pressable accessibilityRole="button" disabled={auth.isSubmitting} onPress={() => void auth.submitBrowserSignIn('phone')}>
+                    <Text style={{ color: theme.accent }}>{t('auth.browser.phone')}</Text>
+                  </Pressable>
+                ) : null}
+                {(['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}
               />
@@ -189,6 +281,91 @@ export const AuthModal: FC<AuthModalProps> = ({
   )
 }
 
+const PhoneAccountModal: FC<AuthModalProps> = ({
+  onClose,
+  onAuthenticated,
+  initialEmail,
+  logoUrl,
+  message,
+  allowRegistration = true,
+  allowPasswordReset = true,
+}) => {
+  const theme = useTheme()
+  const t = useAccountT()
+  const flow = hooks.usePhoneAuthentication({
+    initialMode: initialEmail ? 'email' : 'phone',
+    passwordResetTransport: 'native',
+    onAuthenticated: (profile) => {
+      onAuthenticated?.(profile)
+      onClose()
+    },
+    onCancelled: onClose,
+  })
+  const prepared = useRef(false)
+  useEffect(() => {
+    if (prepared.current) return
+    prepared.current = true
+    if (initialEmail) flow.emailAuth.showLogin(initialEmail)
+  }, [initialEmail, flow.emailAuth])
+  const busy = flow.state.busy || flow.emailAuth.isSubmitting
+  const close = () => {
+    if (!busy) flow.cancel()
+  }
+  return (
+    <Modal visible animationType="slide" transparent onRequestClose={close}>
+      <Pressable style={styles.backdrop} onPress={close}>
+        <Pressable
+          style={[styles.sheet, { backgroundColor: theme.surface }]}
+          onPress={() => {}}
+        >
+          <View style={styles.header}>
+            <Text style={[styles.title, { color: theme.text }]}>
+              {t('Your Ticket Fairy account')}
+            </Text>
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel={t('Close')}
+              disabled={busy}
+              onPress={close}
+            >
+              <Text style={[styles.close, { color: theme.muted }]}>✕</Text>
+            </Pressable>
+          </View>
+          <ScrollView
+            contentContainerStyle={styles.body}
+            keyboardShouldPersistTaps="handled"
+          >
+            {logoUrl ? (
+              <Image source={{ uri: logoUrl }} style={styles.logo} resizeMode="contain" />
+            ) : null}
+            {message ? <MutedText>{message}</MutedText> : null}
+            <PhoneAuthentication
+              flow={flow}
+              allowCreation={allowRegistration}
+              allowPasswordReset={allowPasswordReset}
+            />
+          </ScrollView>
+        </Pressable>
+      </Pressable>
+    </Modal>
+  )
+}
+
+/** Explicit checkout scope and specialized registration keep the existing credential owner. */
+export const AuthModal: FC<AuthModalProps> = (props) => {
+  const config = getConfig()
+  const fullAccount = config.accountAuth && config.cookieAuth
+  const specialized =
+    Boolean(props.checkoutEventId) || props.requireRegistrationAddress === false
+  return fullAccount && !specialized ? (
+    props.open ? (
+      <PhoneAccountModal {...props} />
+    ) : null
+  ) : (
+    <CredentialAuthModal {...props} />
+  )
+}
+
 const styles = StyleSheet.create({
   backdrop: { flex: 1, justifyContent: 'flex-end', backgroundColor: 'rgba(0,0,0,0.4)' },
   sheet: {

package/src/auth/EmailCodeForm.tsx

@@ -0,0 +1,91 @@
+import React, { useState, type FC } from 'react'
+import { View } from 'react-native'
+import { Button, ErrorText, MutedText } from '../ui/primitives'
+import { Field, Input } from '../ui/Field'
+export interface EmailCodeFormProps {
+  initialEmail: string
+  sent: boolean
+  target: string
+  retryAfter: number
+  loading: boolean
+  error: string
+  successMessage: string
+  onRequest: (email: string) => Promise<boolean>
+  onVerify: (code: string) => Promise<unknown>
+  onBack: () => void
+}
+export const EmailCodeForm: FC<EmailCodeFormProps> = ({
+  initialEmail,
+  sent,
+  target,
+  retryAfter,
+  loading,
+  error,
+  successMessage,
+  onRequest,
+  onVerify,
+  onBack,
+}) => {
+  const [email, setEmail] = useState(initialEmail)
+  const [code, setCode] = useState('')
+  return (
+    <View style={{ gap: 14 }}>
+      <MutedText>
+        {sent
+          ? `Enter the sign-in code sent to ${target}.`
+          : 'Receive a one-time sign-in code by email.'}
+      </MutedText>
+      {error ? <ErrorText>{error}</ErrorText> : null}
+      {successMessage ? <MutedText>{successMessage}</MutedText> : null}
+      <Field label="Email" required>
+        <Input
+          value={email}
+          onChangeText={setEmail}
+          keyboardType="email-address"
+          autoCapitalize="none"
+          editable={!sent && !loading}
+          accessibilityLabel="Email"
+        />
+      </Field>
+      {sent ? (
+        <>
+          <Field label="Sign-in code" required>
+            <Input
+              value={code}
+              onChangeText={(value) => setCode(value.replace(/\D/g, '').slice(0, 6))}
+              accessibilityLabel="Sign-in code"
+              keyboardType="number-pad"
+              textContentType="oneTimeCode"
+              autoComplete="one-time-code"
+              maxLength={6}
+              autoFocus
+              editable={!loading}
+            />
+          </Field>
+          <Button
+            loading={loading}
+            disabled={!/^\d{6}$/.test(code)}
+            onPress={() => void onVerify(code)}
+          >
+            Verify code
+          </Button>
+        </>
+      ) : null}
+      <Button
+        loading={!sent && loading}
+        variant={sent ? 'ghost' : 'primary'}
+        disabled={loading || retryAfter > 0 || !email.trim()}
+        onPress={() => void onRequest(email)}
+      >
+        {retryAfter > 0
+          ? `Send another code in ${retryAfter}s`
+          : sent
+            ? 'Resend code'
+            : 'Send sign-in code'}
+      </Button>
+      <Button variant="ghost" disabled={loading} onPress={onBack}>
+        Use password instead
+      </Button>
+    </View>
+  )
+}

package/src/auth/RegisterForm.tsx

@@ -7,29 +7,38 @@
  *     `phone-pad` input (the US default still seeds it with "+1").
  */
 import React, { useEffect, useMemo, useState, type FC } from 'react'
-import { StyleSheet, View } from 'react-native'
+import { Linking, Pressable, StyleSheet, View } from 'react-native'
 
 import {
   hooks,
+  createTranslator,
+  type LocaleCode,
   type AuthFieldErrors,
   type AuthFieldName,
   type AuthRegistrationInput,
 } from 'tf-checkout-shared'
 
-import { Button, ErrorText } from '../ui/primitives'
+import { Button, ErrorText, MutedText } from '../ui/primitives'
 import { Field, Input } from '../ui/Field'
 import { Select, type SelectOption } from '../ui/Select'
 import { PasswordInput } from './PasswordInput'
 
 export interface RegisterFormProps {
   initialEmail?: string
+  locale?: LocaleCode
   errors?: AuthFieldErrors
   error?: string
   loading?: boolean
   requireAddress?: boolean
+  requireTerms?: boolean
+  completionRefresh?: {
+    retryAfter: number
+    onRequest: () => Promise<boolean>
+    onVerify: (code: string) => Promise<unknown>
+  }
   onSubmit: (
     input: AuthRegistrationInput,
-    options: { requireState: boolean }
+    options: { requireState: boolean; termsAccepted?: boolean }
   ) => void | Promise<unknown>
   onFieldChange?: (field: AuthFieldName) => void
 }
@@ -50,16 +59,23 @@ const emptyRegistration = (email: string): AuthRegistrationInput => ({
 
 export const RegisterForm: FC<RegisterFormProps> = ({
   initialEmail = '',
+  locale,
   errors = {},
   error,
   loading = false,
   requireAddress = true,
+  requireTerms = false,
+  completionRefresh,
   onSubmit,
   onFieldChange,
 }) => {
+  const t = useMemo(() => createTranslator({ locale }), [locale])
   const [values, setValues] = useState<AuthRegistrationInput>(() =>
     emptyRegistration(initialEmail)
   )
+  const [termsAccepted, setTermsAccepted] = useState(false)
+  const [refreshingProof, setRefreshingProof] = useState(false)
+  const [refreshCode, setRefreshCode] = useState('')
   const countriesQuery = hooks.useCountries()
   const countries = useMemo(() => countriesQuery.data ?? [], [countriesQuery.data])
   const statesQuery = hooks.useStates(values.countryId, {
@@ -103,7 +119,8 @@ export const RegisterForm: FC<RegisterFormProps> = ({
     [states]
   )
 
-  const submit = () => void onSubmit(values, { requireState: states.length > 0 })
+  const submit = () =>
+    void onSubmit(values, { requireState: states.length > 0, termsAccepted })
 
   return (
     <View style={styles.form}>
@@ -137,6 +154,7 @@ export const RegisterForm: FC<RegisterFormProps> = ({
       <Field label="Email" required error={errors.email}>
         <Input
           value={values.email}
+          editable={!requireTerms}
           onChangeText={(text) => setField('email', text)}
           placeholder="Email"
           keyboardType="email-address"
@@ -233,7 +251,75 @@ export const RegisterForm: FC<RegisterFormProps> = ({
         />
       </Field>
 
-      <Button onPress={submit} loading={loading}>
+      {completionRefresh ? (
+        <View style={{ gap: 12 }}>
+          <Button
+            disabled={loading || completionRefresh.retryAfter > 0}
+            onPress={() => {
+              setRefreshingProof(true)
+              void completionRefresh.onRequest()
+            }}
+          >
+            {t('auth.completionVerifyAgain')}
+            {completionRefresh.retryAfter > 0
+              ? ` (${completionRefresh.retryAfter}s)`
+              : ''}
+          </Button>
+          {refreshingProof ? (
+            <>
+              <Field label={t('auth.completionNewCode')}>
+                <Input
+                  value={refreshCode}
+                  keyboardType="number-pad"
+                  textContentType="oneTimeCode"
+                  maxLength={6}
+                  onChangeText={(value) =>
+                    setRefreshCode(value.replace(/\D/g, '').slice(0, 6))
+                  }
+                />
+              </Field>
+              <Button
+                disabled={loading || !/^\d{6}$/.test(refreshCode)}
+                onPress={() => void completionRefresh.onVerify(refreshCode)}
+              >
+                {t('auth.completionVerifyCode')}
+              </Button>
+            </>
+          ) : null}
+        </View>
+      ) : null}
+      {requireTerms ? (
+        <View style={{ gap: 8 }}>
+          <Pressable
+            accessibilityRole="checkbox"
+            accessibilityState={{ checked: termsAccepted }}
+            onPress={() => setTermsAccepted((current) => !current)}
+          >
+            <MutedText>
+              {termsAccepted ? '☑' : '☐'} {t('auth.completionAgree')}
+            </MutedText>
+          </Pressable>
+          <Pressable
+            accessibilityRole="link"
+            onPress={() =>
+              void Linking.openURL('https://www.ticketfairy.com/terms-of-service')
+            }
+          >
+            <MutedText>{t('auth.completionTerms')}</MutedText>
+          </Pressable>
+          <Pressable
+            accessibilityRole="link"
+            onPress={() => void Linking.openURL('https://www.ticketfairy.com/privacy')}
+          >
+            <MutedText>{t('auth.completionPrivacy')}</MutedText>
+          </Pressable>
+        </View>
+      ) : null}
+      <Button
+        onPress={submit}
+        loading={loading}
+        disabled={requireTerms && !termsAccepted}
+      >
         Create Account
       </Button>
     </View>

package/src/auth/TwoFactorForm.tsx

@@ -0,0 +1,74 @@
+import React, { useState, type FC } from 'react'
+import { View } from 'react-native'
+import { Button, ErrorText, MutedText } from '../ui/primitives'
+import { Field, Input } from '../ui/Field'
+
+export interface TwoFactorFormProps {
+  loading: boolean
+  error: string
+  successMessage: string
+  smsAvailable: boolean
+  smsRetryAfter: number
+  onSubmit: (code: string) => Promise<unknown>
+  onSendSms: () => Promise<boolean>
+  onCancel: () => Promise<void>
+}
+
+/** Presentation only; the shared headless flow owns the pending identity. */
+export const TwoFactorForm: FC<TwoFactorFormProps> = ({
+  loading,
+  error,
+  successMessage,
+  smsAvailable,
+  smsRetryAfter,
+  onSubmit,
+  onSendSms,
+  onCancel,
+}) => {
+  const [code, setCode] = useState('')
+  return (
+    <View style={{ gap: 14 }}>
+      <MutedText>
+        Enter the six-digit code from your authenticator app or registered phone to
+        complete sign-in.
+      </MutedText>
+      {error ? <ErrorText>{error}</ErrorText> : null}
+      {successMessage ? <MutedText>{successMessage}</MutedText> : null}
+      <Field label="Verification code" required>
+        <Input
+          accessibilityLabel="Verification code"
+          value={code}
+          onChangeText={(value) => setCode(value.replace(/\D/g, '').slice(0, 6))}
+          keyboardType="number-pad"
+          textContentType="oneTimeCode"
+          autoComplete="one-time-code"
+          maxLength={6}
+          autoFocus
+          editable={!loading}
+          onSubmitEditing={() => void onSubmit(code)}
+        />
+      </Field>
+      <Button
+        loading={loading}
+        disabled={!/^\d{6}$/.test(code)}
+        onPress={() => void onSubmit(code)}
+      >
+        Verify code
+      </Button>
+      {smsAvailable ? (
+        <Button
+          variant="ghost"
+          disabled={loading || smsRetryAfter > 0}
+          onPress={() => void onSendSms()}
+        >
+          {smsRetryAfter > 0
+            ? `Send another code in ${smsRetryAfter}s`
+            : 'Send a code by SMS'}
+        </Button>
+      ) : null}
+      <Button variant="ghost" disabled={loading} onPress={() => void onCancel()}>
+        Use password again
+      </Button>
+    </View>
+  )
+}

package/src/auth/index.ts

@@ -5,3 +5,7 @@ export { RegisterForm } from './RegisterForm'
 export { ForgotPasswordForm } from './ForgotPasswordForm'
 export { ResetPasswordForm } from './ResetPasswordForm'
 export { PasswordInput } from './PasswordInput'
+
+export { TwoFactorForm, type TwoFactorFormProps } from './TwoFactorForm'
+
+export { EmailCodeForm, type EmailCodeFormProps } from './EmailCodeForm'

package/src/configure.ts

@@ -1,19 +1,17 @@
 /**
- * One-time SDK setup for React Native. Wraps the shared `configure()` and
- * defaults the token store to a persisted MMKV adapter. Call once at app
- * start, before any `useCheckout`/`ttf` call:
+ * One-time React Native SDK setup. Defaults SDK-owned storage to persisted
+ * MMKV. Call before any checkout, API or hook:
  *
- *   configureCheckout({ env: 'PROD', clientId, clientSecret })
+ *   configureCheckout({ env: 'PROD', clientId: 'PUBLIC_SDK_CLIENT_ID', clientSecret: '' })
  *
- * `cookieAuth` defaults ON: native sign-in must ride the legacy cookie-session
- * flow (`POST /auth`), NOT the OAuth bearer chain. The cart lives in the
- * backend session, and a bearer request without a guest header is moved onto a
- * synthetic empty session — so a buyer who reserves tickets and then logs in
- * mid-checkout would lose the cart ("The cart is expired"). On the cookie flow
- * no bearer is ever minted, the session that holds the cart stays put, and the
- * X-TF-ECOMMERCE ticket is persisted to MMKV (the shared cookie shim falls
- * back to the storage adapter off-browser) so sign-in survives a relaunch.
- * Pass `cookieAuth: false` to opt back into the bearer chain.
+ * Public checkout sign-in preserves the event-bound guest carrier and keeps
+ * its buyer credential server-side; it does not return a full-account ticket
+ * or grant private account scope. Never bundle a confidential client secret.
+ * First-party full-account flows explicitly use `accountAuth: true`.
+ *
+ * The wrapper defaults `cookieAuth` to true and disables ambient native cookie
+ * handling. Owned credentials use the SDK's header-backed storage; the backend
+ * still validates a restored session.
  */
 import { configure, type TtfConfig } from 'tf-checkout-shared'
 
@@ -23,4 +21,11 @@ import { createMmkvStorage } from './storage'
 export const mmkvStorageAdapter = createMmkvStorage()
 
 export const configureCheckout = (config: TtfConfig): void =>
-  configure({ storage: mmkvStorageAdapter, cookieAuth: true, ...config })
+  configure({
+    storage: mmkvStorageAdapter,
+    cookieAuth: true,
+    ...config,
+    // NSURLSession/RCTNetworking would otherwise accept Set-Cookie outside
+    // the SDK epoch guard. Only the SDK's header-backed jar owns native auth.
+    withCredentials: false,
+  })