Phone number verification in account creation (#2564)

* Add optional sms verification

* Add support link to account creation

* Add e2e tests

* Bump api@0.9.0

* Update lockfile

* Bump api@0.9.1

* Include the phone number in the ui

* Add phone number validation and normalization

__e2e__/mock-server.ts

@@ -14,7 +14,8 @@ async function main() {
       await server?.close()
       console.log('Starting new server')
       const inviteRequired = url?.query && 'invite' in url.query
-      server = await createServer({inviteRequired})
+      const phoneRequired = url?.query && 'phone' in url.query
+      server = await createServer({inviteRequired, phoneRequired})
       console.log('Listening at', server.pdsUrl)
       if (url?.query) {
         if ('users' in url.query) {

__e2e__/tests/create-account.test.ts

@@ -16,14 +16,12 @@ describe('Create account', () => {
 
     await element(by.id('createAccountButton')).tap()
     await device.takeScreenshot('1- opened create account screen')
-    await element(by.id('otherServerBtn')).tap()
+    await element(by.id('selectServiceButton')).tap()
     await device.takeScreenshot('2- selected other server')
-    await element(by.id('customServerInput')).clearText()
+    await element(by.id('customServerTextInput')).typeText(service)
-    await element(by.id('customServerInput')).typeText(service)
+    await element(by.id('customServerTextInput')).tapReturnKey()
+    await element(by.id('customServerSelectBtn')).tap()
     await device.takeScreenshot('3- input test server URL')
-
-    await element(by.id('nextBtn')).tap()
-
     await element(by.id('emailInput')).typeText('example@test.com')
     await element(by.id('passwordInput')).typeText('hunter2')
     await device.takeScreenshot('4- entered account details')
@@ -31,7 +29,7 @@ describe('Create account', () => {
     await element(by.id('nextBtn')).tap()
 
     await element(by.id('handleInput')).typeText('e2e-test')
-    await device.takeScreenshot('4- entered handle')
+    await device.takeScreenshot('5- entered handle')
 
     await element(by.id('nextBtn')).tap()
 

__e2e__/tests/invite-codes.test.ts

@@ -1,10 +1,5 @@
 /* eslint-env detox/detox */
 
-/**
- * This test is being skipped until we can resolve the detox crash issue
- * with the side drawer.
- */
-
 import {describe, beforeAll, it} from '@jest/globals'
 import {expect} from 'detox'
 import {openApp, loginAsAlice, createServer} from '../util'
@@ -31,12 +26,12 @@ describe('invite-codes', () => {
     await element(by.id('e2eOpenLoggedOutView')).tap()
     await element(by.id('createAccountButton')).tap()
     await device.takeScreenshot('1- opened create account screen')
-    await element(by.id('otherServerBtn')).tap()
+    await element(by.id('selectServiceButton')).tap()
     await device.takeScreenshot('2- selected other server')
-    await element(by.id('customServerInput')).clearText()
+    await element(by.id('customServerTextInput')).typeText(service)
-    await element(by.id('customServerInput')).typeText(service)
+    await element(by.id('customServerTextInput')).tapReturnKey()
+    await element(by.id('customServerSelectBtn')).tap()
     await device.takeScreenshot('3- input test server URL')
-    await element(by.id('nextBtn')).tap()
     await element(by.id('inviteCodeInput')).typeText(inviteCode)
     await element(by.id('emailInput')).typeText('example@test.com')
     await element(by.id('passwordInput')).typeText('hunter2')

__e2e__/tests/invites-and-text-verification.test.ts

@@ -0,0 +1,57 @@
+/* eslint-env detox/detox */
+
+import {describe, beforeAll, it} from '@jest/globals'
+import {expect} from 'detox'
+import {openApp, loginAsAlice, createServer} from '../util'
+
+describe('invite-codes', () => {
+  let service: string
+  let inviteCode = ''
+  beforeAll(async () => {
+    service = await createServer('?users&invite&phone')
+    await openApp({permissions: {notifications: 'YES'}})
+  })
+
+  it('I can fetch invite codes', async () => {
+    await loginAsAlice()
+    await element(by.id('e2eOpenInviteCodesModal')).tap()
+    await expect(element(by.id('inviteCodesModal'))).toBeVisible()
+    const attrs = await element(by.id('inviteCode-0-code')).getAttributes()
+    inviteCode = attrs.text
+    await element(by.id('closeBtn')).tap()
+    await element(by.id('e2eSignOut')).tap()
+  })
+
+  it('I can create a new account with the invite code', async () => {
+    await element(by.id('e2eOpenLoggedOutView')).tap()
+    await element(by.id('createAccountButton')).tap()
+    await device.takeScreenshot('1- opened create account screen')
+    await element(by.id('selectServiceButton')).tap()
+    await device.takeScreenshot('2- selected other server')
+    await element(by.id('customServerTextInput')).typeText(service)
+    await element(by.id('customServerTextInput')).tapReturnKey()
+    await element(by.id('customServerSelectBtn')).tap()
+    await device.takeScreenshot('3- input test server URL')
+    await element(by.id('inviteCodeInput')).typeText(inviteCode)
+    await element(by.id('emailInput')).typeText('example@test.com')
+    await element(by.id('passwordInput')).typeText('hunter2')
+    await device.takeScreenshot('4- entered account details')
+    await element(by.id('nextBtn')).tap()
+    await element(by.id('phoneInput')).typeText('5558675309')
+    await element(by.id('requestCodeBtn')).tap()
+    await device.takeScreenshot('5- requested code')
+    await element(by.id('codeInput')).typeText('000000')
+    await device.takeScreenshot('6- entered code')
+    await element(by.id('nextBtn')).tap()
+    await element(by.id('handleInput')).typeText('e2e-test')
+    await device.takeScreenshot('7- entered handle')
+    await element(by.id('nextBtn')).tap()
+    await expect(element(by.id('welcomeOnboarding'))).toBeVisible()
+    await element(by.id('continueBtn')).tap()
+    await expect(element(by.id('recommendedFeedsOnboarding'))).toBeVisible()
+    await element(by.id('continueBtn')).tap()
+    await expect(element(by.id('recommendedFollowsOnboarding'))).toBeVisible()
+    await element(by.id('continueBtn')).tap()
+    await expect(element(by.id('homeScreen'))).toBeVisible()
+  })
+})

__e2e__/tests/text-verification.test.ts

@@ -0,0 +1,85 @@
+/* eslint-env detox/detox */
+
+import {describe, beforeAll, it} from '@jest/globals'
+import {expect} from 'detox'
+import {openApp, createServer} from '../util'
+
+describe('Create account', () => {
+  let service: string
+  beforeAll(async () => {
+    service = await createServer('?phone')
+    await openApp({permissions: {notifications: 'YES'}})
+  })
+
+  it('I can create a new account with text verification', async () => {
+    await element(by.id('e2eOpenLoggedOutView')).tap()
+
+    await element(by.id('createAccountButton')).tap()
+    await device.takeScreenshot('1- opened create account screen')
+    await element(by.id('selectServiceButton')).tap()
+    await device.takeScreenshot('2- selected other server')
+    await element(by.id('customServerTextInput')).typeText(service)
+    await element(by.id('customServerTextInput')).tapReturnKey()
+    await element(by.id('customServerSelectBtn')).tap()
+    await device.takeScreenshot('3- input test server URL')
+    await element(by.id('emailInput')).typeText('text-verification@test.com')
+    await element(by.id('passwordInput')).typeText('hunter2')
+    await device.takeScreenshot('4- entered account details')
+    await element(by.id('nextBtn')).tap()
+
+    await element(by.id('phoneInput')).typeText('1234567890')
+    await element(by.id('requestCodeBtn')).tap()
+    await device.takeScreenshot('5- requested code')
+
+    await element(by.id('codeInput')).typeText('000000')
+    await device.takeScreenshot('6- entered code')
+    await element(by.id('nextBtn')).tap()
+
+    await element(by.id('handleInput')).typeText('text-verification-test')
+    await device.takeScreenshot('7- entered handle')
+
+    await element(by.id('nextBtn')).tap()
+
+    await expect(element(by.id('welcomeOnboarding'))).toBeVisible()
+    await element(by.id('continueBtn')).tap()
+    await expect(element(by.id('recommendedFeedsOnboarding'))).toBeVisible()
+    await element(by.id('continueBtn')).tap()
+    await expect(element(by.id('recommendedFollowsOnboarding'))).toBeVisible()
+    await element(by.id('continueBtn')).tap()
+    await expect(element(by.id('homeScreen'))).toBeVisible()
+  })
+
+  it('failed text verification correctly goes back to the code input screen', async () => {
+    await element(by.id('e2eSignOut')).tap()
+    await element(by.id('e2eOpenLoggedOutView')).tap()
+
+    await element(by.id('createAccountButton')).tap()
+    await device.takeScreenshot('1- opened create account screen')
+    await element(by.id('selectServiceButton')).tap()
+    await device.takeScreenshot('2- selected other server')
+    await element(by.id('customServerTextInput')).typeText(service)
+    await element(by.id('customServerTextInput')).tapReturnKey()
+    await element(by.id('customServerSelectBtn')).tap()
+    await device.takeScreenshot('3- input test server URL')
+    await element(by.id('emailInput')).typeText('text-verification2@test.com')
+    await element(by.id('passwordInput')).typeText('hunter2')
+    await device.takeScreenshot('4- entered account details')
+    await element(by.id('nextBtn')).tap()
+
+    await element(by.id('phoneInput')).typeText('1234567890')
+    await element(by.id('requestCodeBtn')).tap()
+    await device.takeScreenshot('5- requested code')
+
+    await element(by.id('codeInput')).typeText('111111')
+    await device.takeScreenshot('6- entered code')
+    await element(by.id('nextBtn')).tap()
+
+    await element(by.id('handleInput')).typeText('text-verification-test2')
+    await device.takeScreenshot('7- entered handle')
+
+    await element(by.id('nextBtn')).tap()
+
+    await expect(element(by.id('codeInput'))).toBeVisible()
+    await device.takeScreenshot('8- got error')
+  })
+})

__e2e__/util.ts

@@ -105,7 +105,7 @@ async function openAppForDebugBuild(platform: string, opts: any) {
   await sleep(3000)
 }
 
-export async function createServer(path = '') {
+export async function createServer(path = ''): Promise<string> {
   return new Promise(function (resolve, reject) {
     var req = http.request(
       {

jest/test-pds.ts

@@ -1,7 +1,7 @@
 import net from 'net'
 import path from 'path'
 import fs from 'fs'
-import {TestNetwork} from '@atproto/dev-env'
+import {TestNetwork, TestPds} from '@atproto/dev-env'
 import {AtUri, BskyAgent} from '@atproto/api'
 
 export interface TestUser {
@@ -55,19 +55,36 @@ class StringIdGenerator {
 const ids = new StringIdGenerator()
 
 export async function createServer(
-  {inviteRequired}: {inviteRequired: boolean} = {inviteRequired: false},
+  {
+    inviteRequired,
+    phoneRequired,
+  }: {inviteRequired: boolean; phoneRequired: boolean} = {
+    inviteRequired: false,
+    phoneRequired: false,
+  },
 ): Promise<TestPDS> {
-  const port = await getPort()
+  const port = 3000
   const port2 = await getPort(port + 1)
   const port3 = await getPort(port2 + 1)
   const pdsUrl = `http://localhost:${port}`
   const id = ids.next()
 
+  const phoneParams = phoneRequired
+    ? {
+        phoneVerificationRequired: true,
+        twilioAccountSid: 'ACXXXXXXX',
+        twilioAuthToken: 'AUTH',
+        twilioServiceSid: 'VAXXXXXXXX',
+      }
+    : {}
+
   const testNet = await TestNetwork.create({
     pds: {
       port,
       hostname: 'localhost',
+      dbPostgresSchema: `pds_${id}`,
       inviteRequired,
+      ...phoneParams,
     },
     bsky: {
       dbPostgresSchema: `bsky_${id}`,
@@ -76,6 +93,7 @@ export async function createServer(
     },
     plc: {port: port2},
   })
+  mockTwilio(testNet.pds)
 
   const pic = fs.readFileSync(
     path.join(__dirname, '..', 'assets', 'default-avatar.png'),
@@ -144,6 +162,8 @@ class Mocker {
       email,
       handle: name + '.test',
       password: 'hunter2',
+      verificationPhone: '1234567890',
+      verificationCode: '000000',
     })
     await agent.upsertProfile(async () => {
       const blob = await agent.uploadBlob(this.pic, {
@@ -430,3 +450,15 @@ async function getPort(start = 3000) {
   }
   throw new Error('Unable to find an available port')
 }
+
+export const mockTwilio = (pds: TestPds) => {
+  if (!pds.ctx.twilio) return
+
+  pds.ctx.twilio.sendCode = async (_number: string) => {
+    // do nothing
+  }
+
+  pds.ctx.twilio.verifyCode = async (_number: string, code: string) => {
+    return code === '000000'
+  }
+}

package.json

@@ -39,7 +39,7 @@
     "nuke": "rm -rf ./node_modules && rm -rf ./ios && rm -rf ./android"
   },
   "dependencies": {
-    "@atproto/api": "^0.8.0",
+    "@atproto/api": "^0.9.1",
     "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@braintree/sanitize-url": "^6.0.2",
     "@emoji-mart/react": "^1.1.1",
@@ -120,6 +120,7 @@
     "js-sha256": "^0.9.0",
     "jwt-decode": "^4.0.0",
     "lande": "^1.0.10",
+    "libphonenumber-js": "^1.10.53",
     "lodash.chunk": "^4.2.0",
     "lodash.debounce": "^4.0.8",
     "lodash.isequal": "^4.5.0",

src/state/session/index.tsx

@@ -44,6 +44,8 @@ export type ApiContext = {
     password: string
     handle: string
     inviteCode?: string
+    verificationPhone?: string
+    verificationCode?: string
   }) => Promise<void>
   login: (props: {
     service: string
@@ -203,7 +205,15 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   }, [setStateAndPersist, queryClient])
 
   const createAccount = React.useCallback<ApiContext['createAccount']>(
-    async ({service, email, password, handle, inviteCode}: any) => {
+    async ({
+      service,
+      email,
+      password,
+      handle,
+      inviteCode,
+      verificationPhone,
+      verificationCode,
+    }: any) => {
       logger.info(`session: creating account`, {
         service,
         handle,
@@ -217,6 +227,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
         password,
         email,
         inviteCode,
+        verificationPhone,
+        verificationCode,
       })
 
       if (!agent.session) {

src/view/com/auth/create/CreateAccount.tsx

@@ -22,12 +22,13 @@ import {
   useSetSaveFeedsMutation,
   DEFAULT_PROD_FEEDS,
 } from '#/state/queries/preferences'
-import {IS_PROD} from '#/lib/constants'
+import {FEEDBACK_FORM_URL, IS_PROD} from '#/lib/constants'
 
 import {Step1} from './Step1'
 import {Step2} from './Step2'
 import {Step3} from './Step3'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {TextLink} from '../../util/Link'
 
 export function CreateAccount({onPressBack}: {onPressBack: () => void}) {
   const {screen} = useAnalytics()
@@ -117,7 +118,7 @@ export function CreateAccount({onPressBack}: {onPressBack: () => void}) {
 
   return (
     <LoggedOutLayout
-      leadin={`Step ${uiState.step}`}
+      leadin=""
       title={_(msg`Create Account`)}
       description={_(msg`We're so excited to have you join us!`)}>
       <ScrollView testID="createAccount" style={pal.view}>
@@ -176,6 +177,27 @@ export function CreateAccount({onPressBack}: {onPressBack: () => void}) {
             </>
           ) : undefined}
         </View>
+
+        <View style={styles.stepContainer}>
+          <View
+            style={[
+              s.flexRow,
+              s.alignCenter,
+              pal.viewLight,
+              {borderRadius: 8, paddingHorizontal: 14, paddingVertical: 12},
+            ]}>
+            <Text type="md" style={pal.textLight}>
+              <Trans>Having trouble?</Trans>{' '}
+            </Text>
+            <TextLink
+              type="md"
+              style={pal.link}
+              text={_(msg`Contact support`)}
+              href={FEEDBACK_FORM_URL({email: uiState.email})}
+            />
+          </View>
+        </View>
+
         <View style={{height: isTabletOrDesktop ? 50 : 400}} />
       </ScrollView>
     </LoggedOutLayout>

src/view/com/auth/create/Step1.tsx

@@ -1,25 +1,38 @@
 import React from 'react'
-import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
+import {
+  ActivityIndicator,
+  Keyboard,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native'
+import {CreateAccountState, CreateAccountDispatch, is18} from './state'
 import {Text} from 'view/com/util/text/Text'
+import {DateInput} from 'view/com/util/forms/DateInput'
 import {StepHeader} from './StepHeader'
-import {CreateAccountState, CreateAccountDispatch} from './state'
-import {useTheme} from 'lib/ThemeContext'
-import {usePalette} from 'lib/hooks/usePalette'
 import {s} from 'lib/styles'
-import {HelpTip} from '../util/HelpTip'
+import {usePalette} from 'lib/hooks/usePalette'
 import {TextInput} from '../util/TextInput'
-import {Button} from 'view/com/util/forms/Button'
+import {Button} from '../../util/forms/Button'
+import {Policies} from './Policies'
 import {ErrorMessage} from 'view/com/util/error/ErrorMessage'
-import {msg, Trans} from '@lingui/macro'
+import {isWeb} from 'platform/detection'
+import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useModalControls} from '#/state/modals'
+import {logger} from '#/logger'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 
-import {LOCAL_DEV_SERVICE, STAGING_SERVICE, PROD_SERVICE} from 'lib/constants'
+function sanitizeDate(date: Date): Date {
-import {LOGIN_INCLUDE_DEV_SERVERS} from 'lib/build-flags'
+  if (!date || date.toString() === 'Invalid Date') {
+    logger.error(`Create account: handled invalid date for birthDate`, {
+      hasDate: !!date,
+    })
+    return new Date()
+  }
+  return date
+}
 
-/** STEP 1: Your hosting provider
- * @field Bluesky (default)
- * @field Other (staging, local dev, your own PDS, etc.)
- */
 export function Step1({
   uiState,
   uiDispatch,
@@ -28,136 +41,175 @@ export function Step1({
   uiDispatch: CreateAccountDispatch
 }) {
   const pal = usePalette('default')
-  const [isDefaultSelected, setIsDefaultSelected] = React.useState(true)
   const {_} = useLingui()
+  const {openModal} = useModalControls()
 
-  const onPressDefault = React.useCallback(() => {
+  const onPressSelectService = React.useCallback(() => {
-    setIsDefaultSelected(true)
+    openModal({
-    uiDispatch({type: 'set-service-url', value: PROD_SERVICE})
+      name: 'server-input',
-  }, [setIsDefaultSelected, uiDispatch])
+      initialService: uiState.serviceUrl,
+      onSelect: (url: string) =>
+        uiDispatch({type: 'set-service-url', value: url}),
+    })
+    Keyboard.dismiss()
+  }, [uiDispatch, uiState.serviceUrl, openModal])
 
-  const onPressOther = React.useCallback(() => {
+  const onPressWaitlist = React.useCallback(() => {
-    setIsDefaultSelected(false)
+    openModal({name: 'waitlist'})
-    uiDispatch({type: 'set-service-url', value: 'https://'})
+  }, [openModal])
-  }, [setIsDefaultSelected, uiDispatch])
 
-  const onChangeServiceUrl = React.useCallback(
+  const birthDate = React.useMemo(() => {
-    (v: string) => {
+    return sanitizeDate(uiState.birthDate)
-      uiDispatch({type: 'set-service-url', value: v})
+  }, [uiState.birthDate])
-    },
-    [uiDispatch],
-  )
 
   return (
     <View>
-      <StepHeader step="1" title={_(msg`Your hosting provider`)} />
+      <StepHeader uiState={uiState} title={_(msg`Your account`)}>
-      <Text style={[pal.text, s.mb10]}>
+        <View>
-        <Trans>This is the service that keeps you online.</Trans>
+          <Button
-      </Text>
+            testID="selectServiceButton"
-      <Option
+            type="default"
-        testID="blueskyServerBtn"
+            style={{
-        isSelected={isDefaultSelected}
+              aspectRatio: 1,
-        label="Bluesky"
+              justifyContent: 'center',
-        help="&nbsp;(default)"
+              alignItems: 'center',
-        onPress={onPressDefault}
+            }}
-      />
+            accessibilityLabel={_(msg`Select service`)}
-      <Option
+            accessibilityHint={_(msg`Sets server for the Bluesky client`)}
-        testID="otherServerBtn"
+            onPress={onPressSelectService}>
-        isSelected={!isDefaultSelected}
+            <FontAwesomeIcon icon="server" size={21} />
-        label="Other"
+          </Button>
-        onPress={onPressOther}>
+        </View>
-        <View style={styles.otherForm}>
+      </StepHeader>
-          <Text nativeID="addressProvider" style={[pal.text, s.mb5]}>
+
-            <Trans>Enter the address of your provider:</Trans>
+      {!uiState.serviceDescription ? (
-          </Text>
+        <ActivityIndicator />
-          <TextInput
+      ) : (
-            testID="customServerInput"
+        <>
-            icon="globe"
+          {uiState.isInviteCodeRequired && (
-            placeholder={_(msg`Hosting provider address`)}
+            <View style={s.pb20}>
-            value={uiState.serviceUrl}
+              <Text type="md-medium" style={[pal.text, s.mb2]}>
-            editable
+                <Trans>Invite code</Trans>
-            onChange={onChangeServiceUrl}
+              </Text>
-            accessibilityHint={_(msg`Input hosting provider address`)}
+              <TextInput
-            accessibilityLabel={_(msg`Hosting provider address`)}
+                testID="inviteCodeInput"
-            accessibilityLabelledBy="addressProvider"
+                icon="ticket"
-          />
+                placeholder={_(msg`Required for this provider`)}
-          {LOGIN_INCLUDE_DEV_SERVERS && (
+                value={uiState.inviteCode}
-            <View style={[s.flexRow, s.mt10]}>
+                editable
-              <Button
+                onChange={value => uiDispatch({type: 'set-invite-code', value})}
-                testID="stagingServerBtn"
+                accessibilityLabel={_(msg`Invite code`)}
-                type="default"
+                accessibilityHint={_(msg`Input invite code to proceed`)}
-                style={s.mr5}
+                autoCapitalize="none"
-                label={_(msg`Staging`)}
+                autoComplete="off"
-                onPress={() => onChangeServiceUrl(STAGING_SERVICE)}
+                autoCorrect={false}
-              />
+                autoFocus={true}
-              <Button
-                testID="localDevServerBtn"
-                type="default"
-                label={_(msg`Dev Server`)}
-                onPress={() => onChangeServiceUrl(LOCAL_DEV_SERVICE)}
               />
             </View>
           )}
-        </View>
+
-      </Option>
+          {!uiState.inviteCode && uiState.isInviteCodeRequired ? (
+            <View style={[s.flexRow, s.alignCenter]}>
+              <Text style={pal.text}>
+                <Trans>Don't have an invite code?</Trans>{' '}
+              </Text>
+              <TouchableWithoutFeedback
+                onPress={onPressWaitlist}
+                accessibilityLabel={_(msg`Join the waitlist.`)}
+                accessibilityHint="">
+                <View style={styles.touchable}>
+                  <Text style={pal.link}>
+                    <Trans>Join the waitlist.</Trans>
+                  </Text>
+                </View>
+              </TouchableWithoutFeedback>
+            </View>
+          ) : (
+            <>
+              <View style={s.pb20}>
+                <Text
+                  type="md-medium"
+                  style={[pal.text, s.mb2]}
+                  nativeID="email">
+                  <Trans>Email address</Trans>
+                </Text>
+                <TextInput
+                  testID="emailInput"
+                  icon="envelope"
+                  placeholder={_(msg`Enter your email address`)}
+                  value={uiState.email}
+                  editable
+                  onChange={value => uiDispatch({type: 'set-email', value})}
+                  accessibilityLabel={_(msg`Email`)}
+                  accessibilityHint={_(msg`Input email for Bluesky account`)}
+                  accessibilityLabelledBy="email"
+                  autoCapitalize="none"
+                  autoComplete="off"
+                  autoCorrect={false}
+                  autoFocus={!uiState.isInviteCodeRequired}
+                />
+              </View>
+
+              <View style={s.pb20}>
+                <Text
+                  type="md-medium"
+                  style={[pal.text, s.mb2]}
+                  nativeID="password">
+                  <Trans>Password</Trans>
+                </Text>
+                <TextInput
+                  testID="passwordInput"
+                  icon="lock"
+                  placeholder={_(msg`Choose your password`)}
+                  value={uiState.password}
+                  editable
+                  secureTextEntry
+                  onChange={value => uiDispatch({type: 'set-password', value})}
+                  accessibilityLabel={_(msg`Password`)}
+                  accessibilityHint={_(msg`Set password`)}
+                  accessibilityLabelledBy="password"
+                  autoCapitalize="none"
+                  autoComplete="off"
+                  autoCorrect={false}
+                />
+              </View>
+
+              <View style={s.pb20}>
+                <Text
+                  type="md-medium"
+                  style={[pal.text, s.mb2]}
+                  nativeID="birthDate">
+                  <Trans>Your birth date</Trans>
+                </Text>
+                <DateInput
+                  handleAsUTC
+                  testID="birthdayInput"
+                  value={birthDate}
+                  onChange={value =>
+                    uiDispatch({type: 'set-birth-date', value})
+                  }
+                  buttonType="default-light"
+                  buttonStyle={[pal.border, styles.dateInputButton]}
+                  buttonLabelType="lg"
+                  accessibilityLabel={_(msg`Birthday`)}
+                  accessibilityHint={_(msg`Enter your birth date`)}
+                  accessibilityLabelledBy="birthDate"
+                />
+              </View>
+
+              {uiState.serviceDescription && (
+                <Policies
+                  serviceDescription={uiState.serviceDescription}
+                  needsGuardian={!is18(uiState)}
+                />
+              )}
+            </>
+          )}
+        </>
+      )}
       {uiState.error ? (
         <ErrorMessage message={uiState.error} style={styles.error} />
-      ) : (
+      ) : undefined}
-        <HelpTip text={_(msg`You can change hosting providers at any time.`)} />
-      )}
-    </View>
-  )
-}
-
-function Option({
-  children,
-  isSelected,
-  label,
-  help,
-  onPress,
-  testID,
-}: React.PropsWithChildren<{
-  isSelected: boolean
-  label: string
-  help?: string
-  onPress: () => void
-  testID?: string
-}>) {
-  const theme = useTheme()
-  const pal = usePalette('default')
-  const {_} = useLingui()
-  const circleFillStyle = React.useMemo(
-    () => ({
-      backgroundColor: theme.palette.primary.background,
-    }),
-    [theme],
-  )
-
-  return (
-    <View style={[styles.option, pal.border]}>
-      <TouchableWithoutFeedback
-        onPress={onPress}
-        testID={testID}
-        accessibilityRole="button"
-        accessibilityLabel={label}
-        accessibilityHint={_(msg`Sets hosting provider to ${label}`)}>
-        <View style={styles.optionHeading}>
-          <View style={[styles.circle, pal.border]}>
-            {isSelected ? (
-              <View style={[circleFillStyle, styles.circleFill]} />
-            ) : undefined}
-          </View>
-          <Text type="xl" style={pal.text}>
-            {label}
-            {help ? (
-              <Text type="xl" style={pal.textLight}>
-                {help}
-              </Text>
-            ) : undefined}
-          </Text>
-        </View>
-      </TouchableWithoutFeedback>
-      {isSelected && children}
     </View>
   )
 }
@@ -165,34 +217,15 @@ function Option({
 const styles = StyleSheet.create({
   error: {
     borderRadius: 6,
+    marginTop: 10,
   },
-
+  dateInputButton: {
-  option: {
     borderWidth: 1,
     borderRadius: 6,
-    marginBottom: 10,
+    paddingVertical: 14,
   },
-  optionHeading: {
+  // @ts-expect-error: Suppressing error due to incomplete `ViewStyle` type definition in react-native-web, missing `cursor` prop as discussed in https://github.com/necolas/react-native-web/issues/832.
-    flexDirection: 'row',
+  touchable: {
-    alignItems: 'center',
+    ...(isWeb && {cursor: 'pointer'}),
-    padding: 10,
-  },
-  circle: {
-    width: 26,
-    height: 26,
-    borderRadius: 15,
-    padding: 4,
-    borderWidth: 1,
-    marginRight: 10,
-  },
-  circleFill: {
-    width: 16,
-    height: 16,
-    borderRadius: 10,
-  },
-
-  otherForm: {
-    paddingBottom: 10,
-    paddingHorizontal: 12,
   },
 })

src/view/com/auth/create/Step2.tsx

@@ -1,39 +1,28 @@
 import React from 'react'
-import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
+import {
-import {CreateAccountState, CreateAccountDispatch, is18} from './state'
+  ActivityIndicator,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native'
+import {
+  CreateAccountState,
+  CreateAccountDispatch,
+  requestVerificationCode,
+} from './state'
 import {Text} from 'view/com/util/text/Text'
-import {DateInput} from 'view/com/util/forms/DateInput'
 import {StepHeader} from './StepHeader'
 import {s} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {TextInput} from '../util/TextInput'
-import {Policies} from './Policies'
+import {Button} from '../../util/forms/Button'
 import {ErrorMessage} from 'view/com/util/error/ErrorMessage'
 import {isWeb} from 'platform/detection'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useModalControls} from '#/state/modals'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {logger} from '#/logger'
+import parsePhoneNumber from 'libphonenumber-js'
 
-function sanitizeDate(date: Date): Date {
-  if (!date || date.toString() === 'Invalid Date') {
-    logger.error(`Create account: handled invalid date for birthDate`, {
-      hasDate: !!date,
-    })
-    return new Date()
-  }
-  return date
-}
-
-/** STEP 2: Your account
- * @field Invite code or waitlist
- * @field Email address
- * @field Email address
- * @field Email address
- * @field Password
- * @field Birth date
- * @readonly Terms of service & privacy policy
- */
 export function Step2({
   uiState,
   uiDispatch,
@@ -43,130 +32,155 @@ export function Step2({
 }) {
   const pal = usePalette('default')
   const {_} = useLingui()
-  const {openModal} = useModalControls()
+  const {isMobile} = useWebMediaQueries()
 
-  const onPressWaitlist = React.useCallback(() => {
+  const onPressRequest = React.useCallback(() => {
-    openModal({name: 'waitlist'})
+    if (
-  }, [openModal])
+      uiState.verificationPhone.length >= 9 &&
+      parsePhoneNumber(uiState.verificationPhone, 'US')
+    ) {
+      requestVerificationCode({uiState, uiDispatch, _})
+    } else {
+      uiDispatch({
+        type: 'set-error',
+        value: _(
+          msg`There's something wrong with this number. Please include your country and/or area code!`,
+        ),
+      })
+    }
+  }, [uiState, uiDispatch, _])
 
-  const birthDate = React.useMemo(() => {
+  const onPressRetry = React.useCallback(() => {
-    return sanitizeDate(uiState.birthDate)
+    uiDispatch({type: 'set-has-requested-verification-code', value: false})
-  }, [uiState.birthDate])
+  }, [uiDispatch])
+
+  const phoneNumberFormatted = React.useMemo(
+    () =>
+      uiState.hasRequestedVerificationCode
+        ? parsePhoneNumber(
+            uiState.verificationPhone,
+            'US',
+          )?.formatInternational()
+        : '',
+    [uiState.hasRequestedVerificationCode, uiState.verificationPhone],
+  )
 
   return (
     <View>
-      <StepHeader step="2" title={_(msg`Your account`)} />
+      <StepHeader uiState={uiState} title={_(msg`SMS verification`)} />
 
-      {uiState.isInviteCodeRequired && (
+      {!uiState.hasRequestedVerificationCode ? (
-        <View style={s.pb20}>
+        <>
-          <Text type="md-medium" style={[pal.text, s.mb2]}>
+          <View style={s.pb20}>
-            <Trans>Invite code</Trans>
+            <Text
-          </Text>
+              type="md-medium"
-          <TextInput
+              style={[pal.text, s.mb2]}
-            testID="inviteCodeInput"
+              nativeID="phoneNumber">
-            icon="ticket"
+              <Trans>Phone number</Trans>
-            placeholder={_(msg`Required for this provider`)}
+            </Text>
-            value={uiState.inviteCode}
+            <TextInput
-            editable
+              testID="phoneInput"
-            onChange={value => uiDispatch({type: 'set-invite-code', value})}
+              icon="phone"
-            accessibilityLabel={_(msg`Invite code`)}
+              placeholder={_(msg`Enter your phone number`)}
-            accessibilityHint={_(msg`Input invite code to proceed`)}
+              value={uiState.verificationPhone}
-            autoCapitalize="none"
+              editable
-            autoComplete="off"
+              onChange={value =>
-            autoCorrect={false}
+                uiDispatch({type: 'set-verification-phone', value})
-          />
+              }
-        </View>
+              accessibilityLabel={_(msg`Email`)}
-      )}
+              accessibilityHint={_(
+                msg`Input phone number for SMS verification`,
+              )}
+              accessibilityLabelledBy="phoneNumber"
+              keyboardType="phone-pad"
+              autoCapitalize="none"
+              autoComplete="tel"
+              autoCorrect={false}
+              autoFocus={true}
+            />
+            <Text type="sm" style={[pal.textLight, s.mt5]}>
+              <Trans>
+                Please enter a phone number that can receive SMS text messages.
+              </Trans>
+            </Text>
+          </View>
 
-      {!uiState.inviteCode && uiState.isInviteCodeRequired ? (
+          <View style={isMobile ? {} : {flexDirection: 'row'}}>
-        <Text style={[s.alignBaseline, pal.text]}>
+            {uiState.isProcessing ? (
-          <Trans>Don't have an invite code?</Trans>{' '}
+              <ActivityIndicator />
-          <TouchableWithoutFeedback
+            ) : (
-            onPress={onPressWaitlist}
+              <Button
-            accessibilityLabel={_(msg`Join the waitlist.`)}
+                testID="requestCodeBtn"
-            accessibilityHint="">
+                type="primary"
-            <View style={styles.touchable}>
+                label={_(msg`Request code`)}
-              <Text style={pal.link}>
+                labelStyle={isMobile ? [s.flex1, s.textCenter, s.f17] : []}
-                <Trans>Join the waitlist.</Trans>
+                style={
-              </Text>
+                  isMobile ? {paddingVertical: 12, paddingHorizontal: 20} : {}
-            </View>
+                }
-          </TouchableWithoutFeedback>
+                onPress={onPressRequest}
-        </Text>
+              />
+            )}
+          </View>
+        </>
       ) : (
         <>
           <View style={s.pb20}>
-            <Text type="md-medium" style={[pal.text, s.mb2]} nativeID="email">
+            <View
-              <Trans>Email address</Trans>
+              style={[
-            </Text>
+                s.flexRow,
+                s.mb5,
+                s.alignCenter,
+                {justifyContent: 'space-between'},
+              ]}>
+              <Text
+                type="md-medium"
+                style={pal.text}
+                nativeID="verificationCode">
+                <Trans>Verification code</Trans>{' '}
+              </Text>
+              <TouchableWithoutFeedback
+                onPress={onPressRetry}
+                accessibilityLabel={_(msg`Retry.`)}
+                accessibilityHint="">
+                <View style={styles.touchable}>
+                  <Text
+                    type="md-medium"
+                    style={pal.link}
+                    nativeID="verificationCode">
+                    <Trans>Retry</Trans>
+                  </Text>
+                </View>
+              </TouchableWithoutFeedback>
+            </View>
             <TextInput
-              testID="emailInput"
+              testID="codeInput"
-              icon="envelope"
+              icon="hashtag"
-              placeholder={_(msg`Enter your email address`)}
+              placeholder={_(msg`XXXXXX`)}
-              value={uiState.email}
+              value={uiState.verificationCode}
               editable
-              onChange={value => uiDispatch({type: 'set-email', value})}
+              onChange={value =>
+                uiDispatch({type: 'set-verification-code', value})
+              }
               accessibilityLabel={_(msg`Email`)}
-              accessibilityHint={_(msg`Input email for Bluesky waitlist`)}
+              accessibilityHint={_(
-              accessibilityLabelledBy="email"
+                msg`Input the verification code we have texted to you`,
+              )}
+              accessibilityLabelledBy="verificationCode"
+              keyboardType="phone-pad"
               autoCapitalize="none"
-              autoComplete="off"
+              autoComplete="one-time-code"
+              textContentType="oneTimeCode"
               autoCorrect={false}
+              autoFocus={true}
             />
-          </View>
+            <Text type="sm" style={[pal.textLight, s.mt5]}>
-
+              <Trans>Please enter the verification code sent to</Trans>{' '}
-          <View style={s.pb20}>
+              {phoneNumberFormatted}.
-            <Text
-              type="md-medium"
-              style={[pal.text, s.mb2]}
-              nativeID="password">
-              <Trans>Password</Trans>
             </Text>
-            <TextInput
-              testID="passwordInput"
-              icon="lock"
-              placeholder={_(msg`Choose your password`)}
-              value={uiState.password}
-              editable
-              secureTextEntry
-              onChange={value => uiDispatch({type: 'set-password', value})}
-              accessibilityLabel={_(msg`Password`)}
-              accessibilityHint={_(msg`Set password`)}
-              accessibilityLabelledBy="password"
-              autoCapitalize="none"
-              autoComplete="off"
-              autoCorrect={false}
-            />
           </View>
-
-          <View style={s.pb20}>
-            <Text
-              type="md-medium"
-              style={[pal.text, s.mb2]}
-              nativeID="birthDate">
-              <Trans>Your birth date</Trans>
-            </Text>
-            <DateInput
-              handleAsUTC
-              testID="birthdayInput"
-              value={birthDate}
-              onChange={value => uiDispatch({type: 'set-birth-date', value})}
-              buttonType="default-light"
-              buttonStyle={[pal.border, styles.dateInputButton]}
-              buttonLabelType="lg"
-              accessibilityLabel={_(msg`Birthday`)}
-              accessibilityHint={_(msg`Enter your birth date`)}
-              accessibilityLabelledBy="birthDate"
-            />
-          </View>
-
-          {uiState.serviceDescription && (
-            <Policies
-              serviceDescription={uiState.serviceDescription}
-              needsGuardian={!is18(uiState)}
-            />
-          )}
         </>
       )}
+
       {uiState.error ? (
         <ErrorMessage message={uiState.error} style={styles.error} />
       ) : undefined}
@@ -179,11 +193,6 @@ const styles = StyleSheet.create({
     borderRadius: 6,
     marginTop: 10,
   },
-  dateInputButton: {
-    borderWidth: 1,
-    borderRadius: 6,
-    paddingVertical: 14,
-  },
   // @ts-expect-error: Suppressing error due to incomplete `ViewStyle` type definition in react-native-web, missing `cursor` prop as discussed in https://github.com/necolas/react-native-web/issues/832.
   touchable: {
     ...(isWeb && {cursor: 'pointer'}),

src/view/com/auth/create/Step3.tsx

@@ -25,7 +25,7 @@ export function Step3({
   const {_} = useLingui()
   return (
     <View>
-      <StepHeader step="3" title={_(msg`Your user handle`)} />
+      <StepHeader uiState={uiState} title={_(msg`Your user handle`)} />
       <View style={s.pb10}>
         <TextInput
           testID="handleInput"

src/view/com/auth/create/StepHeader.tsx

@@ -3,27 +3,42 @@ import {StyleSheet, View} from 'react-native'
 import {Text} from 'view/com/util/text/Text'
 import {usePalette} from 'lib/hooks/usePalette'
 import {Trans} from '@lingui/macro'
+import {CreateAccountState} from './state'
 
-export function StepHeader({step, title}: {step: string; title: string}) {
+export function StepHeader({
+  uiState,
+  title,
+  children,
+}: React.PropsWithChildren<{uiState: CreateAccountState; title: string}>) {
   const pal = usePalette('default')
+  const numSteps = uiState.isPhoneVerificationRequired ? 3 : 2
   return (
     <View style={styles.container}>
-      <Text type="lg" style={[pal.textLight]}>
+      <View>
-        {step === '3' ? (
+        <Text type="lg" style={[pal.textLight]}>
-          <Trans>Last step!</Trans>
+          {uiState.step === 3 ? (
-        ) : (
+            <Trans>Last step!</Trans>
-          <Trans>Step {step} of 3</Trans>
+          ) : (
-        )}
+            <Trans>
-      </Text>
+              Step {uiState.step} of {numSteps}
-      <Text style={[pal.text]} type="title-xl">
+            </Trans>
-        {title}
+          )}
-      </Text>
+        </Text>
+
+        <Text style={[pal.text]} type="title-xl">
+          {title}
+        </Text>
+      </View>
+      {children}
     </View>
   )
 }
 
 const styles = StyleSheet.create({
   container: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
     marginBottom: 20,
   },
 })

src/view/com/auth/create/state.ts

@@ -2,6 +2,7 @@ import {useReducer} from 'react'
 import {
   ComAtprotoServerDescribeServer,
   ComAtprotoServerCreateAccount,
+  BskyAgent,
 } from '@atproto/api'
 import {I18nContext, useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
@@ -13,6 +14,7 @@ import {cleanError} from '#/lib/strings/errors'
 import {DispatchContext as OnboardingDispatchContext} from '#/state/shell/onboarding'
 import {ApiContext as SessionApiContext} from '#/state/session'
 import {DEFAULT_SERVICE} from '#/lib/constants'
+import parsePhoneNumber from 'libphonenumber-js'
 
 export type ServiceDescription = ComAtprotoServerDescribeServer.OutputSchema
 const DEFAULT_DATE = new Date(Date.now() - 60e3 * 60 * 24 * 365 * 20) // default to 20 years ago
@@ -27,6 +29,9 @@ export type CreateAccountAction =
   | {type: 'set-invite-code'; value: string}
   | {type: 'set-email'; value: string}
   | {type: 'set-password'; value: string}
+  | {type: 'set-verification-phone'; value: string}
+  | {type: 'set-verification-code'; value: string}
+  | {type: 'set-has-requested-verification-code'; value: boolean}
   | {type: 'set-handle'; value: string}
   | {type: 'set-birth-date'; value: Date}
   | {type: 'next'}
@@ -43,6 +48,9 @@ export interface CreateAccountState {
   inviteCode: string
   email: string
   password: string
+  verificationPhone: string
+  verificationCode: string
+  hasRequestedVerificationCode: boolean
   handle: string
   birthDate: Date
 
@@ -50,6 +58,7 @@ export interface CreateAccountState {
   canBack: boolean
   canNext: boolean
   isInviteCodeRequired: boolean
+  isPhoneVerificationRequired: boolean
 }
 
 export type CreateAccountDispatch = (action: CreateAccountAction) => void
@@ -66,15 +75,51 @@ export function useCreateAccount() {
     inviteCode: '',
     email: '',
     password: '',
+    verificationPhone: '',
+    verificationCode: '',
+    hasRequestedVerificationCode: false,
     handle: '',
     birthDate: DEFAULT_DATE,
 
     canBack: false,
     canNext: false,
     isInviteCodeRequired: false,
+    isPhoneVerificationRequired: false,
   })
 }
 
+export async function requestVerificationCode({
+  uiState,
+  uiDispatch,
+  _,
+}: {
+  uiState: CreateAccountState
+  uiDispatch: CreateAccountDispatch
+  _: I18nContext['_']
+}) {
+  const phoneNumber = parsePhoneNumber(uiState.verificationPhone, 'US')?.number
+  if (!phoneNumber) {
+    return
+  }
+  uiDispatch({type: 'set-error', value: ''})
+  uiDispatch({type: 'set-processing', value: true})
+  uiDispatch({type: 'set-verification-phone', value: phoneNumber})
+  try {
+    const agent = new BskyAgent({service: uiState.serviceUrl})
+    await agent.com.atproto.temp.requestPhoneVerification({
+      phoneNumber,
+    })
+    uiDispatch({type: 'set-has-requested-verification-code', value: true})
+  } catch (e: any) {
+    logger.error(
+      `Failed to request sms verification code (${e.status} status)`,
+      {error: e},
+    )
+    uiDispatch({type: 'set-error', value: cleanError(e.toString())})
+  }
+  uiDispatch({type: 'set-processing', value: false})
+}
+
 export async function submit({
   createAccount,
   onboardingDispatch,
@@ -89,26 +134,36 @@ export async function submit({
   _: I18nContext['_']
 }) {
   if (!uiState.email) {
-    uiDispatch({type: 'set-step', value: 2})
+    uiDispatch({type: 'set-step', value: 1})
     return uiDispatch({
       type: 'set-error',
       value: _(msg`Please enter your email.`),
     })
   }
   if (!EmailValidator.validate(uiState.email)) {
-    uiDispatch({type: 'set-step', value: 2})
+    uiDispatch({type: 'set-step', value: 1})
     return uiDispatch({
       type: 'set-error',
       value: _(msg`Your email appears to be invalid.`),
     })
   }
   if (!uiState.password) {
-    uiDispatch({type: 'set-step', value: 2})
+    uiDispatch({type: 'set-step', value: 1})
     return uiDispatch({
       type: 'set-error',
       value: _(msg`Please choose your password.`),
     })
   }
+  if (
+    uiState.isPhoneVerificationRequired &&
+    (!uiState.verificationPhone || !uiState.verificationCode)
+  ) {
+    uiDispatch({type: 'set-step', value: 2})
+    return uiDispatch({
+      type: 'set-error',
+      value: _(msg`Please enter the code you received by SMS.`),
+    })
+  }
   if (!uiState.handle) {
     uiDispatch({type: 'set-step', value: 3})
     return uiDispatch({
@@ -127,6 +182,8 @@ export async function submit({
       handle: createFullHandle(uiState.handle, uiState.userDomain),
       password: uiState.password,
       inviteCode: uiState.inviteCode.trim(),
+      verificationPhone: uiState.verificationPhone.trim(),
+      verificationCode: uiState.verificationCode.trim(),
     })
   } catch (e: any) {
     onboardingDispatch({type: 'skip'}) // undo starting the onboard
@@ -135,6 +192,9 @@ export async function submit({
       errMsg = _(
         msg`Invite code not accepted. Check that you input it correctly and try again.`,
       )
+      uiDispatch({type: 'set-step', value: 1})
+    } else if (e.error === 'InvalidPhoneVerification') {
+      uiDispatch({type: 'set-step', value: 2})
     }
 
     if ([400, 429].includes(e.status)) {
@@ -201,6 +261,19 @@ function createReducer({_}: {_: I18nContext['_']}) {
       case 'set-password': {
         return compute({...state, password: action.value})
       }
+      case 'set-verification-phone': {
+        return compute({
+          ...state,
+          verificationPhone: action.value,
+          hasRequestedVerificationCode: false,
+        })
+      }
+      case 'set-verification-code': {
+        return compute({...state, verificationCode: action.value.trim()})
+      }
+      case 'set-has-requested-verification-code': {
+        return compute({...state, hasRequestedVerificationCode: action.value})
+      }
       case 'set-handle': {
         return compute({...state, handle: action.value})
       }
@@ -208,7 +281,7 @@ function createReducer({_}: {_: I18nContext['_']}) {
         return compute({...state, birthDate: action.value})
       }
       case 'next': {
-        if (state.step === 2) {
+        if (state.step === 1) {
           if (!is13(state)) {
             return compute({
               ...state,
@@ -218,10 +291,18 @@ function createReducer({_}: {_: I18nContext['_']}) {
             })
           }
         }
-        return compute({...state, error: '', step: state.step + 1})
+        let increment = 1
+        if (state.step === 1 && !state.isPhoneVerificationRequired) {
+          increment = 2
+        }
+        return compute({...state, error: '', step: state.step + increment})
       }
       case 'back': {
-        return compute({...state, error: '', step: state.step - 1})
+        let decrement = 1
+        if (state.step === 3 && !state.isPhoneVerificationRequired) {
+          decrement = 2
+        }
+        return compute({...state, error: '', step: state.step - decrement})
       }
     }
   }
@@ -230,12 +311,16 @@ function createReducer({_}: {_: I18nContext['_']}) {
 function compute(state: CreateAccountState): CreateAccountState {
   let canNext = true
   if (state.step === 1) {
-    canNext = !!state.serviceDescription
-  } else if (state.step === 2) {
     canNext =
+      !!state.serviceDescription &&
       (!state.isInviteCodeRequired || !!state.inviteCode) &&
       !!state.email &&
       !!state.password
+  } else if (state.step === 2) {
+    canNext =
+      !state.isPhoneVerificationRequired ||
+      (!!state.verificationPhone &&
+        isValidVerificationCode(state.verificationCode))
   } else if (state.step === 3) {
     canNext = !!state.handle
   }
@@ -244,5 +329,11 @@ function compute(state: CreateAccountState): CreateAccountState {
     canBack: state.step > 1,
     canNext,
     isInviteCodeRequired: !!state.serviceDescription?.inviteCodeRequired,
+    isPhoneVerificationRequired:
+      !!state.serviceDescription?.phoneVerificationRequired,
   }
 }
+
+function isValidVerificationCode(str: string): boolean {
+  return /[0-9]{6}/.test(str)
+}

src/view/icons/index.tsx

@@ -52,6 +52,7 @@ import {faGear} from '@fortawesome/free-solid-svg-icons/faGear'
 import {faGlobe} from '@fortawesome/free-solid-svg-icons/faGlobe'
 import {faHand} from '@fortawesome/free-solid-svg-icons/faHand'
 import {faHand as farHand} from '@fortawesome/free-regular-svg-icons/faHand'
+import {faHashtag} from '@fortawesome/free-solid-svg-icons/faHashtag'
 import {faHeart} from '@fortawesome/free-regular-svg-icons/faHeart'
 import {faHeart as fasHeart} from '@fortawesome/free-solid-svg-icons/faHeart'
 import {faHouse} from '@fortawesome/free-solid-svg-icons/faHouse'
@@ -71,6 +72,7 @@ import {faPaste} from '@fortawesome/free-regular-svg-icons/faPaste'
 import {faPen} from '@fortawesome/free-solid-svg-icons/faPen'
 import {faPenNib} from '@fortawesome/free-solid-svg-icons/faPenNib'
 import {faPenToSquare} from '@fortawesome/free-solid-svg-icons/faPenToSquare'
+import {faPhone} from '@fortawesome/free-solid-svg-icons/faPhone'
 import {faPlay} from '@fortawesome/free-solid-svg-icons/faPlay'
 import {faPlus} from '@fortawesome/free-solid-svg-icons/faPlus'
 import {faQuoteLeft} from '@fortawesome/free-solid-svg-icons/faQuoteLeft'
@@ -78,6 +80,7 @@ import {faReply} from '@fortawesome/free-solid-svg-icons/faReply'
 import {faRetweet} from '@fortawesome/free-solid-svg-icons/faRetweet'
 import {faRss} from '@fortawesome/free-solid-svg-icons/faRss'
 import {faSatelliteDish} from '@fortawesome/free-solid-svg-icons/faSatelliteDish'
+import {faServer} from '@fortawesome/free-solid-svg-icons/faServer'
 import {faShare} from '@fortawesome/free-solid-svg-icons/faShare'
 import {faShareFromSquare} from '@fortawesome/free-solid-svg-icons/faShareFromSquare'
 import {faShield} from '@fortawesome/free-solid-svg-icons/faShield'
@@ -153,6 +156,7 @@ library.add(
   faGlobe,
   faHand,
   farHand,
+  faHashtag,
   faHeart,
   fasHeart,
   faHouse,
@@ -172,6 +176,7 @@ library.add(
   faPen,
   faPenNib,
   faPenToSquare,
+  faPhone,
   faPlay,
   faPlus,
   faQuoteLeft,
@@ -179,6 +184,7 @@ library.add(
   faRetweet,
   faRss,
   faSatelliteDish,
+  faServer,
   faShare,
   faShareFromSquare,
   faShield,

yarn.lock

@@ -48,10 +48,10 @@
     typed-emitter "^2.1.0"
     zod "^3.21.4"
 
-"@atproto/api@^0.8.0":
+"@atproto/api@^0.9.1":
-  version "0.8.0"
+  version "0.9.1"
-  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.8.0.tgz#57ef1f6292d05ba851e3acec575139cfc4fd7a7a"
+  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.9.1.tgz#0b28baefa4af32bc4c05715b8641656f332546c6"
-  integrity sha512-FgPOoij/PAEa0YoLKqj5NFYBvysdyb13gtS2XpJOdIvUZ2KehMlTrtj7g0AR78pRfME2jJjIgmAw6qpmSsjSTw==
+  integrity sha512-DHPc/dGgpf8sgPlfR9meIAk7s4YMll0g7HTq/W/LeaaaY0T6d3ZAtrgvjIU1aKCp5WNzTfzrmz0LIHIX46FHHw==
   dependencies:
     "@atproto/common-web" "^0.2.3"
     "@atproto/lexicon" "^0.3.1"
@@ -15075,6 +15075,11 @@ levn@^0.4.1:
     prelude-ls "^1.2.1"
     type-check "~0.4.0"
 
+libphonenumber-js@^1.10.53:
+  version "1.10.53"
+  resolved "https://registry.yarnpkg.com/libphonenumber-js/-/libphonenumber-js-1.10.53.tgz#8dbfe1355ef1a3d8e13b8d92849f7db7ebddc98f"
+  integrity sha512-sDTnnqlWK4vH4AlDQuswz3n4Hx7bIQWTpIcScJX+Sp7St3LXHmfiax/ZFfyYxHmkdCvydOLSuvtAO/XpXiSySw==
+
 lie@3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"