diff --git a/.changeset/cold-pianos-return.md b/.changeset/cold-pianos-return.md
new file mode 100644
index 00000000000..a44aeecdc31
--- /dev/null
+++ b/.changeset/cold-pianos-return.md
@@ -0,0 +1,10 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+'@clerk/localizations': patch
+'@clerk/types': patch
+---
+
+Introduce `WhatsApp` as an alternative channel for phone code delivery.
+
+The new `channel` property accompanies the `phone_code` strategy. Possible values: `whatsapp` and `sms`.
diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json
index 49a0edb0e76..7f9b0ead95f 100644
--- a/packages/clerk-js/bundlewatch.config.json
+++ b/packages/clerk-js/bundlewatch.config.json
@@ -1,10 +1,10 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "594.2kB" },
-    { "path": "./dist/clerk.browser.js", "maxSize": "68.3KB" },
+    { "path": "./dist/clerk.js", "maxSize": "595.5kB" },
+    { "path": "./dist/clerk.browser.js", "maxSize": "68.5KB" },
     { "path": "./dist/clerk.legacy.browser.js", "maxSize": "110KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "52KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "104.4KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "105KB" },
     { "path": "./dist/vendors*.js", "maxSize": "39.5KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/createorganization*.js", "maxSize": "5KB" },
@@ -13,7 +13,7 @@
     { "path": "./dist/organizationswitcher*.js", "maxSize": "5KB" },
     { "path": "./dist/organizationlist*.js", "maxSize": "5.5KB" },
     { "path": "./dist/signin*.js", "maxSize": "14KB" },
-    { "path": "./dist/signup*.js", "maxSize": "6.76KB" },
+    { "path": "./dist/signup*.js", "maxSize": "7.5KB" },
     { "path": "./dist/userbutton*.js", "maxSize": "5KB" },
     { "path": "./dist/userprofile*.js", "maxSize": "16.5KB" },
     { "path": "./dist/userverification*.js", "maxSize": "5KB" },
diff --git a/packages/clerk-js/src/core/resources/SignIn.ts b/packages/clerk-js/src/core/resources/SignIn.ts
index c594e5e5d13..473fb61d638 100644
--- a/packages/clerk-js/src/core/resources/SignIn.ts
+++ b/packages/clerk-js/src/core/resources/SignIn.ts
@@ -120,6 +120,7 @@ export class SignIn extends BaseResource implements SignInResource {
         config = {
           phoneNumberId: factor.phoneNumberId,
           default: factor.default,
+          channel: factor.channel,
         } as PhoneCodeConfig;
         break;
       case 'web3_metamask_signature':
diff --git a/packages/clerk-js/src/core/resources/UserSettings.ts b/packages/clerk-js/src/core/resources/UserSettings.ts
index 152a5e28233..358f73756c9 100644
--- a/packages/clerk-js/src/core/resources/UserSettings.ts
+++ b/packages/clerk-js/src/core/resources/UserSettings.ts
@@ -5,6 +5,7 @@ import type {
   OAuthStrategy,
   PasskeySettingsData,
   PasswordSettingsData,
+  PhoneCodeChannel,
   SamlSettings,
   SignInData,
   SignUpData,
@@ -173,6 +174,17 @@ export class UserSettings extends BaseResource implements UserSettingsResource {
       .flat() as any as Web3Strategy[];
   }
 
+  get alternativePhoneCodeChannels(): PhoneCodeChannel[] {
+    if (!this.attributes) {
+      return [];
+    }
+
+    return Object.entries(this.attributes)
+      .filter(([name, attr]) => attr.used_for_first_factor && name === 'phone_number')
+      .map(([, desc]) => desc?.channels?.filter(factor => factor !== 'sms') || [])
+      .flat() as any as PhoneCodeChannel[];
+  }
+
   public constructor(data: UserSettingsJSON | UserSettingsJSONSnapshot | null = null) {
     super();
     this.fromJSON(data);
diff --git a/packages/clerk-js/src/core/resources/Verification.ts b/packages/clerk-js/src/core/resources/Verification.ts
index e30bc9e6ffe..9de4244d3f9 100644
--- a/packages/clerk-js/src/core/resources/Verification.ts
+++ b/packages/clerk-js/src/core/resources/Verification.ts
@@ -2,6 +2,7 @@ import { errorToJSON, parseError } from '@clerk/shared/error';
 import type {
   ClerkAPIError,
   PasskeyVerificationResource,
+  PhoneCodeChannel,
   PublicKeyCredentialCreationOptionsJSON,
   PublicKeyCredentialCreationOptionsWithoutExtensions,
   SignUpVerificationJSON,
@@ -32,6 +33,7 @@ export class Verification extends BaseResource implements VerificationResource {
   expireAt: Date | null = null;
   error: ClerkAPIError | null = null;
   verifiedAtClient: string | null = null;
+  channel?: PhoneCodeChannel;
 
   constructor(data: VerificationJSON | VerificationJSONSnapshot | null) {
     super();
@@ -57,6 +59,7 @@ export class Verification extends BaseResource implements VerificationResource {
       this.attempts = data.attempts;
       this.expireAt = unixEpochToDate(data.expire_at || undefined);
       this.error = data.error ? parseError(data.error) : null;
+      this.channel = data.channel || undefined;
     }
     return this;
   }
diff --git a/packages/clerk-js/src/core/resources/__tests__/__snapshots__/Client.test.ts.snap b/packages/clerk-js/src/core/resources/__tests__/__snapshots__/Client.test.ts.snap
index e7578beaa23..6f858efc82d 100644
--- a/packages/clerk-js/src/core/resources/__tests__/__snapshots__/Client.test.ts.snap
+++ b/packages/clerk-js/src/core/resources/__tests__/__snapshots__/Client.test.ts.snap
@@ -229,6 +229,7 @@ Client {
     "createdSessionId": null,
     "firstFactorVerification": Verification {
       "attempts": null,
+      "channel": undefined,
       "error": {
         "code": "",
         "longMessage": undefined,
@@ -259,6 +260,7 @@ Client {
     "resetPassword": [Function],
     "secondFactorVerification": Verification {
       "attempts": null,
+      "channel": undefined,
       "error": {
         "code": "",
         "longMessage": undefined,
@@ -335,6 +337,7 @@ Client {
     "verifications": SignUpVerifications {
       "emailAddress": SignUpVerification {
         "attempts": null,
+        "channel": undefined,
         "error": {
           "code": "",
           "longMessage": undefined,
@@ -361,6 +364,7 @@ Client {
       },
       "externalAccount": Verification {
         "attempts": null,
+        "channel": undefined,
         "error": {
           "code": "",
           "longMessage": undefined,
@@ -385,6 +389,7 @@ Client {
       },
       "phoneNumber": SignUpVerification {
         "attempts": null,
+        "channel": undefined,
         "error": {
           "code": "",
           "longMessage": undefined,
@@ -411,6 +416,7 @@ Client {
       },
       "web3Wallet": SignUpVerification {
         "attempts": null,
+        "channel": undefined,
         "error": {
           "code": "",
           "longMessage": undefined,
diff --git a/packages/clerk-js/src/ui/common/ProviderInitialIcon.tsx b/packages/clerk-js/src/ui/common/ProviderInitialIcon.tsx
index e3345fe3eff..4cf2d30ca5d 100644
--- a/packages/clerk-js/src/ui/common/ProviderInitialIcon.tsx
+++ b/packages/clerk-js/src/ui/common/ProviderInitialIcon.tsx
@@ -1,4 +1,4 @@
-import type { OAuthProvider, Web3Provider } from '@clerk/types';
+import type { OAuthProvider, PhoneCodeProvider, Web3Provider } from '@clerk/types';
 
 import { Box, descriptors, Text } from '../customizables';
 import type { PropsOfComponent } from '../styledSystem';
@@ -6,7 +6,7 @@ import { common } from '../styledSystem';
 
 type ProviderInitialIconProps = PropsOfComponent<typeof Box> & {
   value: string;
-  id: Web3Provider | OAuthProvider;
+  id: Web3Provider | OAuthProvider | PhoneCodeProvider;
 };
 
 export const ProviderInitialIcon = (props: ProviderInitialIconProps) => {
diff --git a/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx b/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx
index c064e0b1db4..3e79573c71b 100644
--- a/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/AlternativeMethods.tsx
@@ -85,6 +85,7 @@ const AlternativeMethodsList = (props: AlternativeMethodListProps) => {
                   <SignInSocialButtons
                     enableWeb3Providers
                     enableOAuthProviders
+                    enableAlternativePhoneCodeProviders={false}
                   />
                   {firstPartyFactors &&
                     firstPartyFactors.map((factor, i) => (
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInAlternativePhoneCodePhoneNumberCard.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInAlternativePhoneCodePhoneNumberCard.tsx
new file mode 100644
index 00000000000..6dc8fb2abc1
--- /dev/null
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInAlternativePhoneCodePhoneNumberCard.tsx
@@ -0,0 +1,102 @@
+import type { PhoneCodeChannelData } from '@clerk/types';
+
+import { Button, Col, descriptors, Flex, Image, localizationKeys } from '../../customizables';
+import { Card, Form, Header, useCardState } from '../../elements';
+import { CaptchaElement } from '../../elements/CaptchaElement';
+import { useEnabledThirdPartyProviders } from '../../hooks';
+import type { FormControlState } from '../../utils';
+
+type SignUpAlternativePhoneCodePhoneNumberCardProps = {
+  handleSubmit: React.FormEventHandler;
+  phoneNumberFormState: FormControlState<any>;
+  onUseAnotherMethod: () => void;
+  phoneCodeProvider: PhoneCodeChannelData;
+};
+
+export const SignInAlternativePhoneCodePhoneNumberCard = (props: SignUpAlternativePhoneCodePhoneNumberCardProps) => {
+  const { handleSubmit, phoneNumberFormState, onUseAnotherMethod, phoneCodeProvider } = props;
+  const { providerToDisplayData, strategyToDisplayData } = useEnabledThirdPartyProviders();
+  const provider = phoneCodeProvider.name;
+  const channel = phoneCodeProvider.channel;
+  const card = useCardState();
+
+  return (
+    <Card.Root>
+      <Card.Content>
+        <Header.Root
+          showLogo
+          showDivider
+        >
+          <Col center>
+            <Image
+              src={providerToDisplayData[channel]?.iconUrl}
+              alt={`${strategyToDisplayData[channel].name} logo`}
+              sx={theme => ({
+                width: theme.sizes.$7,
+                height: theme.sizes.$7,
+                maxWidth: '100%',
+                marginBottom: theme.sizes.$6,
+              })}
+            />
+          </Col>
+          <Header.Title
+            localizationKey={localizationKeys('signIn.start.alternativePhoneCodeProvider.title', {
+              provider,
+            })}
+          />
+          <Header.Subtitle
+            localizationKey={localizationKeys('signIn.start.alternativePhoneCodeProvider.subtitle', {
+              provider,
+            })}
+          />
+        </Header.Root>
+        <Card.Alert>{card.error}</Card.Alert>
+        <Flex
+          direction='col'
+          elementDescriptor={descriptors.main}
+          gap={6}
+        >
+          <Form.Root
+            onSubmit={handleSubmit}
+            gap={8}
+          >
+            <Col gap={6}>
+              <Form.ControlRow elementId='phoneNumber'>
+                <Form.PhoneInput
+                  {...phoneNumberFormState.props}
+                  label={localizationKeys('signIn.start.alternativePhoneCodeProvider.label', { provider })}
+                  isRequired
+                  isOptional={false}
+                  actionLabel={undefined}
+                  onActionClicked={undefined}
+                />
+              </Form.ControlRow>
+            </Col>
+            <Col center>
+              <CaptchaElement />
+              <Col
+                gap={6}
+                sx={{
+                  width: '100%',
+                }}
+              >
+                <Form.SubmitButton
+                  hasArrow
+                  localizationKey={localizationKeys('formButtonPrimary')}
+                />
+              </Col>
+            </Col>
+            <Col center>
+              <Button
+                variant='link'
+                colorScheme='neutral'
+                onClick={onUseAnotherMethod}
+                localizationKey={localizationKeys('signIn.start.alternativePhoneCodeProvider.actionLink')}
+              />
+            </Col>
+          </Form.Root>
+        </Flex>
+      </Card.Content>
+    </Card.Root>
+  );
+};
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx
index bb8a56da38f..4326023c6ef 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOne.tsx
@@ -37,7 +37,9 @@ function SignInFactorOneInternal(): JSX.Element {
   const availableFactors = signIn.supportedFirstFactors;
   const router = useRouter();
   const card = useCardState();
-  const { supportedFirstFactors } = useCoreSignIn();
+  const { supportedFirstFactors, firstFactorVerification } = useCoreSignIn();
+
+  const alternativePhoneCodeChannel = firstFactorVerification.channel;
 
   const lastPreparedFactorKeyRef = React.useRef('');
   const [{ currentFactor }, setFactor] = React.useState<{
@@ -157,7 +159,7 @@ function SignInFactorOneInternal(): JSX.Element {
         <SignInFactorOnePhoneCodeCard
           factorAlreadyPrepared={lastPreparedFactorKeyRef.current === factorKey(currentFactor)}
           onFactorPrepare={handleFactorPrepare}
-          factor={currentFactor}
+          factor={{ ...currentFactor, channel: alternativePhoneCodeChannel }}
           onShowAlternativeMethodsClicked={toggleAllStrategies}
         />
       );
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
index 15503cb3346..c758d85a064 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOneCodeForm.tsx
@@ -38,6 +38,8 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
   const clerk = useClerk();
 
   const shouldAvoidPrepare = signIn.firstFactorVerification.status === 'verified' && props.factorAlreadyPrepared;
+  const isAlternativePhoneCodeProvider =
+    props.factor.strategy === 'phone_code' ? !!props.factor.channel && props.factor.channel !== 'sms' : false;
 
   const goBack = () => {
     return navigate('../');
@@ -55,7 +57,9 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
   };
 
   useFetch(
-    shouldAvoidPrepare
+    // If an alternative phone code provider is used, we skip the prepare step
+    // because the verification is already created on the Start screen
+    shouldAvoidPrepare || isAlternativePhoneCodeProvider
       ? undefined
       : () =>
           signIn
@@ -109,7 +113,9 @@ export const SignInFactorOneCodeForm = (props: SignInFactorOneCodeFormProps) =>
       onResendCodeClicked={prepare}
       safeIdentifier={props.factor.safeIdentifier}
       profileImageUrl={signIn.userData.imageUrl}
-      onShowAlternativeMethodsClicked={props.onShowAlternativeMethodsClicked}
+      // if the factor is an alternative phone code provider, we don't want to show the alternative methods
+      // instead we want to go back to the start screen
+      onShowAlternativeMethodsClicked={isAlternativePhoneCodeProvider ? goBack : props.onShowAlternativeMethodsClicked}
       showAlternativeMethods={props.showAlternativeMethods}
       onIdentityPreviewEditClicked={goBack}
       onBackLinkClicked={props.onBackLinkClicked}
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePhoneCodeCard.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePhoneCodeCard.tsx
index 82f6cde06e1..07603d6b3f4 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePhoneCodeCard.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInFactorOnePhoneCodeCard.tsx
@@ -1,6 +1,6 @@
+import { getAlternativePhoneCodeProviderData } from '@clerk/shared/alternativePhoneCode';
 import type { PhoneCodeFactor } from '@clerk/types';
 
-import { useEnvironment } from '../../contexts';
 import { Flow, localizationKeys } from '../../customizables';
 import type { SignInFactorOneCodeCard } from './SignInFactorOneCodeForm';
 import { SignInFactorOneCodeForm } from './SignInFactorOneCodeForm';
@@ -8,16 +8,30 @@ import { SignInFactorOneCodeForm } from './SignInFactorOneCodeForm';
 type SignInFactorOnePhoneCodeCardProps = SignInFactorOneCodeCard & { factor: PhoneCodeFactor };
 
 export const SignInFactorOnePhoneCodeCard = (props: SignInFactorOnePhoneCodeCardProps) => {
-  const { applicationName } = useEnvironment().displayConfig;
+  const { factor } = props;
+  const { channel } = factor;
+
+  let cardTitle = localizationKeys('signIn.phoneCode.title');
+  let cardSubtitle = localizationKeys('signIn.phoneCode.subtitle');
+  let inputLabel = localizationKeys('signIn.phoneCode.formTitle');
+  let resendButton = localizationKeys('signIn.phoneCode.resendButton');
+  if (channel && channel !== 'sms') {
+    cardTitle = localizationKeys('signIn.alternativePhoneCodeProvider.title', {
+      provider: getAlternativePhoneCodeProviderData(channel)?.name,
+    });
+    cardSubtitle = localizationKeys('signIn.alternativePhoneCodeProvider.subtitle');
+    inputLabel = localizationKeys('signIn.alternativePhoneCodeProvider.formTitle');
+    resendButton = localizationKeys('signIn.alternativePhoneCodeProvider.resendButton');
+  }
 
   return (
     <Flow.Part part='phoneCode'>
       <SignInFactorOneCodeForm
         {...props}
-        cardTitle={localizationKeys('signIn.phoneCode.title')}
-        cardSubtitle={localizationKeys('signIn.phoneCode.subtitle', { applicationName })}
-        inputLabel={localizationKeys('signIn.phoneCode.formTitle')}
-        resendButton={localizationKeys('signIn.phoneCode.resendButton')}
+        cardTitle={cardTitle}
+        cardSubtitle={cardSubtitle}
+        inputLabel={inputLabel}
+        resendButton={resendButton}
       />
     </Flow.Part>
   );
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInSocialButtons.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInSocialButtons.tsx
index 87185698b00..a44748c0388 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInSocialButtons.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInSocialButtons.tsx
@@ -1,4 +1,5 @@
 import { useClerk } from '@clerk/shared/react';
+import type { PhoneCodeChannel } from '@clerk/types';
 import React from 'react';
 
 import { buildSSOCallbackURL } from '../../common/redirects';
@@ -10,7 +11,11 @@ import { SocialButtons } from '../../elements/SocialButtons';
 import { useRouter } from '../../router';
 import { handleError, originPrefersPopup, web3CallbackErrorHandler } from '../../utils';
 
-export const SignInSocialButtons = React.memo((props: SocialButtonsProps) => {
+export type SignInSocialButtonsProps = SocialButtonsProps & {
+  onAlternativePhoneCodeProviderClick?: (channel: PhoneCodeChannel) => void;
+};
+
+export const SignInSocialButtons = React.memo((props: SignInSocialButtonsProps) => {
   const clerk = useClerk();
   const { navigate } = useRouter();
   const card = useCardState();
@@ -20,10 +25,11 @@ export const SignInSocialButtons = React.memo((props: SocialButtonsProps) => {
   const redirectUrl = buildSSOCallbackURL(ctx, displayConfig.signInUrl);
   const redirectUrlComplete = ctx.afterSignInUrl || '/';
   const shouldUsePopup = ctx.oauthFlow === 'popup' || (ctx.oauthFlow === 'auto' && originPrefersPopup());
+  const { onAlternativePhoneCodeProviderClick, ...rest } = props;
 
   return (
     <SocialButtons
-      {...props}
+      {...rest}
       idleAfterDelay={!shouldUsePopup}
       oauthCallback={strategy => {
         if (shouldUsePopup) {
@@ -58,6 +64,9 @@ export const SignInSocialButtons = React.memo((props: SocialButtonsProps) => {
           })
           .catch(err => web3CallbackErrorHandler(err, card.setError));
       }}
+      alternativePhoneCodeCallback={channel => {
+        onAlternativePhoneCodeProviderClick?.(channel);
+      }}
     />
   );
 });
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
index 11a2b233604..fe2941e6012 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@@ -1,6 +1,13 @@
+import { getAlternativePhoneCodeProviderData } from '@clerk/shared/alternativePhoneCode';
 import { useClerk } from '@clerk/shared/react';
 import { isWebAuthnAutofillSupported, isWebAuthnSupported } from '@clerk/shared/webauthn';
-import type { ClerkAPIError, SignInCreateParams, SignInResource } from '@clerk/types';
+import type {
+  ClerkAPIError,
+  PhoneCodeChannel,
+  PhoneCodeChannelData,
+  SignInCreateParams,
+  SignInResource,
+} from '@clerk/types';
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import { ERROR_CODES, SIGN_UP_MODES } from '../../../core/constants';
@@ -32,6 +39,7 @@ import type { FormControlState } from '../../utils';
 import { buildRequest, handleError, isMobileDevice, useFormControl } from '../../utils';
 import { handleCombinedFlowTransfer } from './handleCombinedFlowTransfer';
 import { useHandleAuthenticateWithPasskey } from './shared';
+import { SignInAlternativePhoneCodePhoneNumberCard } from './SignInAlternativePhoneCodePhoneNumberCard';
 import { SignInSocialButtons } from './SignInSocialButtons';
 import { getSignUpAttributeFromIdentifier } from './utils';
 
@@ -78,6 +86,7 @@ function SignInStartInternal(): JSX.Element {
     () => groupIdentifiers(userSettings.enabledFirstFactorIdentifiers),
     [userSettings.enabledFirstFactorIdentifiers],
   );
+  const alternativePhoneCodeChannels = userSettings.alternativePhoneCodeChannels;
 
   /**
    * Passkeys
@@ -113,6 +122,18 @@ function SignInStartInternal(): JSX.Element {
     placeholder: localizationKeys('formFieldInputPlaceholder__password') as any,
   });
 
+  const [alternativePhoneCodeProvider, setAlternativePhoneCodeProvider] = useState<PhoneCodeChannelData | null>(null);
+
+  const showAlternativePhoneCodeProviders = userSettings.alternativePhoneCodeChannels.length > 0;
+
+  const onAlternativePhoneCodeUseAnotherMethod = () => {
+    setAlternativePhoneCodeProvider(null);
+  };
+  const onAlternativePhoneCodeProviderClick = (phoneCodeChannel: PhoneCodeChannel) => {
+    const provider: PhoneCodeChannelData | null = getAlternativePhoneCodeProviderData(phoneCodeChannel) || null;
+    setAlternativePhoneCodeProvider(provider);
+  };
+
   const ctxInitialValues = ctx.initialValues || {};
   const initialValues: Record<SignInStartIdentifier, string | undefined> = useMemo(
     () => ({
@@ -124,7 +145,8 @@ function SignInStartInternal(): JSX.Element {
     [ctx.initialValues],
   );
 
-  const hasSocialOrWeb3Buttons = !!authenticatableSocialStrategies.length || !!web3FirstFactors.length;
+  const hasSocialOrWeb3Buttons =
+    !!authenticatableSocialStrategies.length || !!web3FirstFactors.length || !!alternativePhoneCodeChannels.length;
   const [shouldAutofocus, setShouldAutofocus] = useState(!isMobileDevice() && !hasSocialOrWeb3Buttons);
   const textIdentifierField = useFormControl('identifier', initialValues[identifierAttribute] || '', {
     ...currentIdentifier,
@@ -303,6 +325,27 @@ function SignInStartInternal(): JSX.Element {
   };
 
   const signInWithFields = async (...fields: Array<FormControlState<string>>) => {
+    if (alternativePhoneCodeProvider) {
+      // We need to send the alternative phone code provider channel in the sign in request
+      // together with the phone_code strategy, in order for FAPI to create a Verification upon this first request.
+      const noop = () => {};
+      fields.push({
+        id: 'strategy',
+        value: 'phone_code',
+        clearFeedback: noop,
+        setValue: noop,
+        onChange: noop,
+        setError: noop,
+      } as any);
+      fields.push({
+        id: 'channel',
+        value: alternativePhoneCodeProvider?.channel,
+        clearFeedback: noop,
+        setValue: noop,
+        onChange: noop,
+        setError: noop,
+      } as any);
+    }
     try {
       const res = await safePasswordSignInForEnterpriseSSOInstance(signIn.create(buildSignInParams(fields)), fields);
 
@@ -405,6 +448,7 @@ function SignInStartInternal(): JSX.Element {
         redirectUrl,
         redirectUrlComplete,
         passwordEnabled: userSettings.attributes.password?.required ?? false,
+        alternativePhoneCodeProvider,
       });
     } else {
       handleError(e, [identifierField, instantPasswordField], card.setError);
@@ -437,98 +481,111 @@ function SignInStartInternal(): JSX.Element {
   const { action, ...identifierFieldProps } = identifierField.props;
   return (
     <Flow.Part part='start'>
-      <Card.Root>
-        <Card.Content>
-          <Header.Root showLogo>
-            <Header.Title
-              localizationKey={
-                isCombinedFlow ? localizationKeys('signIn.start.titleCombined') : localizationKeys('signIn.start.title')
-              }
-            />
-            <Header.Subtitle
-              localizationKey={
-                isCombinedFlow
-                  ? localizationKeys('signIn.start.subtitleCombined')
-                  : localizationKeys('signIn.start.subtitle')
-              }
-              sx={{
-                '&:empty': {
-                  display: 'none',
-                },
-              }}
-            />
-          </Header.Root>
-          <Card.Alert>{card.error}</Card.Alert>
-          {/*TODO: extract main in its own component */}
-          <Col
-            elementDescriptor={descriptors.main}
-            gap={6}
-          >
-            <SocialButtonsReversibleContainerWithDivider>
-              {hasSocialOrWeb3Buttons && (
-                <SignInSocialButtons
-                  enableWeb3Providers
-                  enableOAuthProviders
-                />
-              )}
-              {standardFormAttributes.length ? (
-                <Form.Root
-                  onSubmit={handleFirstPartySubmit}
-                  gap={8}
-                >
-                  <Col gap={6}>
-                    <Form.ControlRow elementId={identifierField.id}>
-                      <DynamicField
-                        actionLabel={nextIdentifier?.action}
-                        onActionClicked={switchToNextIdentifier}
-                        {...identifierFieldProps}
-                        autoFocus={shouldAutofocus}
-                        autoComplete={isWebAuthnAutofillSupported ? 'webauthn' : undefined}
-                      />
-                    </Form.ControlRow>
-                    <InstantPasswordRow field={passwordBasedInstance ? instantPasswordField : undefined} />
-                  </Col>
-                  <Col center>
-                    <CaptchaElement />
-                    <Form.SubmitButton hasArrow />
-                  </Col>
-                </Form.Root>
-              ) : null}
-            </SocialButtonsReversibleContainerWithDivider>
-            {!standardFormAttributes.length && <CaptchaElement />}
-            {userSettings.attributes.passkey?.enabled &&
-              userSettings.passkeySettings.show_sign_in_button &&
-              isWebSupported && (
-                <Card.Action elementId={'usePasskey'}>
-                  <Card.ActionLink
-                    localizationKey={localizationKeys('signIn.start.actionLink__use_passkey')}
-                    onClick={() => authenticateWithPasskey({ flow: 'discoverable' })}
-                  />
-                </Card.Action>
-              )}
-          </Col>
-        </Card.Content>
-        <Card.Footer>
-          {userSettings.signUp.mode === SIGN_UP_MODES.PUBLIC && !isCombinedFlow && (
-            <Card.Action elementId='signIn'>
-              <Card.ActionText localizationKey={localizationKeys('signIn.start.actionText')} />
-              <Card.ActionLink
-                localizationKey={localizationKeys('signIn.start.actionLink')}
-                to={clerk.buildUrlWithAuth(signUpUrl)}
+      {!alternativePhoneCodeProvider ? (
+        <Card.Root>
+          <Card.Content>
+            <Header.Root showLogo>
+              <Header.Title
+                localizationKey={
+                  isCombinedFlow
+                    ? localizationKeys('signIn.start.titleCombined')
+                    : localizationKeys('signIn.start.title')
+                }
               />
-            </Card.Action>
-          )}
-          {userSettings.signUp.mode === SIGN_UP_MODES.WAITLIST && (
-            <Card.Action elementId='signIn'>
-              <Card.ActionText localizationKey={localizationKeys('signIn.start.actionText__join_waitlist')} />
-              <Card.ActionLink
-                localizationKey={localizationKeys('signIn.start.actionLink__join_waitlist')}
-                to={clerk.buildUrlWithAuth(waitlistUrl)}
+              <Header.Subtitle
+                localizationKey={
+                  isCombinedFlow
+                    ? localizationKeys('signIn.start.subtitleCombined')
+                    : localizationKeys('signIn.start.subtitle')
+                }
+                sx={{
+                  '&:empty': {
+                    display: 'none',
+                  },
+                }}
               />
-            </Card.Action>
-          )}
-        </Card.Footer>
-      </Card.Root>
+            </Header.Root>
+            <Card.Alert>{card.error}</Card.Alert>
+            {/*TODO: extract main in its own component */}
+            <Col
+              elementDescriptor={descriptors.main}
+              gap={6}
+            >
+              <SocialButtonsReversibleContainerWithDivider>
+                {hasSocialOrWeb3Buttons && (
+                  <SignInSocialButtons
+                    enableWeb3Providers
+                    enableOAuthProviders
+                    enableAlternativePhoneCodeProviders={showAlternativePhoneCodeProviders}
+                    onAlternativePhoneCodeProviderClick={onAlternativePhoneCodeProviderClick}
+                  />
+                )}
+                {standardFormAttributes.length ? (
+                  <Form.Root
+                    onSubmit={handleFirstPartySubmit}
+                    gap={8}
+                  >
+                    <Col gap={6}>
+                      <Form.ControlRow elementId={identifierField.id}>
+                        <DynamicField
+                          actionLabel={nextIdentifier?.action}
+                          onActionClicked={switchToNextIdentifier}
+                          {...identifierFieldProps}
+                          autoFocus={shouldAutofocus}
+                          autoComplete={isWebAuthnAutofillSupported ? 'webauthn' : undefined}
+                        />
+                      </Form.ControlRow>
+                      <InstantPasswordRow field={passwordBasedInstance ? instantPasswordField : undefined} />
+                    </Col>
+                    <Col center>
+                      <CaptchaElement />
+                      <Form.SubmitButton hasArrow />
+                    </Col>
+                  </Form.Root>
+                ) : null}
+              </SocialButtonsReversibleContainerWithDivider>
+              {!standardFormAttributes.length && <CaptchaElement />}
+              {userSettings.attributes.passkey?.enabled &&
+                userSettings.passkeySettings.show_sign_in_button &&
+                isWebSupported && (
+                  <Card.Action elementId={'usePasskey'}>
+                    <Card.ActionLink
+                      localizationKey={localizationKeys('signIn.start.actionLink__use_passkey')}
+                      onClick={() => authenticateWithPasskey({ flow: 'discoverable' })}
+                    />
+                  </Card.Action>
+                )}
+            </Col>
+          </Card.Content>
+          <Card.Footer>
+            {userSettings.signUp.mode === SIGN_UP_MODES.PUBLIC && !isCombinedFlow && (
+              <Card.Action elementId='signIn'>
+                <Card.ActionText localizationKey={localizationKeys('signIn.start.actionText')} />
+                <Card.ActionLink
+                  localizationKey={localizationKeys('signIn.start.actionLink')}
+                  to={clerk.buildUrlWithAuth(signUpUrl)}
+                />
+              </Card.Action>
+            )}
+            {userSettings.signUp.mode === SIGN_UP_MODES.WAITLIST && (
+              <Card.Action elementId='signIn'>
+                <Card.ActionText localizationKey={localizationKeys('signIn.start.actionText__join_waitlist')} />
+                <Card.ActionLink
+                  localizationKey={localizationKeys('signIn.start.actionLink__join_waitlist')}
+                  to={clerk.buildUrlWithAuth(waitlistUrl)}
+                />
+              </Card.Action>
+            )}
+          </Card.Footer>
+        </Card.Root>
+      ) : (
+        <SignInAlternativePhoneCodePhoneNumberCard
+          handleSubmit={handleFirstPartySubmit}
+          phoneNumberFormState={phoneIdentifierField}
+          onUseAnotherMethod={onAlternativePhoneCodeUseAnotherMethod}
+          phoneCodeProvider={alternativePhoneCodeProvider}
+        />
+      )}
     </Flow.Part>
   );
 }
diff --git a/packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts b/packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts
index c9b426a795b..3b7f3451823 100644
--- a/packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts
+++ b/packages/clerk-js/src/ui/components/SignIn/handleCombinedFlowTransfer.ts
@@ -1,4 +1,4 @@
-import type { LoadedClerk, SignUpModes, SignUpResource } from '@clerk/types';
+import type { LoadedClerk, PhoneCodeChannelData, PhoneCodeStrategy, SignUpModes, SignUpResource } from '@clerk/types';
 
 import { SIGN_UP_MODES } from '../../../core/constants';
 import type { RouteContextValue } from '../../router/RouteContext';
@@ -16,6 +16,7 @@ type HandleCombinedFlowTransferProps = {
   redirectUrl?: string;
   redirectUrlComplete?: string;
   passwordEnabled: boolean;
+  alternativePhoneCodeProvider?: PhoneCodeChannelData | null;
 };
 
 /**
@@ -34,6 +35,7 @@ export function handleCombinedFlowTransfer({
   redirectUrl,
   redirectUrlComplete,
   passwordEnabled,
+  alternativePhoneCodeProvider,
 }: HandleCombinedFlowTransferProps): Promise<unknown> | void {
   if (signUpMode === SIGN_UP_MODES.WAITLIST) {
     const waitlistUrl = clerk.buildWaitlistUrl(
@@ -54,6 +56,15 @@ export function handleCombinedFlowTransfer({
     paramsToForward.set('__clerk_ticket', organizationTicket);
   }
 
+  // We need to send the alternative phone code provider channel in the sign up request
+  // together with the phone_code strategy, in order for FAPI to create a Verification.
+  const alternativePhoneCodeProviderParams = alternativePhoneCodeProvider
+    ? {
+        strategy: 'phone_code' as PhoneCodeStrategy,
+        channel: alternativePhoneCodeProvider.channel,
+      }
+    : {};
+
   // Attempt to transfer directly to sign up verification if email or phone was used, there are no optional fields, and password is not enabled. The signUp.create() call will
   // inform us if the instance is eligible for moving directly to verification.
   if (
@@ -64,6 +75,7 @@ export function handleCombinedFlowTransfer({
     return clerk.client.signUp
       .create({
         [identifierAttribute]: identifierValue,
+        ...alternativePhoneCodeProviderParams,
       })
       .then(async res => {
         const completeSignUpFlow = await lazyCompleteSignUpFlow();
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpAlternativePhoneCodePhoneNumberCard.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpAlternativePhoneCodePhoneNumberCard.tsx
new file mode 100644
index 00000000000..81c5eb90dd5
--- /dev/null
+++ b/packages/clerk-js/src/ui/components/SignUp/SignUpAlternativePhoneCodePhoneNumberCard.tsx
@@ -0,0 +1,116 @@
+import type { PhoneCodeChannelData } from '@clerk/types';
+
+import { Button, Col, descriptors, Flex, Image, localizationKeys } from '../../customizables';
+import { Card, Form, Header, LegalCheckbox, useCardState } from '../../elements';
+import { CaptchaElement } from '../../elements/CaptchaElement';
+import { useEnabledThirdPartyProviders } from '../../hooks';
+import type { FormControlState } from '../../utils';
+import type { Fields } from './signUpFormHelpers';
+
+type SignUpFormProps = {
+  handleSubmit: React.FormEventHandler;
+  fields: Fields;
+  formState: Record<Exclude<keyof Fields, 'ticket'>, FormControlState<any>>;
+  onUseAnotherMethod: () => void;
+  phoneCodeProvider: PhoneCodeChannelData;
+};
+
+export const SignUpAlternativePhoneCodePhoneNumberCard = (props: SignUpFormProps) => {
+  const { handleSubmit, fields, formState, onUseAnotherMethod, phoneCodeProvider } = props;
+  const { providerToDisplayData, strategyToDisplayData } = useEnabledThirdPartyProviders();
+  const provider = phoneCodeProvider.name;
+  const channel = phoneCodeProvider.channel;
+  const card = useCardState();
+
+  const shouldShow = (name: keyof typeof fields) => {
+    return !!fields[name] && fields[name]?.required;
+  };
+
+  return (
+    <Card.Root>
+      <Card.Content>
+        <Header.Root
+          showLogo
+          showDivider
+        >
+          <Col center>
+            <Image
+              src={providerToDisplayData[phoneCodeProvider.channel]?.iconUrl}
+              alt={`${strategyToDisplayData[channel].name} logo`}
+              sx={theme => ({
+                width: theme.sizes.$7,
+                height: theme.sizes.$7,
+                maxWidth: '100%',
+                marginBottom: theme.sizes.$6,
+              })}
+            />
+          </Col>
+          <Header.Title
+            localizationKey={localizationKeys('signUp.start.alternativePhoneCodeProvider.title', {
+              provider,
+            })}
+          />
+          <Header.Subtitle
+            localizationKey={localizationKeys('signUp.start.alternativePhoneCodeProvider.subtitle', {
+              provider,
+            })}
+          />
+        </Header.Root>
+        <Card.Alert>{card.error}</Card.Alert>
+        <Flex
+          direction='col'
+          elementDescriptor={descriptors.main}
+          gap={6}
+        >
+          <Form.Root
+            onSubmit={handleSubmit}
+            gap={8}
+          >
+            <Col gap={6}>
+              <Form.ControlRow elementId='phoneNumber'>
+                <Form.PhoneInput
+                  {...formState.phoneNumber.props}
+                  label={localizationKeys('signUp.start.alternativePhoneCodeProvider.label', { provider })}
+                  isRequired
+                  isOptional={false}
+                  actionLabel={undefined}
+                  onActionClicked={undefined}
+                />
+              </Form.ControlRow>
+            </Col>
+            <Col center>
+              <CaptchaElement />
+              <Col
+                gap={6}
+                sx={{
+                  width: '100%',
+                }}
+              >
+                {shouldShow('legalAccepted') && (
+                  <Form.ControlRow elementId='legalAccepted'>
+                    <LegalCheckbox
+                      {...formState.legalAccepted.props}
+                      isRequired={fields.legalAccepted?.required}
+                    />
+                  </Form.ControlRow>
+                )}
+                <Form.SubmitButton
+                  hasArrow
+                  localizationKey={localizationKeys('formButtonPrimary')}
+                />
+              </Col>
+            </Col>
+            <Col center>
+              <Button
+                variant='link'
+                colorScheme='neutral'
+                onClick={onUseAnotherMethod}
+                localizationKey={localizationKeys('signUp.start.alternativePhoneCodeProvider.actionLink')}
+              />
+            </Col>
+          </Form.Root>
+        </Flex>
+      </Card.Content>
+    </Card.Root>
+  );
+};
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx
index 7a1c72b5ebc..da9ab825cb0 100644
--- a/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/SignUpContinue.tsx
@@ -215,6 +215,7 @@ function SignUpContinueInternal() {
                 <SignUpSocialButtons
                   enableOAuthProviders={showOauthProviders}
                   enableWeb3Providers={false}
+                  enableAlternativePhoneCodeProviders={false}
                   continueSignUp
                 />
               )}
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpPhoneCodeCard.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpPhoneCodeCard.tsx
index d859fa860be..d6a30753737 100644
--- a/packages/clerk-js/src/ui/components/SignUp/SignUpPhoneCodeCard.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/SignUpPhoneCodeCard.tsx
@@ -1,3 +1,5 @@
+import { getAlternativePhoneCodeProviderData } from '@clerk/shared/alternativePhoneCode';
+
 import { useCoreSignUp } from '../../contexts';
 import { Flow, localizationKeys } from '../../customizables';
 import { useCardState, withCardStateProvider } from '../../elements';
@@ -8,25 +10,30 @@ import { SignUpVerificationCodeForm } from './SignUpVerificationCodeForm';
 export const SignUpPhoneCodeCard = withCardStateProvider(() => {
   const signUp = useCoreSignUp();
   const card = useCardState();
+  const channel = signUp.verifications.phoneNumber.channel;
 
   const phoneVerificationStatus = signUp.verifications.phoneNumber.status;
   const shouldAvoidPrepare = !signUp.status || phoneVerificationStatus === 'verified';
+  const isAlternativePhoneCodeProvider = !!channel && channel !== 'sms';
+
   const prepare = () => {
     if (shouldAvoidPrepare) {
       return;
     }
     return signUp
-      .preparePhoneNumberVerification({ strategy: 'phone_code' })
+      .preparePhoneNumberVerification({ strategy: 'phone_code', channel })
       .catch(err => handleError(err, [], card.setError));
   };
 
   // TODO: Introduce a useMutation to handle mutating requests
   useFetch(
-    shouldAvoidPrepare
+    // If an alternative phone code provider is used, we skip the prepare step
+    // because the verification is already created on the Start screen
+    shouldAvoidPrepare || isAlternativePhoneCodeProvider
       ? undefined
       : () =>
           signUp
-            .preparePhoneNumberVerification({ strategy: 'phone_code' })
+            .preparePhoneNumberVerification({ strategy: 'phone_code', channel })
             .catch(err => handleError(err, [], card.setError)),
     {
       name: 'signUp.preparePhoneNumberVerification',
@@ -40,12 +47,23 @@ export const SignUpPhoneCodeCard = withCardStateProvider(() => {
 
   const attempt = (code: string) => signUp.attemptPhoneNumberVerification({ code });
 
+  let cardTitleKey = localizationKeys('signUp.phoneCode.title');
+  let cardSubtitleKey = localizationKeys('signUp.phoneCode.subtitle');
+  let resendButtonKey = localizationKeys('signUp.phoneCode.resendButton');
+
+  if (isAlternativePhoneCodeProvider) {
+    const provider = getAlternativePhoneCodeProviderData(channel)?.name;
+    cardTitleKey = localizationKeys('signUp.alternativePhoneCodeProvider.title', { provider });
+    cardSubtitleKey = localizationKeys('signUp.alternativePhoneCodeProvider.subtitle', { provider });
+    resendButtonKey = localizationKeys('signUp.alternativePhoneCodeProvider.resendButton');
+  }
+
   return (
     <Flow.Part part='phoneCode'>
       <SignUpVerificationCodeForm
-        cardTitle={localizationKeys('signUp.phoneCode.title')}
-        cardSubtitle={localizationKeys('signUp.phoneCode.subtitle')}
-        resendButton={localizationKeys('signUp.phoneCode.resendButton')}
+        cardTitle={cardTitleKey}
+        cardSubtitle={cardSubtitleKey}
+        resendButton={resendButtonKey}
         prepare={prepare}
         attempt={attempt}
         safeIdentifier={signUp.phoneNumber}
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpSocialButtons.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpSocialButtons.tsx
index 2eaa170f5eb..05e58c33b86 100644
--- a/packages/clerk-js/src/ui/components/SignUp/SignUpSocialButtons.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/SignUpSocialButtons.tsx
@@ -1,5 +1,5 @@
 import { useClerk } from '@clerk/shared/react';
-import type { OAuthStrategy } from '@clerk/types';
+import type { OAuthStrategy, PhoneCodeChannel } from '@clerk/types';
 import React from 'react';
 
 import { useCoreSignUp, useSignUpContext } from '../../contexts';
@@ -9,7 +9,11 @@ import { SocialButtons } from '../../elements/SocialButtons';
 import { useRouter } from '../../router';
 import { handleError, originPrefersPopup, web3CallbackErrorHandler } from '../../utils';
 
-export type SignUpSocialButtonsProps = SocialButtonsProps & { continueSignUp?: boolean; legalAccepted?: boolean };
+export type SignUpSocialButtonsProps = SocialButtonsProps & {
+  continueSignUp?: boolean;
+  legalAccepted?: boolean;
+  onAlternativePhoneCodeProviderClick?: (channel: PhoneCodeChannel) => void;
+};
 
 export const SignUpSocialButtons = React.memo((props: SignUpSocialButtonsProps) => {
   const clerk = useClerk();
@@ -20,7 +24,7 @@ export const SignUpSocialButtons = React.memo((props: SignUpSocialButtonsProps)
   const redirectUrl = ctx.ssoCallbackUrl;
   const redirectUrlComplete = ctx.afterSignUpUrl || '/';
   const shouldUsePopup = ctx.oauthFlow === 'popup' || (ctx.oauthFlow === 'auto' && originPrefersPopup());
-  const { continueSignUp = false, ...rest } = props;
+  const { continueSignUp = false, onAlternativePhoneCodeProviderClick, ...rest } = props;
 
   return (
     <SocialButtons
@@ -75,6 +79,9 @@ export const SignUpSocialButtons = React.memo((props: SignUpSocialButtonsProps)
           })
           .catch(err => web3CallbackErrorHandler(err, card.setError));
       }}
+      alternativePhoneCodeCallback={channel => {
+        onAlternativePhoneCodeProviderClick?.(channel);
+      }}
     />
   );
 });
diff --git a/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx b/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
index 6b54b124b96..674a512fa85 100644
--- a/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
+++ b/packages/clerk-js/src/ui/components/SignUp/SignUpStart.tsx
@@ -1,5 +1,6 @@
+import { getAlternativePhoneCodeProviderData } from '@clerk/shared/alternativePhoneCode';
 import { useClerk } from '@clerk/shared/react';
-import type { SignUpResource } from '@clerk/types';
+import type { PhoneCodeChannel, PhoneCodeChannelData, SignUpResource } from '@clerk/types';
 import React from 'react';
 
 import { ERROR_CODES, SIGN_UP_MODES } from '../../../core/constants';
@@ -20,6 +21,7 @@ import { useLoadingStatus } from '../../hooks';
 import { useRouter } from '../../router';
 import type { FormControlState } from '../../utils';
 import { buildRequest, createPasswordError, createUsernameError, handleError, useFormControl } from '../../utils';
+import { SignUpAlternativePhoneCodePhoneNumberCard } from './SignUpAlternativePhoneCodePhoneNumberCard';
 import { SignUpForm } from './SignUpForm';
 import type { ActiveIdentifier } from './signUpFormHelpers';
 import { determineActiveFields, emailOrPhone, getInitialActiveIdentifier, showFormFields } from './signUpFormHelpers';
@@ -46,6 +48,9 @@ function SignUpStartInternal(): JSX.Element {
   );
   const { t, locale } = useLocalizations();
   const initialValues = ctx.initialValues || {};
+  const [alternativePhoneCodeProvider, setAlternativePhoneCodeProvider] = React.useState<PhoneCodeChannelData | null>(
+    null,
+  );
 
   const [missingRequirementsWithTicket, setMissingRequirementsWithTicket] = React.useState(false);
 
@@ -203,6 +208,8 @@ function SignUpStartInternal(): JSX.Element {
     setActiveCommIdentifierType(type);
   };
 
+  const alternativePhoneCodeProviderFields: FormControlState[] = [];
+
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
@@ -229,6 +236,10 @@ function SignUpStartInternal(): JSX.Element {
       } as any);
     }
 
+    if (alternativePhoneCodeProviderFields.length) {
+      fieldsToSubmit.push(...alternativePhoneCodeProviderFields);
+    }
+
     // In case of emailOrPhone (both email & phone are optional) and neither of them is provided,
     // add both to the submitted fields to trigger and render an error for both respective inputs
     const emailAddressProvided = !!(fieldsToSubmit.find(f => f.id === 'emailAddress')?.value || '');
@@ -268,6 +279,30 @@ function SignUpStartInternal(): JSX.Element {
       .finally(() => card.setIdle());
   };
 
+  // We need to send the alternative phone code provider channel in the sign up request
+  // together with the phone_code strategy, in order for FAPI to create a Verification upon this first request.
+  const handleAlternativePhoneCodeSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    const noop = () => {};
+    alternativePhoneCodeProviderFields.push({
+      id: 'strategy',
+      value: 'phone_code',
+      clearFeedback: noop,
+      setValue: noop,
+      onChange: noop,
+      setError: noop,
+    } as any);
+    alternativePhoneCodeProviderFields.push({
+      id: 'channel',
+      value: alternativePhoneCodeProvider?.channel,
+      clearFeedback: noop,
+      setValue: noop,
+      onChange: noop,
+      setError: noop,
+    } as any);
+
+    return handleSubmit(e);
+  };
+
   if (status.isLoading) {
     return <LoadingCard />;
   }
@@ -279,6 +314,16 @@ function SignUpStartInternal(): JSX.Element {
   const showOauthProviders =
     (!hasTicket || missingRequirementsWithTicket) && userSettings.authenticatableSocialStrategies.length > 0;
   const showWeb3Providers = !hasTicket && userSettings.web3FirstFactors.length > 0;
+  const showAlternativePhoneCodeProviders = !hasTicket && userSettings.alternativePhoneCodeChannels.length > 0;
+
+  const onAlternativePhoneCodeUseAnotherMethod = () => {
+    setAlternativePhoneCodeProvider(null);
+  };
+  const onAlternativePhoneCodeProviderClick = (phoneCodeChannel: PhoneCodeChannel) => {
+    const phoneCodeProvider: PhoneCodeChannelData | null =
+      getAlternativePhoneCodeProviderData(phoneCodeChannel) || null;
+    setAlternativePhoneCodeProvider(phoneCodeProvider);
+  };
 
   if (mode !== SIGN_UP_MODES.PUBLIC && !hasTicket) {
     return <SignUpRestrictedAccess />;
@@ -286,61 +331,75 @@ function SignUpStartInternal(): JSX.Element {
 
   return (
     <Flow.Part part='start'>
-      <Card.Root>
-        <Card.Content>
-          <Header.Root showLogo>
-            <Header.Title
-              localizationKey={
-                isCombinedFlow ? localizationKeys('signUp.start.titleCombined') : localizationKeys('signUp.start.title')
-              }
-            />
-            <Header.Subtitle
-              localizationKey={
-                isCombinedFlow
-                  ? localizationKeys('signUp.start.subtitleCombined')
-                  : localizationKeys('signUp.start.subtitle')
-              }
-            />
-          </Header.Root>
-          <Card.Alert>{card.error}</Card.Alert>
-          <Flex
-            direction='col'
-            elementDescriptor={descriptors.main}
-            gap={6}
-          >
-            <SocialButtonsReversibleContainerWithDivider>
-              {(showOauthProviders || showWeb3Providers) && (
-                <SignUpSocialButtons
-                  enableOAuthProviders={showOauthProviders}
-                  enableWeb3Providers={showWeb3Providers}
-                  continueSignUp={missingRequirementsWithTicket}
-                  legalAccepted={Boolean(formState.legalAccepted.checked) || undefined}
-                />
-              )}
-              {shouldShowForm && (
-                <SignUpForm
-                  handleSubmit={handleSubmit}
-                  fields={fields}
-                  formState={formState}
-                  canToggleEmailPhone={canToggleEmailPhone}
-                  handleEmailPhoneToggle={handleChangeActive}
-                />
-              )}
-            </SocialButtonsReversibleContainerWithDivider>
-            {!shouldShowForm && <CaptchaElement />}
-          </Flex>
-        </Card.Content>
-
-        <Card.Footer>
-          <Card.Action elementId='signUp'>
-            <Card.ActionText localizationKey={localizationKeys('signUp.start.actionText')} />
-            <Card.ActionLink
-              localizationKey={localizationKeys('signUp.start.actionLink')}
-              to={isCombinedFlow ? '../' : clerk.buildUrlWithAuth(signInUrl)}
-            />
-          </Card.Action>
-        </Card.Footer>
-      </Card.Root>
+      {!alternativePhoneCodeProvider ? (
+        <Card.Root>
+          <Card.Content>
+            <Header.Root showLogo>
+              <Header.Title
+                localizationKey={
+                  isCombinedFlow
+                    ? localizationKeys('signUp.start.titleCombined')
+                    : localizationKeys('signUp.start.title')
+                }
+              />
+              <Header.Subtitle
+                localizationKey={
+                  isCombinedFlow
+                    ? localizationKeys('signUp.start.subtitleCombined')
+                    : localizationKeys('signUp.start.subtitle')
+                }
+              />
+            </Header.Root>
+            <Card.Alert>{card.error}</Card.Alert>
+            <Flex
+              direction='col'
+              elementDescriptor={descriptors.main}
+              gap={6}
+            >
+              <SocialButtonsReversibleContainerWithDivider>
+                {(showOauthProviders || showWeb3Providers) && (
+                  <SignUpSocialButtons
+                    enableOAuthProviders={showOauthProviders}
+                    enableWeb3Providers={showWeb3Providers}
+                    enableAlternativePhoneCodeProviders={showAlternativePhoneCodeProviders}
+                    onAlternativePhoneCodeProviderClick={onAlternativePhoneCodeProviderClick}
+                    continueSignUp={missingRequirementsWithTicket}
+                    legalAccepted={Boolean(formState.legalAccepted.checked) || undefined}
+                  />
+                )}
+                {shouldShowForm && (
+                  <SignUpForm
+                    handleSubmit={handleSubmit}
+                    fields={fields}
+                    formState={formState}
+                    canToggleEmailPhone={canToggleEmailPhone}
+                    handleEmailPhoneToggle={handleChangeActive}
+                  />
+                )}
+              </SocialButtonsReversibleContainerWithDivider>
+              {!shouldShowForm && <CaptchaElement />}
+            </Flex>
+          </Card.Content>
+
+          <Card.Footer>
+            <Card.Action elementId='signUp'>
+              <Card.ActionText localizationKey={localizationKeys('signUp.start.actionText')} />
+              <Card.ActionLink
+                localizationKey={localizationKeys('signUp.start.actionLink')}
+                to={isCombinedFlow ? '../' : clerk.buildUrlWithAuth(signInUrl)}
+              />
+            </Card.Action>
+          </Card.Footer>
+        </Card.Root>
+      ) : (
+        <SignUpAlternativePhoneCodePhoneNumberCard
+          handleSubmit={handleAlternativePhoneCodeSubmit}
+          fields={fields}
+          formState={formState}
+          onUseAnotherMethod={onAlternativePhoneCodeUseAnotherMethod}
+          phoneCodeProvider={alternativePhoneCodeProvider}
+        />
+      )}
     </Flow.Part>
   );
 }
diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
index e1d95a0bb98..a6de0bb9073 100644
--- a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
+++ b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -101,6 +101,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'formResendCodeLink',
 
   'dividerRow',
+  'dividerColumn',
   'dividerText',
   'dividerLine',
 
diff --git a/packages/clerk-js/src/ui/elements/Divider.tsx b/packages/clerk-js/src/ui/elements/Divider.tsx
index faf61fea5ce..caba5a2cfb5 100644
--- a/packages/clerk-js/src/ui/elements/Divider.tsx
+++ b/packages/clerk-js/src/ui/elements/Divider.tsx
@@ -27,14 +27,39 @@ export const Divider = (props: DividerProps) => {
   );
 };
 
-const DividerLine = () => {
+export const VerticalDivider = (props: DividerProps) => {
+  const { sx, ...rest } = props;
+  return (
+    <Flex
+      center
+      direction='col'
+      elementDescriptor={descriptors.dividerColumn}
+      sx={[
+        t => ({
+          height: t.space.$6,
+        }),
+        sx,
+      ]}
+      {...rest}
+    >
+      <DividerLine vertical />
+    </Flex>
+  );
+};
+
+type DividerLineProps = {
+  vertical?: boolean;
+};
+
+const DividerLine = (props?: DividerLineProps) => {
+  const styles = props?.vertical ? { width: '1px' } : { height: '1px' };
   return (
     <Flex
       elementDescriptor={descriptors.dividerLine}
       sx={t => ({
         flex: '1',
-        height: '1px',
         backgroundColor: t.colors.$neutralAlpha100,
+        ...styles,
       })}
     />
   );
diff --git a/packages/clerk-js/src/ui/elements/Header.tsx b/packages/clerk-js/src/ui/elements/Header.tsx
index 5a7d1c0c6f3..e79e47d272a 100644
--- a/packages/clerk-js/src/ui/elements/Header.tsx
+++ b/packages/clerk-js/src/ui/elements/Header.tsx
@@ -4,18 +4,21 @@ import { Col, descriptors, Heading, Icon, Link, Text, useAppearance } from '../c
 import { ArrowLeftIcon } from '../icons';
 import type { PropsOfComponent, ThemableCssProp } from '../styledSystem';
 import { ApplicationLogo } from './ApplicationLogo';
+import { VerticalDivider } from './Divider';
 
 export type HeaderProps = PropsOfComponent<typeof Col> & {
   showLogo?: boolean;
+  showDivider?: boolean;
   contentSx?: ThemableCssProp;
 };
 
 const Root = React.memo(
   React.forwardRef<HTMLDivElement, HeaderProps>((props, ref) => {
-    const { sx, children, contentSx, gap = 6, showLogo = false, ...rest } = props;
+    const { sx, children, contentSx, gap = 6, showLogo = false, showDivider = false, ...rest } = props;
     const appearance = useAppearance();
 
     const logoIsVisible = appearance.parsedLayout.logoPlacement === 'inside' && showLogo;
+    const verticalDividerIsVisible = showDivider && logoIsVisible;
 
     return (
       <Col
@@ -26,6 +29,7 @@ const Root = React.memo(
         {...rest}
       >
         {logoIsVisible && <ApplicationLogo />}
+        {verticalDividerIsVisible && <VerticalDivider />}
         <Col
           gap={1}
           sx={contentSx}
diff --git a/packages/clerk-js/src/ui/elements/SocialButtons.tsx b/packages/clerk-js/src/ui/elements/SocialButtons.tsx
index 5d33d4d77f7..4365941090a 100644
--- a/packages/clerk-js/src/ui/elements/SocialButtons.tsx
+++ b/packages/clerk-js/src/ui/elements/SocialButtons.tsx
@@ -1,4 +1,5 @@
-import type { OAuthProvider, OAuthStrategy, Web3Provider, Web3Strategy } from '@clerk/types';
+import { getAlternativePhoneCodeProviderData } from '@clerk/shared/alternativePhoneCode';
+import type { OAuthProvider, OAuthStrategy, PhoneCodeChannel, Web3Provider, Web3Strategy } from '@clerk/types';
 import type { Ref } from 'react';
 import React, { forwardRef, isValidElement } from 'react';
 
@@ -30,11 +31,13 @@ const MAX_STRATEGIES_PER_ROW = 6;
 export type SocialButtonsProps = React.PropsWithChildren<{
   enableOAuthProviders: boolean;
   enableWeb3Providers: boolean;
+  enableAlternativePhoneCodeProviders: boolean;
 }>;
 
 type SocialButtonsRootProps = SocialButtonsProps & {
   oauthCallback: (strategy: OAuthStrategy) => Promise<unknown>;
   web3Callback: (strategy: Web3Strategy) => Promise<unknown>;
+  alternativePhoneCodeCallback: (channel: PhoneCodeChannel) => void;
   idleAfterDelay?: boolean;
 };
 
@@ -42,21 +45,29 @@ const isWeb3Strategy = (val: string): val is Web3Strategy => {
   return val.startsWith('web3_');
 };
 
+const isPhoneCodeChannel = (val: string): val is PhoneCodeChannel => {
+  return !!getAlternativePhoneCodeProviderData(val);
+};
+
 export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
   const {
     oauthCallback,
     web3Callback,
+    alternativePhoneCodeCallback,
     enableOAuthProviders = true,
     enableWeb3Providers = true,
+    enableAlternativePhoneCodeProviders = true,
     idleAfterDelay = true,
   } = props;
-  const { web3Strategies, authenticatableOauthStrategies, strategyToDisplayData } = useEnabledThirdPartyProviders();
+  const { web3Strategies, authenticatableOauthStrategies, strategyToDisplayData, alternativePhoneCodeChannels } =
+    useEnabledThirdPartyProviders();
   const card = useCardState();
   const { socialButtonsVariant } = useAppearance().parsedLayout;
 
   const strategies = [
     ...(enableOAuthProviders ? authenticatableOauthStrategies : []),
     ...(enableWeb3Providers ? web3Strategies : []),
+    ...(enableAlternativePhoneCodeProviders ? alternativePhoneCodeChannels : []),
   ];
 
   if (!strategies.length) {
@@ -73,7 +84,7 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
         ? false
         : strategies.length <= SOCIAL_BUTTON_BLOCK_THRESHOLD;
 
-  const startOauth = (strategy: OAuthStrategy | Web3Strategy) => async () => {
+  const startOauth = async (strategy: OAuthStrategy | Web3Strategy) => {
     card.setLoading(strategy);
     try {
       if (isWeb3Strategy(strategy)) {
@@ -91,6 +102,14 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
     }
   };
 
+  const onSocialButtonClick = (strategy: OAuthStrategy | Web3Strategy | PhoneCodeChannel) => async () => {
+    if (isPhoneCodeChannel(strategy)) {
+      alternativePhoneCodeCallback(strategy);
+    } else {
+      await startOauth(strategy);
+    }
+  };
+
   const ButtonElement = preferBlockButtons ? SocialButtonBlock : SocialButtonIcon;
 
   return (
@@ -159,7 +178,7 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
               <ButtonElement
                 key={strategy}
                 id={strategyToDisplayData[strategy].id}
-                onClick={startOauth(strategy)}
+                onClick={onSocialButtonClick(strategy)}
                 isLoading={card.loadingMetadata === strategy}
                 isDisabled={card.isLoading}
                 label={label}
@@ -176,7 +195,7 @@ export const SocialButtons = React.memo((props: SocialButtonsRootProps) => {
 
 type SocialButtonProps = PropsOfComponent<typeof Button> & {
   icon: React.ReactElement;
-  id: OAuthProvider | Web3Provider;
+  id: OAuthProvider | Web3Provider | PhoneCodeChannel;
   textLocalizationKey: LocalizationKey | undefined;
   label?: string;
 };
diff --git a/packages/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx b/packages/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx
index 622b0ef0424..12a4a3dc91d 100644
--- a/packages/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx
+++ b/packages/clerk-js/src/ui/hooks/useEnabledThirdPartyProviders.tsx
@@ -1,22 +1,30 @@
+import { ALTERNATIVE_PHONE_CODE_PROVIDERS } from '@clerk/shared/alternativePhoneCode';
 import { iconImageUrl } from '@clerk/shared/constants';
 import { OAUTH_PROVIDERS } from '@clerk/shared/oauth';
 import { WEB3_PROVIDERS } from '@clerk/shared/web3';
-import type { OAuthProvider, OAuthStrategy, Web3Provider, Web3Strategy } from '@clerk/types';
+import type {
+  OAuthProvider,
+  OAuthStrategy,
+  PhoneCodeChannel,
+  PhoneCodeProvider,
+  Web3Provider,
+  Web3Strategy,
+} from '@clerk/types';
 
 import { useEnvironment } from '../contexts/EnvironmentContext';
 import { fromEntries } from '../utils';
 
 type ThirdPartyStrategyToDataMap = {
-  [k in Web3Strategy | OAuthStrategy]: {
-    id: Web3Provider | OAuthProvider;
+  [k in Web3Strategy | OAuthStrategy | PhoneCodeChannel]: {
+    id: Web3Provider | OAuthProvider | PhoneCodeProvider;
     iconUrl: string;
     name: string;
   };
 };
 
 type ThirdPartyProviderToDataMap = {
-  [k in Web3Provider | OAuthProvider]: {
-    strategy: Web3Strategy | OAuthStrategy;
+  [k in Web3Provider | OAuthProvider | PhoneCodeProvider]: {
+    strategy: Web3Strategy | OAuthStrategy | PhoneCodeChannel;
     iconUrl: string;
     name: string;
   };
@@ -24,22 +32,34 @@ type ThirdPartyProviderToDataMap = {
 
 const oauthStrategies = OAUTH_PROVIDERS.map(p => p.strategy);
 const web3Strategies = WEB3_PROVIDERS.map(p => p.strategy);
+const phoneCodeChannels = ALTERNATIVE_PHONE_CODE_PROVIDERS.map(p => p.channel);
 
-const providerToDisplayData: ThirdPartyProviderToDataMap = fromEntries(
-  [...OAUTH_PROVIDERS, ...WEB3_PROVIDERS].map(p => {
+const providerToDisplayData: ThirdPartyProviderToDataMap = fromEntries([
+  ...[...OAUTH_PROVIDERS, ...WEB3_PROVIDERS].map(p => {
     return [p.provider, { strategy: p.strategy, name: p.name, iconUrl: iconImageUrl(p.provider) }];
   }),
-) as ThirdPartyProviderToDataMap;
+  ...[...ALTERNATIVE_PHONE_CODE_PROVIDERS].map(p => {
+    return [p.channel, { strategy: p.channel, name: p.name, iconUrl: iconImageUrl(p.channel) }];
+  }),
+]) as ThirdPartyProviderToDataMap;
 
-const strategyToDisplayData: ThirdPartyStrategyToDataMap = fromEntries(
-  [...OAUTH_PROVIDERS, ...WEB3_PROVIDERS].map(p => {
+const strategyToDisplayData: ThirdPartyStrategyToDataMap = fromEntries([
+  ...[...OAUTH_PROVIDERS, ...WEB3_PROVIDERS].map(p => {
     return [p.strategy, { id: p.provider, name: p.name, iconUrl: iconImageUrl(p.provider) }];
   }),
-) as ThirdPartyStrategyToDataMap;
+  ...[...ALTERNATIVE_PHONE_CODE_PROVIDERS].map(p => {
+    return [p.channel, { id: p.channel, name: p.name, iconUrl: iconImageUrl(p.channel) }];
+  }),
+]) as ThirdPartyStrategyToDataMap;
 
 export const useEnabledThirdPartyProviders = () => {
-  const { socialProviderStrategies, web3FirstFactors, authenticatableSocialStrategies, social } =
-    useEnvironment().userSettings;
+  const {
+    socialProviderStrategies,
+    web3FirstFactors,
+    authenticatableSocialStrategies,
+    social,
+    alternativePhoneCodeChannels,
+  } = useEnvironment().userSettings;
 
   // Filter out any OAuth strategies that are not yet known, they are not included in our types.
   const knownSocialProviderStrategies = socialProviderStrategies.filter(s => oauthStrategies.includes(s));
@@ -93,9 +113,17 @@ export const useEnabledThirdPartyProviders = () => {
   // Filter out any Web3 strategies that are not yet known, they are not included in our types.
   const knownWeb3Strategies = web3FirstFactors.filter(s => web3Strategies.includes(s));
 
+  const knownAlternativePhoneCodeChannels = alternativePhoneCodeChannels.filter(s => phoneCodeChannels.includes(s));
+
   return {
-    strategies: [...knownSocialProviderStrategies, ...knownWeb3Strategies, ...customSocialProviderStrategies],
+    strategies: [
+      ...knownSocialProviderStrategies,
+      ...knownWeb3Strategies,
+      ...customSocialProviderStrategies,
+      ...knownAlternativePhoneCodeChannels,
+    ],
     web3Strategies: knownWeb3Strategies,
+    alternativePhoneCodeChannels: knownAlternativePhoneCodeChannels,
     authenticatableOauthStrategies,
     strategyToDisplayData: strategyToDisplayData,
     providerToDisplayData: providerToDisplayData,
diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts
index 2ccf7f00a73..9f594496a36 100644
--- a/packages/localizations/src/en-US.ts
+++ b/packages/localizations/src/en-US.ts
@@ -524,6 +524,12 @@ export const enUS: LocalizationResource = {
       subtitle: 'to continue to {{applicationName}}',
       title: 'Check your phone',
     },
+    alternativePhoneCodeProvider: {
+      formTitle: 'Verification code',
+      resendButton: "Didn't receive a code? Resend",
+      subtitle: 'to continue to {{applicationName}}',
+      title: 'Check your {{provider}}',
+    },
     phoneCodeMfa: {
       formTitle: 'Verification code',
       resendButton: "Didn't receive a code? Resend",
@@ -553,6 +559,12 @@ export const enUS: LocalizationResource = {
       subtitleCombined: undefined,
       title: 'Sign in to {{applicationName}}',
       titleCombined: 'Continue to {{applicationName}}',
+      alternativePhoneCodeProvider: {
+        actionLink: 'Use another method',
+        label: '{{provider}} phone number',
+        subtitle: 'Enter your phone number to get a verification code on {{provider}}.',
+        title: 'Sign in to {{applicationName}} with {{provider}}',
+      },
     },
     totpMfa: {
       formTitle: 'Verification code',
@@ -617,6 +629,11 @@ export const enUS: LocalizationResource = {
       subtitle: 'Enter the verification code sent to your phone',
       title: 'Verify your phone',
     },
+    alternativePhoneCodeProvider: {
+      resendButton: "Didn't receive a code? Resend",
+      subtitle: 'Enter the verification code sent to your {{provider}}',
+      title: 'Verify your {{provider}}',
+    },
     restrictedAccess: {
       actionLink: 'Sign in',
       actionText: 'Already have an account?',
@@ -635,6 +652,12 @@ export const enUS: LocalizationResource = {
       subtitleCombined: 'Welcome! Please fill in the details to get started.',
       title: 'Create your account',
       titleCombined: 'Create your account',
+      alternativePhoneCodeProvider: {
+        actionLink: 'Use another method',
+        label: '{{provider}} phone number',
+        subtitle: 'Enter your phone number to get a verification code on {{provider}}.',
+        title: 'Sign up to {{applicationName}} with {{provider}}',
+      },
     },
   },
   socialButtonsBlockButton: 'Continue with {{provider|titleize}}',
diff --git a/packages/shared/package.json b/packages/shared/package.json
index 66f6bbd263c..5cd4f7fd5ef 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -121,7 +121,8 @@
     "jwtPayloadParser",
     "eventBus",
     "netlifyCacheHandler",
-    "clerkEventBus"
+    "clerkEventBus",
+    "phoneCodeChannel"
   ],
   "scripts": {
     "build": "tsup",
diff --git a/packages/shared/src/alternativePhoneCode.ts b/packages/shared/src/alternativePhoneCode.ts
new file mode 100644
index 00000000000..1ad01a913db
--- /dev/null
+++ b/packages/shared/src/alternativePhoneCode.ts
@@ -0,0 +1,15 @@
+import type { PhoneCodeChannelData } from '@clerk/types';
+
+export const ALTERNATIVE_PHONE_CODE_PROVIDERS: PhoneCodeChannelData[] = [
+  {
+    channel: 'whatsapp',
+    name: 'WhatsApp',
+  },
+];
+
+export const getAlternativePhoneCodeProviderData = (channel?: string): PhoneCodeChannelData | null => {
+  if (!channel) {
+    return null;
+  }
+  return ALTERNATIVE_PHONE_CODE_PROVIDERS.find(p => p.channel === channel) || null;
+};
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index 20c3edc9f1e..00e9a6f708d 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -13,6 +13,7 @@ import type {
 } from './elementIds';
 import type { EnterpriseProvider } from './enterpriseAccount';
 import type { OAuthProvider } from './oauth';
+import type { PhoneCodeChannel } from './phoneCodeChannel';
 import type { SamlIdpSlug } from './saml';
 import type { BuiltInColors, TransparentColor } from './theme';
 import type { Web3Provider } from './web3';
@@ -188,21 +189,21 @@ export type ElementsConfig = {
 
   socialButtonsRoot: WithOptions;
   socialButtons: WithOptions;
-  socialButtonsIconButton: WithOptions<OAuthProvider | Web3Provider, LoadingState>;
-  socialButtonsBlockButton: WithOptions<OAuthProvider | Web3Provider, LoadingState>;
-  socialButtonsBlockButtonText: WithOptions<OAuthProvider | Web3Provider>;
-  socialButtonsProviderIcon: WithOptions<OAuthProvider | Web3Provider, LoadingState>;
-  socialButtonsProviderInitialIcon: WithOptions<OAuthProvider | Web3Provider, LoadingState>;
+  socialButtonsIconButton: WithOptions<OAuthProvider | Web3Provider | PhoneCodeChannel, LoadingState>;
+  socialButtonsBlockButton: WithOptions<OAuthProvider | Web3Provider | PhoneCodeChannel, LoadingState>;
+  socialButtonsBlockButtonText: WithOptions<OAuthProvider | Web3Provider | PhoneCodeChannel>;
+  socialButtonsProviderIcon: WithOptions<OAuthProvider | Web3Provider | PhoneCodeChannel, LoadingState>;
+  socialButtonsProviderInitialIcon: WithOptions<OAuthProvider | Web3Provider | PhoneCodeChannel, LoadingState>;
 
   enterpriseButtonsProviderIcon: WithOptions<EnterpriseProvider, LoadingState>;
 
-  providerIcon: WithOptions<OAuthProvider | Web3Provider | SamlIdpSlug, LoadingState>;
-  providerInitialIcon: WithOptions<OAuthProvider | Web3Provider | SamlIdpSlug, LoadingState>;
+  providerIcon: WithOptions<OAuthProvider | Web3Provider | PhoneCodeChannel | SamlIdpSlug, LoadingState>;
+  providerInitialIcon: WithOptions<OAuthProvider | Web3Provider | PhoneCodeChannel | SamlIdpSlug, LoadingState>;
 
   alternativeMethods: WithOptions;
-  alternativeMethodsBlockButton: WithOptions<OAuthProvider | Web3Provider, LoadingState>;
-  alternativeMethodsBlockButtonText: WithOptions<OAuthProvider | Web3Provider>;
-  alternativeMethodsBlockButtonArrow: WithOptions<OAuthProvider | Web3Provider>;
+  alternativeMethodsBlockButton: WithOptions<OAuthProvider | Web3Provider | PhoneCodeChannel, LoadingState>;
+  alternativeMethodsBlockButtonText: WithOptions<OAuthProvider | Web3Provider | PhoneCodeChannel>;
+  alternativeMethodsBlockButtonArrow: WithOptions<OAuthProvider | Web3Provider | PhoneCodeChannel>;
 
   checkoutFormLineItemsRoot: WithOptions;
   checkoutFormElementsRoot: WithOptions;
@@ -219,6 +220,7 @@ export type ElementsConfig = {
   otpCodeFieldErrorText: WithOptions;
 
   dividerRow: WithOptions;
+  dividerColumn: WithOptions;
   dividerText: WithOptions;
   dividerLine: WithOptions;
 
diff --git a/packages/types/src/factors.ts b/packages/types/src/factors.ts
index 6ef8237e3f1..20fde2931a2 100644
--- a/packages/types/src/factors.ts
+++ b/packages/types/src/factors.ts
@@ -1,3 +1,5 @@
+import type { PhoneCodeChannel } from 'phoneCodeChannel';
+
 import type { PublicKeyCredentialWithAuthenticatorAssertionResponse } from './passkey';
 import type {
   BackupCodeStrategy,
@@ -35,6 +37,7 @@ export type PhoneCodeFactor = {
   safeIdentifier: string;
   primary?: boolean;
   default?: boolean;
+  channel?: PhoneCodeChannel;
 };
 
 export type Web3SignatureFactor = {
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 5f2bb42133b..143e5f7df9c 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -68,3 +68,4 @@ export * from './samlConnection';
 export * from './waitlist';
 export * from './snapshots';
 export * from './authObject';
+export * from './phoneCodeChannel';
diff --git a/packages/types/src/json.ts b/packages/types/src/json.ts
index 79b1c5ad6ae..5946d233c37 100644
--- a/packages/types/src/json.ts
+++ b/packages/types/src/json.ts
@@ -20,6 +20,7 @@ import type { OrganizationInvitationStatus } from './organizationInvitation';
 import type { OrganizationCustomRoleKey, OrganizationPermissionKey } from './organizationMembership';
 import type { OrganizationSettingsJSON } from './organizationSettings';
 import type { OrganizationSuggestionStatus } from './organizationSuggestion';
+import type { PhoneCodeChannel } from './phoneCodeChannel';
 import type { SamlIdpSlug } from './saml';
 import type { SessionStatus, SessionTask } from './session';
 import type { SessionVerificationLevel, SessionVerificationStatus } from './sessionVerification';
@@ -315,6 +316,7 @@ export interface VerificationJSON extends ClerkResourceJSON {
   external_verification_redirect_url?: string;
   attempts: number;
   expire_at: number;
+  channel?: PhoneCodeChannel;
   error: ClerkAPIErrorJSON;
 }
 
@@ -328,6 +330,7 @@ export interface SignUpVerificationsJSON {
 export interface SignUpVerificationJSON extends VerificationJSON {
   next_action: string;
   supported_strategies: string[];
+  channel?: PhoneCodeChannel;
 }
 
 export interface ClerkAPIErrorJSON {
diff --git a/packages/types/src/localization.ts b/packages/types/src/localization.ts
index cee845f5784..b4ea6fe5806 100644
--- a/packages/types/src/localization.ts
+++ b/packages/types/src/localization.ts
@@ -156,6 +156,12 @@ type _LocalizationResource = {
       actionLink: LocalizationValue;
       actionLink__use_phone: LocalizationValue;
       actionLink__use_email: LocalizationValue;
+      alternativePhoneCodeProvider: {
+        actionLink: LocalizationValue;
+        label: LocalizationValue;
+        subtitle: LocalizationValue;
+        title: LocalizationValue;
+      };
     };
     emailLink: {
       title: LocalizationValue;
@@ -193,6 +199,13 @@ type _LocalizationResource = {
       formSubtitle: LocalizationValue;
       resendButton: LocalizationValue;
     };
+    alternativePhoneCodeProvider: {
+      formSubtitle: LocalizationValue;
+      formTitle: LocalizationValue;
+      resendButton: LocalizationValue;
+      subtitle: LocalizationValue;
+      title: LocalizationValue;
+    };
     continue: {
       title: LocalizationValue;
       subtitle: LocalizationValue;
@@ -235,6 +248,12 @@ type _LocalizationResource = {
       actionLink__use_passkey: LocalizationValue;
       actionText__join_waitlist: LocalizationValue;
       actionLink__join_waitlist: LocalizationValue;
+      alternativePhoneCodeProvider: {
+        actionLink: LocalizationValue;
+        label: LocalizationValue;
+        subtitle: LocalizationValue;
+        title: LocalizationValue;
+      };
     };
     password: {
       title: LocalizationValue;
@@ -317,6 +336,12 @@ type _LocalizationResource = {
       formTitle: LocalizationValue;
       resendButton: LocalizationValue;
     };
+    alternativePhoneCodeProvider: {
+      formTitle: LocalizationValue;
+      resendButton: LocalizationValue;
+      subtitle: LocalizationValue;
+      title: LocalizationValue;
+    };
     phoneCodeMfa: {
       title: LocalizationValue;
       subtitle: LocalizationValue;
diff --git a/packages/types/src/phoneCodeChannel.ts b/packages/types/src/phoneCodeChannel.ts
new file mode 100644
index 00000000000..516e9e57324
--- /dev/null
+++ b/packages/types/src/phoneCodeChannel.ts
@@ -0,0 +1,10 @@
+export interface PhoneCodeChannelData {
+  channel: PhoneCodeChannel;
+  name: string;
+}
+
+export type PhoneCodeSMSChannel = 'sms';
+export type PhoneCodeWhatsAppChannel = 'whatsapp';
+
+export type PhoneCodeChannel = PhoneCodeSMSChannel | PhoneCodeWhatsAppChannel;
+export type PhoneCodeProvider = PhoneCodeChannel;
diff --git a/packages/types/src/phoneNumber.ts b/packages/types/src/phoneNumber.ts
index a36f0fb4d94..d30715246b3 100644
--- a/packages/types/src/phoneNumber.ts
+++ b/packages/types/src/phoneNumber.ts
@@ -1,3 +1,5 @@
+import type { PhoneCodeChannel } from 'phoneCodeChannel';
+
 import type { IdentificationLinkResource } from './identificationLink';
 import type { ClerkResource } from './resource';
 import type { PhoneNumberJSONSnapshot } from './snapshots';
@@ -8,6 +10,7 @@ export type PhoneNumberVerificationStrategy = PhoneCodeStrategy;
 
 export type PreparePhoneNumberVerificationParams = {
   strategy: PhoneNumberVerificationStrategy;
+  channel?: PhoneCodeChannel;
 };
 
 export type AttemptPhoneNumberVerificationParams = {
diff --git a/packages/types/src/signUp.ts b/packages/types/src/signUp.ts
index 97e46dfc885..d9485906aa3 100644
--- a/packages/types/src/signUp.ts
+++ b/packages/types/src/signUp.ts
@@ -1,3 +1,5 @@
+import type { PhoneCodeChannel } from 'phoneCodeChannel';
+
 import type { FirstNameAttribute, LastNameAttribute, LegalAcceptedAttribute, PasswordAttribute } from './attributes';
 import type { AttemptEmailAddressVerificationParams, PrepareEmailAddressVerificationParams } from './emailAddress';
 import type {
@@ -130,6 +132,7 @@ export type PrepareVerificationParams =
     }
   | {
       strategy: PhoneCodeStrategy;
+      channel?: PhoneCodeChannel;
     }
   | {
       strategy: Web3Strategy;
@@ -176,7 +179,13 @@ export type SignUpCreateParams = Partial<
     externalAccountStrategy: string;
     externalAccountRedirectUrl: string;
     externalAccountActionCompleteRedirectUrl: string;
-    strategy: OAuthStrategy | SamlStrategy | EnterpriseSSOStrategy | TicketStrategy | GoogleOneTapStrategy;
+    strategy:
+      | OAuthStrategy
+      | SamlStrategy
+      | EnterpriseSSOStrategy
+      | TicketStrategy
+      | GoogleOneTapStrategy
+      | PhoneCodeStrategy;
     redirectUrl: string;
     actionCompleteRedirectUrl: string;
     transfer: boolean;
@@ -186,6 +195,7 @@ export type SignUpCreateParams = Partial<
     legalAccepted: boolean;
     oidcPrompt: string;
     oidcLoginHint: string;
+    channel: PhoneCodeChannel;
   } & Omit<SnakeToCamel<Record<SignUpAttributeField | SignUpVerifiableField, string>>, 'legalAccepted'>
 >;
 
diff --git a/packages/types/src/userSettings.ts b/packages/types/src/userSettings.ts
index 2cd20081199..3b1271a5220 100644
--- a/packages/types/src/userSettings.ts
+++ b/packages/types/src/userSettings.ts
@@ -1,3 +1,5 @@
+import type { PhoneCodeChannel } from 'phoneCodeChannel';
+
 import type { ClerkResourceJSON } from './json';
 import type { ClerkResource } from './resource';
 import type { UserSettingsJSONSnapshot } from './snapshots';
@@ -35,6 +37,7 @@ export type AttributeDataJSON = {
   used_for_second_factor: boolean;
   second_factors: VerificationStrategy[];
   verify_at_sign_up: boolean;
+  channels?: PhoneCodeChannel[];
 };
 
 export type AttributeData = AttributeDataJSON & {
@@ -146,6 +149,7 @@ export interface UserSettingsResource extends ClerkResource {
   socialProviderStrategies: OAuthStrategy[];
   authenticatableSocialStrategies: OAuthStrategy[];
   web3FirstFactors: Web3Strategy[];
+  alternativePhoneCodeChannels: PhoneCodeChannel[];
   enabledFirstFactorIdentifiers: Attribute[];
   instanceIsPasswordBased: boolean;
   hasValidAuthFactor: boolean;
diff --git a/packages/types/src/verification.ts b/packages/types/src/verification.ts
index 88ce15679d8..2577bbf1b47 100644
--- a/packages/types/src/verification.ts
+++ b/packages/types/src/verification.ts
@@ -1,5 +1,6 @@
 import type { ClerkAPIError } from './api';
 import type { PublicKeyCredentialCreationOptionsWithoutExtensions } from './passkey';
+import type { PhoneCodeChannel } from './phoneCodeChannel';
 import type { ClerkResource } from './resource';
 import type { VerificationJSONSnapshot } from './snapshots';
 
@@ -14,6 +15,7 @@ export interface VerificationResource extends ClerkResource {
   strategy: string | null;
   verifiedAtClient: string | null;
   verifiedFromTheSameClient: () => boolean;
+  channel?: PhoneCodeChannel;
   __internal_toSnapshot: () => VerificationJSONSnapshot;
 }